jQuery Forum

As I know jQuery mobile is planning to release ThemeRoller in January. Today i am using only 5 default styles (a-b-c-d-e)

Yes but presumably the ThemeRoller will just change the colours/textures etc and not let you change the actual dimensions of the various elements... just like the current jQuery UI ThemeRoller does.

I would recommend checking out the two themes that can be dynamically switched using the documentation/demo's theme switcher.  I have attached the two themes that can be selected right now using the theme switcher.  Hope it helps people from having to download all the files themselves.

I am also overriding the jQM selector rules (.ui-btn, .ui-li, etc) in CSS to get the desired formatting / spacing results. I haven't found a better way of doing it yet, but I'd be interested to hear of other approaches.

Could any of you post an example of the override CSS? Thanks!

For example, I find the default right padding of 75px for interactive list elements to be too chunky for small clients (240x320px). I know this padding is set to make room for the button icon, but it just doesn't make sense for really small browsers. I set the padding to 40px instead, which is just barely enough room to display the icon. I do this for all jQM interactive list item elements with this rule:

Hi,

@sam_placette :
Can you tell us how do you overwrite the default theme CSS rules ?
If I configure them after the theme declaration like so :

1.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.css" />
2.   <link rel="stylesheet" href="style.css" />

There are no effect, probably because the JQM framework addClass later my declaration.
Then, do you use any event or something else ?

Than ks for your replay.

@erixtekila:

@sam_placette :
Ah yes, you're right. My Bad ! I had a typo…

I've also found many of the paddings are too much. But for the life of me, I can't find where the extra padding on the ui-btn class is. The buttons in particular that I'm intereested in are the horizontal controlgroup radio buttons. I understand that the classes are applied to the labels. When I check the className for the labels, they are "ui-btn ui-corner-left ui-btn-down-b". In the css, ui-btn has a padding of 0. I've even searched the entire css file to find other ui-btn associated with different elements and there are no other paddings that affects the radio button labels. There are way too much padding on these. I'm assuming that they need to be able to cover the radio buttons, but I'd rather have the label float over the radio buttons even if the text of the label will go over the radio buttons themselves. I've managed to get a little bit of room by setting the left and right margins to 0. But since ui-btn only has a right margin of 5px, it didn't get much. Does anyone have any idea what I need to do here to get rid of all that padding? Thx

Since jQuery Mobile applies its classes just before the pageshow event, which always overrides stylesheets specified in the header, the obvious solution would be to whack jQM over the head with its own weapons.

Couldn't you just use this to insert your own css file at that time? that would ease my concern about performance.  Or would this cause a flicker since the page has already shown.

There is absolutely no reason to alter CSS dynamically like this.

Just load your own CSS file after the JQM CSS. Your rules will override JQM CSS rules.

Freshbase has a point, sometimes it seems really really hard to get an override working.

The problem is usually insufficient specificity in your rule. You need to examine the DOM with a web debugger to understand the CSS.

It's not really just a JQM problem. CSS cascade rules are very complex. You need to understand when specificity trumps other rules.

Unfortunately, CSS documentation has still not been forthcoming.

Here's a thought: if you are struggling to override the CSS for some jQuery Mobile widget, maybe you should consider whether you should be using the widget at all.

I am beginning to think - at least for mobile development - that the JQM widgets are nice for initial demo. They can stand-in during early development. They are easy to implement, but slow and hard to customize. When you have your functionality down, and a better idea of exactly what appearance you want, just write your own custom CSS on plain <divs> with no jQuery Mobile enhancement.

For example, I think that any native app using JQM probably shouldn't be using listviews. Not in production. Just make your own list. You can use <ul> and <li> or you can just use <div>s. Add your own CSS to format it the way you want. Add fast clicks using delegation from a script loaded from a common <head>. Add whatever hover/selected effect you might like when people click on items.

You will be amazed at how fast a list can be. Just don't use a listview.

P.S. If the only thing in a content block is a list, then omit the data-role="content" as well. Then, you won't have to fight with the default CSS for content.

@watusiware: I was leaning in this direction, too, but I was hoping I was missing something and some jQm masters would step in or I would find some book that explained how to do it the "Right Way". To me, the fact that I have to bypass jQm to build my page the right way, is a clear sign that the fundamental design of jQm is off. Shouldn't they make it easier to design web pages? I mean, isn't that the fundamental reason for creating a framework in the first place? 

Last two posts in this thread have been very enlightening --- reassuring me that I am not alone in my concerns about use of JQuery Mobile.

When a framework gets in the way of of its own use, and/or when a framework becomes too difficult to use and extend in simple and ordinary ways, such that the advice becomes "do not use it" and/or use "an ordinary div that is not marked up by jQM", then I must agree that there have been fundamental design flaws in the development of jQM.

I would definitely encourage the jQM development/design team members to find ways to salvage flexible modular extensible use of their widgets by incorporating better switches into each widget that can be used to turn on and off the features of each widget including both behavior and style.  Then maybe we could make better use of the jQM widgets by turning on/off behavior or style features we wanted and/or extending the behavior or style features we wanted.....  rather than fighting with them or avoiding use of them.
 

Hi,

I have a requirement to remove the default padding of 15px from the .ui-content of the jquery mobile.css in only one specific page. So I am trying to implement it in my css file for a map page.

#map_content {
padding: 0px;
width: 100%;
height: 100%;
border:none;
overflow: hidden;}

#map_canvas {
width: 100%;
height: 100%;
padding: 0px;
border:none;
text-shadow: none;}

Where as after trying this I am getting a padding as default.
Could any one please help me with this problem. I am not much sure on what I can do.

May be dynamically set the padding. Please help.

Thank you

You have insufficient specificity. Just a basic CSS issue.

Use .ui-content#map_content, etc. (You may have to be more specific yet, you will have to look at the specific rule used in the JQM CSS file.)

Easier yet, you aren't required to have a content div. Just leave it out.

It's best to avoid using IDs in JQM, though. Use classes instead.

I did try to change as below

.ui-content#map_canvas {
margin: 0px 0px 0px 0px;
width: 100%;
height: 100%;
padding: 0px 0px 0px 0px;
border:none;
border-width:0px;
overflow: hidden;
}

and the div is
<div data-role="content" id="map_canvas" data-theme="a"></div>

now the output is shown as attached image.
The map is alined to right side of the window but I am still getting a padding on all 3 sides.

Any idea on the possible cause.

Thank you

You need to learn to use Web Inspector, Firebug, etc. to examine the CSS. You will be able to see the computed style, as well as the rules that were used to apply those styles.

Again, I really don't recommend using IDs. Use classes. But I may have led you astray. If you do use IDs, pretty sure you have to specify the ID first, then the class: #map_canvas.ui-content

Hard to diagnose based on an image capture and just fragments of the code.