Accidental CSS prob with JqueryMobile Themeroller radio button...

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 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 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?!?

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...

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...

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

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 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...

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&quot; />
<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(&quot;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&quot; />


</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(&quot;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 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 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...