Accidental CSS prob with JqueryMobile Themeroller radio button...

LordNorbury

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

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

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

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

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

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

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

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

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

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

LordNorbury

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

You'll have to post more code

Aswerty

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

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

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

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

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

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

LordNorbury

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

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

LordNorbury

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&gt;
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script&gt;

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

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

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

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

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

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

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

LordNorbury

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

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

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

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