Accidental CSS prob with JqueryMobile Themeroller radio button...

LordNorbury · 07-01-2015 2:10pm #1

Hi folks,

I was running my website last night in my dev environment, I was viewing it in Firebox, I have checkboxes and radio buttons on one one particular page in my solution. I don't know how I did this, I was at it all evening and I should have just gone home, but on my page with the radio buttons and checkboxes which are themed using themeroller, I was in "inspect element" in Firebox, I was browsing through the CSS information and I ticked something or untiicked something but whatever I did, it has gone and messed up the style/appearance of my Radio buttons.

I'm not familar enough with all the CSS files and stuff that comes with themeroller to know what CSS setting I must have changed that has my radio button mixed up, I couldn't have achieved this if I tried I have to say, but wondering could anyone help me sort this out? I was so tired trying to sort this out, I tried downloading the themeroller files from my remote web hosting space to my local laptop to undo whatever it was I had done, but what I did was uploaded instead of downloaded so now I have the problem on my web server as well as my local PC!

As you can see from the image above, when the radio button is selected, it is off centre and doesn't look like a radio button does when it is normally used...

This is what my radio button looked like before I accidently messed it up last night...

Many thanks in advance for any help with this!

LordNorbury · 08-01-2015 11:57am

OP here, would anyone be able to suggest where my issue is here? I'm completely bamboozled with this problem I'm having.

Whatever about the issue above, I have now completely recreated my themeroller CSS files from the themeroller website, I've deleted all my previous themeroller CSS files from my "themes" folder in my project and have replaced them with the new themes, yet I'm still having this issue???

I've deleted all my browser history, etc, can't for the life of me get my head around this???

Graham · 08-01-2015 12:36pm

LordNorbury wrote: »

OP here, would anyone be able to suggest where my issue is here? I'm completely bamboozled with this problem I'm having.

Whatever about the issue above, I have now completely recreated my themeroller CSS files from the themeroller website, I've deleted all my previous themeroller CSS files from my "themes" folder in my project and have replaced them with the new themes, yet I'm still having this issue???

I've deleted all my browser history, etc, can't for the life of me get my head around this???

If anyone can troubleshoot css/JS issues from two screenshots, I will be mightily impressed. It's a bit like sending a mechanic a photo of your car when the engine won't start.

Are you testing through localhost?

LordNorbury · 08-01-2015 12:49pm

Graham wrote: »

If anyone can troubleshoot css/JS issues from two screenshots, I will be mightily impressed. It's a bit like sending a mechanic a photo of your car when the engine won't start.

Are you testing through localhost?

Yeah but when I say "testing", I'm not really testing, just troubleshooting! I would have thought I can't possibly have a problem here when I've deleted my 3 themeroller files, rebuilt them from new and replaced them in the project, even closed solution and opened it from fresh. How can I still be having this issue when I've done that?!?

Graham · 08-01-2015 1:02pm

LordNorbury wrote: »

Yeah but when I say "testing", I'm not really testing, just troubleshooting! I would have thought I can't possibly have a problem here when I've deleted my 3 themeroller files, rebuilt them from new and replaced them in the project, even closed solution and opened it from fresh. How can I still be having this issue when I've done that?!?

Are you testing from localhost or an external server? Any chance something is being cached somewhere else (corporate proxy or CDN)?

LordNorbury · 08-01-2015 1:40pm

Graham wrote: »

Are you testing from localhost or an external server? Any chance something is being cached somewhere else (corporate proxy or CDN)?

Just localhost, I'll try another browser maybe, although I have an iphone emulator app on my desktop and I closed that and relaunched it again and I'm still looking at this faulty looking Radio button?!?

LordNorbury · 08-01-2015 1:44pm

Graham wrote: »

Are you testing from localhost or an external server? Any chance something is being cached somewhere else (corporate proxy or CDN)?

AM I right though do you think in my logic here, that where the themeroller files have been recreated from new and properly put into my solution, that I should not be having this issue?

Graham · 08-01-2015 2:11pm

LordNorbury wrote: »

AM I right though do you think in my logic here, that where the themeroller files have been recreated from new and properly put into my solution, that I should not be having this issue?

That sounds logical yes, but without knowing what else has changed outside of themeroller it's impossible to say.

LordNorbury · 08-01-2015 2:21pm

Graham wrote: »

