Accidental CSS prob with JqueryMobile Themeroller radio button...

LordNorbury

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

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:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"&gt;

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

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script&gt;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.