Force jQuery mobile to use own CSS classes

Question

I want to force jQuery mobile to use my own CSS classes to override default values. Changing the jQuery CSS classes (like ui-controlgroup) is not an option since I just want to change the style in some cases. When I put the content of my CSS class in the style attribute of the div, my style is applied, but I don't want to use this attribute.

I tried adding my classes when the "mobileinit" event is fired, but it didn't work either.

Here is an example, my class is called "footer-column-left":

    <div id="footerMainpage" data-role="footer" data-position="fixed" data-theme="a" class="ui-grid-b">
    <!-- column 1 -->
    <div class="ui-block-a" class="footer-column-left">
        <div data-role="controlgroup" data-type="horizontal">
            <button id="buttonLeft" data-icon="arrow-l" data-iconpos="notext">Move left</button>
        </div>
        <div data-role="controlgroup" data-type="horizontal">
            <button id="buttonChooseTool" data-icon="edit" data-iconpos="notext">Choose tool</button>
            <button id="buttonUndo" data-icon="back" data-iconpos="notext">Undo</button>
            <button id="buttonRedo" data-icon="forward" data-iconpos="notext">Redo</button>
            <button id="buttonSave" data-icon="check" data-iconpos="notext">Save</button>
        </div>
    </div>
    <!-- ... -->
</div>

The CSS looks like this:

.footer-column-left { display: inline-block !important; text-align:left !important; padding-left: 10px !important; }

Thanks in advance for your help!

Edit: Adding the classes when the "pageinit" event is fired worked for me, so no further help is needed ;-)

Add your own answer and close the question

JSantos
– JSantos

2013-02-01 14:33:37 +00:00
Commented Feb 1, 2013 at 14:33 — JSantos
– JSantos, Commented Feb 1, 2013 at 14:33
Are you taking specificity into account?

epascarello
– epascarello

2013-02-01 14:45:47 +00:00
Commented Feb 1, 2013 at 14:45 — epascarello
– epascarello, Commented Feb 1, 2013 at 14:45

sbaltes · Accepted Answer · 2013-02-02 16:28:22Z

1

These two things worked for me:

adding the css class when the "pageinit" event is fired using:

$('#footerColumnLeft').addClass('footer-column-left');
using the id in the CSS selector:

#footerColumnLeft { text-align:left; padding-left: 10px; }

answered Feb 2, 2013 at 16:28

sbaltes

4791 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Force jQuery mobile to use own CSS classes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related