CODEWITHSUNDEEP
jquery-mobile
randydalton411
randydalton411

Reputation: 117

Jquery Mobile CSS problems

I am trying to get an anchor in jquery to line up horizontally right next to a checkbox in a list structure. I previously had the checkbox inside of the anchor object, and this produced the result I wanted but now I want the checkbox to have a separate functionality then the anchor element, thus I wish to separate them. The CSS I am using is as follows, and as you can see from Jsfidle, it looks horrible with the checkbox floating to the top right spot of the button. Answers on here have noted that using field contain or display:inline would fix the problem but I have been unable to get it to work.

<div data-role="main" class="ui-content">
            <h3>Some header</h3>
            <ul data-role="listview" id = "tasklistTasks">
                <li>
            <div data-role="fieldcontain" style=" display:inline" >
                <input type="checkbox">
                    <a href="#" class="ui-btn">Go here</a>
                    </div>
                    </li>

              <li>
            <div data-role="fieldcontain" style=" display:inline" >
                <input type="checkbox">
                    <a href="#" class="ui-btn">Go here</a>
                    </div>
                    </li>

    </ul>
        </div>

I am using Jquery 2.1 and Jquery mobile 1.4.2. Thanks for any help

Upvotes: 0

Views: 48

Answers (1)

AppleBud
AppleBud

Reputation: 1541

The reason for this behavior is that the checkbox is getting the CSS from the jquery mobile CSS you have applied. Inside that particular CSS, your checkbox class' CSS is getting overridden and it has :

 margin: -11px 0 0 0;

due to which it is coming to the top left corner of your parent div. If you are not using CDN of that CSS and you have that downloaded version, you can modify this with :

 .ui-checkbox input, .ui-radio input {
position: absolute;
left: .466em;
width: 22px;
height: 22px;
margin: 12px 0 0 0;
outline: 0!important;
z-index: 1;
display: inline-block;
}

You can also see yourself by debugging it in your browser.

Here is how it looks now and i guess this is what you wanted:

http://jsfiddle.net/appleBud/bWFYv/2/

Hope this helps.

Upvotes: 2

Related Questions