That sounds logical yes, but without knowing what else has changed outside of themeroller it's impossible to say.

But my code in my view is really basic, there is no CSS in there, just:

            <input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" />
            <label for="radio-choice-a1">On</label>
            <input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off"  />
            <label for="radio-choice-b1">Off</label>

I have the code below at the top of my layout template file in my Shared folder, I even changed the colour of the new theme to be sure I was looking at my new recreated theme, and I'm still looking at this stupid looking Radio button:

    <link rel="stylesheet" href="~/Content/themes/Hello.min.css" />
    <link rel="stylesheet" href="~/Content/themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Synode · 08-01-2015 3:08pm

Have you tried it in another browser. Or from a different computer?

LordNorbury · 08-01-2015 3:28pm

Synode wrote: »

Have you tried it in another browser. Or from a different computer?

Yup, same issues, I've even reinstalled jquery.mobile via nuget and still have this issue. Cannot for the life of me understand how I have lost 2 days to this, even after deleting everything and reinstalling a new jquery theme...

Synode · 08-01-2015 4:26pm

You'll have to post more code

Aswerty · 08-01-2015 4:34pm

Have you checked to see if the new jquery theme is set to always copy over to the output directory (think you do this by right clicking file and selecting properties)? If so following the build verify in the packaged application (on the file system) that the correct CSS file is in there.

Also have you tried making changes other than CSS ones (e.g. adding in <p>testing!</p>) just to verify that when you are running locally the development server is actually serving an up to date build of your application.

LordNorbury · 08-01-2015 5:00pm

Aswerty wrote: »

Have you checked to see if the new jquery theme is set to always copy over to the output directory (think you do this by right clicking file and selecting properties)? If so following the build verify in the packaged application (on the file system) that the correct CSS file is in there.

Also have you tried making changes other than CSS ones (e.g. adding in <p>testing!</p>) just to verify that when you are running locally the development server is actually serving an up to date build of your application.

They were set to not to copy but I've set them to always copy but same milarkey! I'm thinking of creating a whole new solution and adding in the jquery stuff and copying over my views and controllers, model code, etc...

LordNorbury · 08-01-2015 7:19pm

This is WRECKING MY HEAD!!! I've uninstalled jquery.mobile via nuget, reinstalled a fresh version, have deleted my themeroller file and the 2 files that came with it when I downloaded a brand new theme from the themeroller website, I've turned everything off and on again, could anyone give me an idea how it can be possible that I still have this problem after all that I've done?!?

I don't want to lose another day tomorrow on the front end of this, I have everything the way I want it except for this bastárding radio button, every time I look at it now I want to kick the screen!

All assistance hugely appreciated! :mad::mad::mad:

LordNorbury · 08-01-2015 7:25pm

One thing I've worked out is that this isn't a browser prob, I've downloaded the zip file from themeroller and opened the index.html page that comes in the folder, the radio button in that download is horizontal by default, I've edited it to be a vertical one and refreshed it and it is working perfectly in my browser now...

So the problem is somewhere in my development environment but as far as I can see, I have changed everything. The theme above, is the same theme in my solution, but in my solution the radio button is not looking the way it should be...

Synode · 08-01-2015 9:10pm

Have you set up any custom CSS that's overriding the container the radio button is in? I understand your frustration. I've lost days for similar stuff. Very annoying

D Hayes · 09-01-2015 9:01am

Try removing each of the three stylesheets referenced. At least narrow it down to a particular stylesheet.

LordNorbury · 09-01-2015 12:13pm

D Hayes wrote: »

Try removing each of the three stylesheets referenced. At least narrow it down to a particular stylesheet.

I've tried this but when I delete any one of the CSS files, I lose all theming so it isn't really letting me narrow down the problem here. Cannot get my head around this, feel like I've broken the web! :mad::mad::mad:

LordNorbury · 09-01-2015 12:33pm

Could someone post up a clean copy of jquery.mobile-1.4.5.css?

LordNorbury · 09-01-2015 1:41pm

Ok here is my code, this is a new test view I have created called 'themeroller'...

Layout template file (_Layout.Themeroller.cshtml):

[HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

@Styles.Render("~/Content/mobileCss", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")

<link rel="stylesheet" href="~/Content/themes/Hello.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<link href="~/Content/mobile/css/style.css"rel="stylesheet" type="text/css" />

</head>
<body>

<div data-role="page" data-theme="a" style="background-color:#fff;">

<div class="logo">@Html.ActionLink(
" ",
"Index",
"Home",
null,
new {
style = "background: url('" + Url.Content("~/Content/mobile/images/logo.png") + "') no-repeat center; margin-left:auto; margin-right:auto; display:block; height:90px; width:300px;"
}
)
</div>

<div data-role="content" style="background-color:#fff;">
@RenderBody()
</div>
</div>

@RenderSection("scripts", required: false)

</body>
</html>

[/HTML]

My Themeroller View below (Themeroler.cshtml):

[HTML]
@model Mobile.Models.Part

@{
ViewBag.Title = "Part Number";
Layout = "~/Views/Shared/_Layout.MobileThemeroller.cshtml";
}

@using (Html.BeginForm())

{
<b>User:</b> <strong>@User.Identity.Name</strong> <a href="@Url.Action("LogOff", "Home")">Logout</a>

<div class="PartNumBoxBackground">
<div class="TextboxPosition">@Html.TextBox(("_VehicleID"), null, new { @class = "MyTextbox", @maxlength = "12", placeholder="ENTER PART NUM" })</div>
<div class="ImagePosition"><img src= "@Url.Content("~/Content/Mobile/Images/PartNumBox.png")" alt="IMAGES" /></div>
</div>

<fieldset data-role="controlgroup">
<legend></legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Product X</label>

<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Product Y</label>

</fieldset>

<fieldset data-role="controlgroup">
<legend></legend>

<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom">
<label for="checkbox-1a">Product Option 1</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom">
<label for="checkbox-2a">Product Option 2</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom">
<label for="checkbox-3a">Product Option 3</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom">
<label for="checkbox-4a">Product Option 4</label>
<input type="checkbox" name="checkbox-5a" id="checkbox-5a" class="custom">
<label for="checkbox-5a">Product Option 5</label>
<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom">
<label for="checkbox-6a">Product Option 6</label>
<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom">

</fieldset>

}

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

[/HTML]

I've gone onto http://blog.jquerymobile.com/2014/10/31/jquery-mobile-1-4-5-released/

And copied and pasted what must be clean code, into each respective file in my solution:

jquery.mobile-1.4.5.cs

jquery.mobile-1.4.5.min.cs

jquery.mobile-1.4.5.js

jquery.mobile-1.4.5.min.js

I've saved the solution and closed it and opened it again and I still have this issue.

Am hoping someone on the forum might have an idea here that will save me from having to rebuild a whole new solution and copy everything over as I hate having to get around problems in this manner because it obviously means I don't understand what the root problem was...

LordNorbury · 09-01-2015 4:27pm

Well I've built a new MVC solution from scratch and hey presto, I have exorcized the demon! My radio button is now working perfectly. It is BUGGING the absolute shít out of me though that this is how I have had to resolve this issue...

It will be a LONG time before I go near 'Inspect Element' again!

Graham · 09-01-2015 4:30pm

LordNorbury wrote: »

Well I've built a new MVC solution from scratch and hey presto, I have exorcized the demon! My radio button is now working perfectly. It is BUGGING the absolute shít out of me though that this is how I have had to resolve this issue...

It will be a LONG time before I go near 'Inspect Element' again!

At least you got it sorted.

I didn't want to mention it while you were in the middle of sorting things out but now would be a good time to look at version control software.

LordNorbury · 09-01-2015 4:33pm

Graham wrote: »

At least you got it sorted.

I didn't want to mention it while you were in the middle of sorting things out but now would be a good time to look at version control software.

That was going through my head, I used Nuget to install query.mobile, (ran install-package query.mobile at the prompt) then I wondered should I have been installing query.mobile.mvc, I've been pulling my hair out with this all week and now that I have my radio button working properly my bootstrap responses are not working properly so now I have to go back and sort all that out...

LordNorbury · 11-01-2015 7:41pm

It turns out that this problem was/is caused by the following 2 lines of bootstrap code in my Layout page:

[HTML]<link rel="stylesheet" href="@Url.Content("~/Content/bootstrap.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/bootstrap-responsive.min.css")">[/HTML]When I take these 2 lines of code out of my Layout page, the problem goes away, and when I put them in again, the problem reappears again!

Which leads me onto my next question...

I have 2 layout files in my solution, one for the main page/view (index.cshtml), lets call this _LayoutMain which DOES require bootstrap as this page is made up mainly of image links that allow the user to navigate and I want this view to be 2 columns on a smartphone and 4 on a desktop or tablet, and I have achieved this using Bootstrap.

However my other views allow the user to order goods via a page that has radio buttons and checkboxes that is themed using juery mobile, these pages/views DO NOT require Bootstrap code, and I have a Layout file for these pages, lets call that _LayoutThemed

Due to these 2 lines of code above that I have mentioned, causing me a serious problem with my jquery theming for my radio controls, (in addition to completely messing up the radio button it also adds in a 2 UNWANTED grey horizontal lines in between my checkbox options) I have removed these 2 lines from my _LayoutThemed file above.

You would think that this would be the end of the matter, but what is happening is now is that when you navigate from the index page (that uses the _LayoutMain file), to the order page that uses the _LayoutThemed file, the order page acts like it is still uses the old layout file, and I have to refresh the page manually to get rid of the defective radio button and the unwanted 2 grey horizontal lines that the 2 lines of Bootstrap code and causing on my page, which are only in the _LayoutMain file, they are not in the _LayoutThemed file.

Is there any way on earth it might be possible to force a view to not use any Bootstrap code when it is rendered, or to force a view to just run the code that is in the exactly specified layout file and no other code that might be running in memory?

EDIT: Also when I refresh my order view (that is using _LayoutThemed), that doesn't have the bootstrap code and navigate via a link, back to my index page, then my Bootstrap functionality won't work until I manually refresh the page! I thought things like jquery mobile and bootstrap were meant to let you get on with developing solutions without having to spend loads of time writing CSS code for your front end, etc?!?!?

LordNorbury · 12-01-2015 2:20pm

Hoping someone might be able to help me with this, this is my _Layout file code, I'm wondering is there some particular order that I need to call these files in or am I making some fundamental mistake regarding how I am trying to use jquery mobile and Bootstrap on my page? My problem is that I have to refresh the page to get rid of my dodgy radio control, once I refresh the page it works exactly as I want it to look.

My _LayoutIndex file (for my main menu pages where I need Bootstrap to handle my image links to allow the user to navigate:
[HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

@Styles.Render("~/Content/mobileCss", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")

<link rel="stylesheet" href="~/Content/themes/Hello.css" />
<link rel="stylesheet" href="~/Content/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<link href="~/Content/mobile/css/style.css"rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="@Url.Content("~/Content/bootstrap.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/bootstrap-responsive.min.css")">

</head>
<body>

<div data-role="page" data-theme="a" style="background-color:#000;">

<div class="logo">@Html.ActionLink(
" ",
"Index",
"Home",
null,
new {
style = "background: url('" + Url.Content("~/Content/mobile/images/logo.png") + "') no-repeat center; margin-left:auto; margin-right:auto; display:block; height:90px; width:300px;"
}

)
</div>

<div data-role="content" style="background-color:#000;">
@RenderBody()
</div>
</div>

@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
@RenderSection("scripts", required: false)

</body>
</html>

[/HTML]

My _LayoutMobileThemed file (this is for pages that have jquery mobile controls which are Radio buttons & checkboxes for ordering goods:

[HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

@Styles.Render("~/Content/mobileCss", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link href="~/Content/mobile/css/style.css"rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="~/Content/themes/Hello.css" />
<link rel="stylesheet" href="~/Content/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />

</head>
<body>

<div data-role="page" data-theme="a" style="background-color:#fff;">

<div class="logo">@Html.ActionLink(
" ",
"Index",
"Home",
null,
new {
style = "background: url('" + Url.Content("~/Content/mobile/images/logo.png") + "') no-repeat center; margin-left:auto; margin-right:auto; display:block; height:90px; width:300px;"
}
)
</div>

<div data-role="content" style="background-color:#fff;">
@RenderBody()
</div>
</div>

@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
@RenderSection("scripts", required: false)

</body>
</html>

[/HTML]

My Themed view:

[HTML]
@{
ViewBag.Title = "ProductGroup1";
Layout = "~/Views/Shared/_Layout.MobileThemeroller.cshtml";
}

@using (Html.BeginForm())

{
<b>User:</b> <strong>@User.Identity.Name</strong> <a href="@Url.Action("LogOff", "Home")">Logout</a>

<fieldset data-role="controlgroup">
<legend></legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Product1</label>

<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Product2</label>

</fieldset>

<fieldset data-role="controlgroup">
<legend></legend>

<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom">
<label for="checkbox-1a">Product3</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom">
<label for="checkbox-2a">Product4</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom">
<label for="checkbox-3a">Product5</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom">
<label for="checkbox-4a">Product6</label>
<input type="checkbox" name="checkbox-5a" id="checkbox-5a" class="custom">
<label for="checkbox-5a">Product7</label>
<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom">
<label for="checkbox-6a">Product8</label>
<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom">
<label for="checkbox-7a">Product9</label>
<input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom">
<label for="checkbox-8a">Product10</label>
<input type="checkbox" name="chekbox-9a" id="checkbox-9a" class="custom">
<label for="checkbox-9a">Product11</label>
<input type="checkbox" name="checkbox-10a" id="checkbox-10a" class="custom">
<label for="checkbox-10a">Product12</label>

</fieldset>

}

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

[/HTML]

Graham · 12-01-2015 3:15pm

Out of curiosity, what happens if you move the query script load to the <head> underneath the css?

LordNorbury · 12-01-2015 3:33pm

Graham wrote: »

Out of curiosity, what happens if you move the query script load to the <head> underneath the css?

this code you mean?

@section Scripts { @Scripts.Render("~/bundles/jqueryval") }

Graham · 12-01-2015 3:39pm

LordNorbury wrote: »

this code you mean?

@section Scripts { @Scripts.Render("~/bundles/jqueryval") }

Can't speak to the specifics of your framework. I'm curious to see if jquery is being loaded after it's needed though.

LordNorbury · 12-01-2015 3:46pm

Graham wrote: »

Can't speak to the specifics of your framework. I'm curious to see if jquery is being loaded after it's needed though.

I tried that, same thing is happening, the radio box doesn't render as it should and then when I refresh the view it is perfect. :mad:

The problem is these 2 lines of code, if I put these 2 lines into my themed Layout file, when I refresh the view, the radio controls DO NOT sort themselves out, I thought all along that this was a jquery mobile issue, it was actually an issue with how Bootstrap is interacting with my code:

        <link rel="stylesheet" href="@Url.Content("~/Content/bootstrap.min.css")">
        <link rel="stylesheet" href="@Url.Content("~/Content/bootstrap-responsive.min.css")">

The problem I'm having is that I need this Bootstrap code to be there for my index/menu page. It is navigating from that index page to a page with my jquery mobile theme, that is causing the radio buttons to be messed up as per my OP, when it first renders. When I refresh it the radio buttons render perfectly on the refresh but obviously this fix is no use to me (refreshing the page every time to clear the problem), can't be refreshing pages to get the result I want...

Synode · 12-01-2015 4:25pm

As far as I know, there's no such thing as Bootstrap responsive from Bootstrap 3. It's all responsive. Are those two files clashing? Try deleting the responsive one

LordNorbury · 12-01-2015 4:46pm

Synode wrote: »

As far as I know, there's no such thing as Bootstrap responsive from Bootstrap 3. It's all responsive. Are those two files clashing? Try deleting the responsive one

Tried that but no luck, feel like giving up with this, 1 week trying to sort this out.

Aswerty · 12-01-2015 7:15pm

Have you tried moving the Bootstrap reference above the jQuery one in the Layout. If there is a CSS collision then whichever one is referenced last will "win" the collision (due to being the last rule applied).

Also you could try using a hosted version of the bootstrap files to be sure there is nothing funky going on on your end. Taken from: http://getbootstrap.com/getting-started/#download:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Honestly though, we're kinda shooting in the dark because issues like this can be really difficult to solve remotely because the problem can occur between browser rendering the source files.

LordNorbury · 12-01-2015 7:30pm

Aswerty wrote: »

Have you tried moving the Bootstrap reference above the jQuery one in the Layout. If there is a CSS collision then whichever one is referenced last will "win" the collision (due to being the last rule applied).

Also you could try using a hosted version of the bootstrap files to be sure there is nothing funky going on on your end. Taken from: http://getbootstrap.com/getting-started/#download:

Honestly though, we're kinda shooting in the dark because issues like this can be really difficult to solve remotely because the problem can occur between browser rendering the source files.

I've just tried this, my BundleConfig.cs file originally had Bootstrap included at the very end of the file, like this, I've moved it up to the top of the file so it gets called up first, hoping that that just might resolve the matter with a bit of luck:

[HTML]
using System.Web;
using System.Web.Optimization;

namespace TestProject
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.*"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui*"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));

bundles.Add(new ScriptBundle("~/bundles/jquerymobile").Include("~/Scripts/jquery.mobile*"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

bundles.Add(new StyleBundle("~/Content/mobilecss").Include("~/Content/jquery.mobile*"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-theme.css",
"~/Content/site.css",
"~/Content/bootstrap-responsive.css"));
}
}
}
[/HTML]

I rejigged that to see if I loaded that (Bootstrap) first, that maybe the jquery mobile files loading after that would sort themselves out, which they do, the only issue is that now by Bootstrap won't work, (it has sorted out my dodgy radio button though!

I've resolved the issue with the unwanted grey horizontal line, the problem there was this piece of code in my Bootstrap.css file, my setting the font size and height to 0px I have gotten rid of that problem:

[HTML]
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
height:0px;
margin-bottom: 0px;
font-size: 0px;
line-height:none;
color: #333;
border: 0;
border-bottom: 0px solid #e5e5e5;
}
[/HTML]

I'm going to try rejig the inclusions in my BundleConfig.cs file to see if some rearrangement of those additions might just give me a break here. Failing that, I'll go through every fúcking line of the 6334 lines of css code in my Bootstrap.css file and delete every setting that mentions "radio" in that file, as I'm not using Bootstrap to theme by radio or checkbox controls, just need it for my page layout, jquery mobile is doing the radio control theming (or so I thought!!!)... :mad::mad::mad::mad:

LordNorbury · 12-01-2015 8:40pm

Right, I've been fiddling around with this tonight and here is the latest scenario I'm dealing with. This scenario resolves my radio button issue, (my main headache), but leaves me without Bootstrap which is handling my main menu, depending on the type of device that the user is browsing on...

When I use the following code in my BundleConfig.cs file, I have Bootstrap functionality, but my themed (jquery mobile themed), radio button is messed up as per my OP, and doesn't look anything like what a jquery mobile themed radio button should look like (NOTE THE ONE LINE OF CODE THAT I HAVE COMMENTED OUT OF THE SOLUTION:

[HTML]
using System.Web;
using System.Web.Optimization;

namespace TestProject
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-theme.css"));

//bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.*"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui*"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));

bundles.Add(new ScriptBundle("~/bundles/jquerymobile").Include("~/Scripts/jquery.mobile*"));

bundles.Add(new StyleBundle("~/Content/mobilecss").Include("~/Content/jquery.mobile*"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));

}
}
}
[/HTML]

Now, when I UNCOMMENT out this single line of code below, from my code block above and run the solution with this line of code included in the solution (line below that I've made bold which is now uncommented code), I lose my Bootstrap functionality but my themed radio button is exactly as it is meant to be and isn't messed up as per my OP:

[HTML]
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
[/HTML]

So I hear you say, let's have a look inside this /~Content/site.css file and see what is going on in there:

[HTML]
/* Styles for validation helpers

*/
.field-validation-error {
color: #f00;
display: block;
margin-top: 8px;
text-align: center;
}

.field-validation-valid {
display: none;
}

.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}

.validation-summary-errors {
font-weight: bold;
color: #f00;
}

.validation-summary-valid {
display: none;
}

/* jQuery mobile styles

*/

/* Make listview buttons fill the whole horizontal width of the screen */
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
padding-right: 15px;
}

