CODEWITHSUNDEEP
javascriptcssjquery-mobile
user982124
user982124

Reputation: 4610

jQuery Mobile List Format with Links

I've created a simple jQuery Mobile page - have put the relevant sample here:

http://jsfiddle.net/EhyKa/

I don't want the li items that contain links, in this case the Phone H, Phone M and Phone W items to be formatted differently to the other items in the list. At the moment the text and the link are getting split onto separate lines and have different styles compared to the other items.

Can anyone point to what I need to change to make this consistent (CSS or JavaScript I presume?).

Many thanks, Steve

Upvotes: 0

Views: 652

Answers (2)

Jess
Jess

Reputation: 1

Another way remove the formatting is to wrap the phone number link in a div or span, that way the JQuery Mobile doesn't associate the link with the list item.

Upvotes: 0

Subhash k
Subhash k

Reputation: 391

Changing the styles should fix the problem. make the anchor to inline-block. and give the appropriate padding.

Below is the code, after modification.

<div data-role="page" id="details" data-add-back-btn="true"> 
    <div data-role="header">
    <a href="../page.php" data-icon="home" class="ui-btn-right">Home</a>
    <h1>Contact Details</h1>
    </div>
    <div  data-role="content">

    <ul data-role="listview" data-inset="true" data-dividertheme="b">
            <li>First Name: Tom</li>
            <li>Surname: Jones</li>
            <li data-icon="false" style="height:35px;padding-left:15px;font-size:14px">Phone H: <a href="tel:123 4567" style="display:inline-block;padding-left:0px">123 4567</a></li>
            <li data-icon="false" style="height:35px;padding-left:15px;font-size:14px">Phone W: <a href="tel:123 4567" style="display:inline-block;padding-left:0px">123 4567</a></li>
            <li data-icon="false" style="height:35px;padding-left:15px;font-size:14px">Phone M: <a href="tel:123 4567" style="display:inline-block;padding-left:0px">123 4567</a></li>
        </ul>

    </div>

</div>

</body>
</html>

Upvotes: 1

Related Questions