jQuery multiple buttons in header

Question

I'm trying to add 3 buttons to the header of a mobile web-app i am making with jQuery.

I am able to make 2 buttons but as soon as i put the 3rd on the header the first dissapears :/

i tried the answer in this question: Adding many buttons to header in JQuery Mobile

however for some reason jquery style's will not apply to div tags inside the header.

my header currently has this code:

<div data-role="header">
    <div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
        <a href="#" id="homebtn" data-roll="button" data-icon="home" data-iconpos="notext"></a>
        <a href="#" id="searchbtn" data-roll="button" data-icon="search" data-iconpos="notext" class="ui-btn-left"></a>
    </div>
        <h1 id="usr"></h1>
    <a href="#" id="profileButton" data-roll="button" data-icon="info">Profile</a>  

    </div>

and my webpage looks like this:

enter image description here

Does anybody have any ideas why this is happening?

please excuse any grammar/spelling mistakes: I am dyslexic and may have missed some in proof reading

It probably has to do with the ui-btn-left class. Try using Inspect Element in your browser to play with the CSS. — Ray Suelzer
– Ray Suelzer, Commented Oct 16, 2014 at 18:22
Did you really want to type 'data-roll="button"' (DATA-ROLL), not 'data-role="button"'? — TSV
– TSV, Commented Oct 16, 2014 at 18:29
umm, yes, yes i did..... i'll fix that now xD..... and i will try playing with the CSS — Jamie McAllister
– Jamie McAllister, Commented Oct 16, 2014 at 18:31

Jamie McAllister · Accepted Answer · 2014-10-18 12:27:52Z

-1

okay so thanks to @TSV who pointed out i was using "data-roll" not "data-role"

that actually fixed my problem completely :)

edited Oct 18, 2014 at 12:27

answered Oct 16, 2014 at 18:35

Jamie McAllister

7292 gold badges11 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

jQuery multiple buttons in header

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related