.ui-bar-a, .ui-body-a, .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a,
.ui-bar-b, .ui-body-b, .ui-btn-up-b, .ui-btn-hover-b, .ui-btn-down-b,

.ui-bar-d, .ui-body-d, .ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d,
.ui-bar-e, .ui-body-e, .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e,
.ui-btn-active

{
text-shadow: none;
background: grey !important;
border-width:0px;
font-family:Verdana;
color:#ccc;

}

.ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button{
background: white !important;
color:slategray;
font-family:Verdana;
font-weight:bolder;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}

.BodyPosition {

top:100px;
}
[/HTML]

I've tried everything from deleting all the code from site.css, but no luck... But I do feel like I'm narrowing down the problem...

LordNorbury · 12-01-2015 8:54pm

Just to add some more into to this:

I've done a "View Source" under each scenario above, (one line commented out and then uncommented out of the BundleConfig.cs file), and this is what is going on:

When I UNCOMMENT, or include the line of code that includes the ~/Content/site.css file, (when my Bootstrap functionality will not work), as can be seen from the image attached, the Bootstrap files are not loading, but my radio button does work properly...

When I comment out this line of code from the BundleConfig.cs file, my Bootstrap works (you can see the files are being called up), but my radio button is basically not looking like a radio button:

Aswerty · 13-01-2015 8:37am

