CODEWITHSUNDEEP
javascriptjquerycssjquery-mobile
sbaltes
sbaltes

Reputation: 479

Force jQuery mobile to use own CSS classes

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 ;-)

Upvotes: 1

Views: 651

Answers (1)

sbaltes
sbaltes

Reputation: 479

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; }

Upvotes: 1

Related Questions