http://stackoverflow.com/questions/12450645/jquery-mobile-js-include-is-overwriting-bootstrap-css-how-do-i-fix seems to indicate that a CSS collision is taking place since this has happened to somebody else. You could try just using the bits of bootstrap that you need, see http://getbootstrap.com/customize/. In the custom version just take the minimum functionality you need.

LordNorbury · 13-01-2015 9:38am

Aswerty wrote: »

http://stackoverflow.com/questions/12450645/jquery-mobile-js-include-is-overwriting-bootstrap-css-how-do-i-fix seems to indicate that a CSS collision is taking place since this has happened to somebody else. You could try just using the bits of bootstrap that you need, see http://getbootstrap.com/customize/. In the custom version just take the minimum functionality you need.

I'll give this a shot, couldn't find anything on Google in terms of someone running into this before, which kinda mystified me as I'm surely not the first person to use Bootstrap and jquery mobile in the same layout file and run into this issue?!?

Aswerty · 13-01-2015 9:54am

LordNorbury wrote: »

I'll give this a shot, couldn't find anything on Google in terms of someone running into this before, which kinda mystified me as I'm surely not the first person to use Bootstrap and jquery mobile in the same layout file and run into this issue?!?

Yeah, I would agree, there is surprisingly little information if it is indeed a conflict between these two popular libraries.

LordNorbury · 13-01-2015 10:04am

Just out of curiousity, I'm new to jJquery mobile and Bootstrap, what is the difference between bootstrap.css and bootstrap.min.css and why do they recommend that bootstrap.min.css is used in production, or what they call the "minified" version?

Graham · 13-01-2015 10:25am

LordNorbury wrote: »

Just out of curiousity, I'm new to jJquery mobile and Bootstrap, what is the difference between bootstrap.css and bootstrap.min.css and why do they recommend that bootstrap.min.css is used in production, or what they call the "minified" version?

It's basically a smaller version of the css file.

Minification can drastically reduce the byte count in common CSS by stripping all comments and most whitespace.

LordNorbury · 13-01-2015 10:52am

Have customised down my Bootstrap so that it only has around 1K lines of code now in the bootstrap.css file whereas last night before customising, it had over 6K lines of code, closed solution, and reopened it and tested.

I still have the same problem though, radio buttons still messed up, if Bootstrap is running, it is messing up my radio button... :mad::mad::mad::mad::mad::mad::mad:

LordNorbury · 13-01-2015 11:02am

I'm gonna have to abandon this approach I've been using as it is obviously seriously defective, trying to mash Bootstrap with jquery mobile, I can't lose another week to this bug.

I'm wondering is it possible to get the same responsive type solution using jquery mobile, and just forget about Bootstrap? I have it set up (with Bootstrap), so that my menu is rendered using 2 columns for a smartphone and 4 columns for a desktop, etc... At least I wouldn't have files messing each other up if I was just using jquery mobile on its own, or that is my logic on it anyway.

Graham · 13-01-2015 11:41am

LordNorbury wrote: »

I'm wondering is it possible to get the same responsive type solution using jquery mobile

http://demos.jquerymobile.com/1.3.0-beta.1/docs/content/content-grids-responsive.html

LordNorbury · 13-01-2015 12:20pm

Graham wrote: »

http://demos.jquerymobile.com/1.3.0-beta.1/docs/content/content-grids-responsive.html

I had this working perfectly when using Bootstrap, it set up 2 columns on a smartphone and 3 or 4 on a desktop or tablet, but this jquery responsive seems to be a more convoluted way of doing it?

Is there an easy way to get this Bootstrap responsive functionality replicated do ye think? Sorry for appearing lazy but am at the end of my tether with this issue!

[HTML]
<div class="row">

<div class="col-xs-6 col-sm-3">
<div class="menu">
<a href="@Url.Action("View1", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img1.jpg")" /></a>
Page 1
</div>
</div>

<div class="col-xs-6 col-sm-3">
<div class ="menu">
<a href="@Url.Action("View2", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img2.jpg")" /></a>
page2
</div>
</div>

<div class="col-xs-6 col-sm-3">
<div class="menu">
<a href="@Url.Action("View3", "Account")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img3.jpg")" /></a>
Page3
</div>
</div>

<div class="col-xs-6 col-sm-3">
<div class ="menu">
<a href="@Url.Action("View4", "Account")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img4.jpg")" /></a>
page 4
</div>
</div>

<div class="col-xs-6 col-sm-3">
<div class="menu">
<a href="@Url.Action("View5", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img5.jpg")" /></a>
Page 5
</div>
</div>

<div class="col-xs-6 col-sm-3">
<div class ="menu">
<a href="@Url.Action("View6", "Account")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img6.jpg")" /></a>
page 6
</div>
</div>

<div class="col-xs-6 col-sm-3">
<div class="menu">
<a href="@Url.Action("View7", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img7.jpg")" /></a>
Page 7
</div>
</div>

<div class="col-xs-6 col-sm-3">
<div class ="menu">
<a href="@Url.Action("View8", "Home")" data-transition="flip"><img src="@Url.Content("~/Content/mobile/images/img8.jpg")" /></a>
Page 8
</div>
</div>

</div>
[/HTML]

I'm hoping there might be an equally simple solution to do this using jquery mobile that someone might be able to give me, to help me find my way out of this cul de sac of shít that I've managed to find myself in...

Aswerty · 13-01-2015 12:58pm

LordNorbury wrote: »

I'm hoping there might be an equally simple solution to do this using jquery mobile that someone might be able to give me, to help me find my way out of this cul de sac of shít that I've managed to find myself in...

Not to be unconstructive but this is the sort of thing that happens when you use frameworks for technologies you don't fully understand. I think someone who has been doing CSS work for a few months would be able to identify the root cause through analysing what CSS rules are being applied to the problematic HTML elements.

LordNorbury · 13-01-2015 1:28pm

Aswerty wrote: »

Not to be unconstructive but this is the sort of thing that happens when you use frameworks for technologies you don't fully understand. I think someone who has been doing CSS work for a few months would be able to identify the root cause through analysing what CSS rules are being applied to the problematic HTML elements.

I hear ya fully, but at the same time, I have to say, I am where I am with it. I previously developed a business desktop website for my business and knew enough CSS to get that done successfully, I developed that in .NET Webforms, so theming the site with a single CSS file wasn't a difficult thing to do, but that was 5 years ago.

Fast forward 5 years and now everything is mobile, working off different types and sizes of devices and the expectation is that a website will now render suitably, regardless of what device is being used to access it, and a single short CSS file with a few settings in it that manages the theming across the whole site on the basis that it only has to render on a desktop, just doesn't cut the mustard anymore.

This recently forced me to get working on a mobile website, then I discovered that with responsive functionality in my solution, I can develop my mobile website to also be a desktop site, or a tablet site, etc.

Bad enough that I decided to upskill from Webforms to MVC, as if that transition isn't difficult enough for someone who relied a lot on things like event handlers and SQL connection strings, and a single CSS file, etc, there is very little I've found with having previously used Webforms, that can be carried over to MVC, it is a completely different beast and the learning curve I've found, is actually very steep and is very frustrating at times until I achieve some sort of critical mass of capability and confidence with coding like this in MVC and the stuff that runs with it like jquery mobile and Bootstrap.

Obviously when you decide to develop a mobile website, you start getting exposed to stuff like jquery mobile/theming and Bootstrap, which you may not have seen as someone who previously developed a desktop solution for yourself using Webforms, and I think I've been unlucky in that whatever way I've deployed these two packages, Bootstrap and jquery mobile, in relation to the current project, they have clashed with each other no matter what way I have tried to legislate for getting it to work.

I'm not a full time developer, I've my own biz and have successfully developed a desktop solution for my business before, and it still works grand, we use it to manage all transactions going through the business, but developing a mobile website while taking up MVC and all the stuff that sits around MVC, like jquery mobile and bootstrap, has been no small challenge!

But I have to admit I have been given huge assistance and help from folks on the forum for which I am extremely extremely grateful.

Accidental CSS prob with JqueryMobile Themeroller radio button...

Comments