Link to home
Start Free TrialLog in
Avatar of danfiggolf
danfiggolf

asked on

Jquery Mobile Listview Padding

I'm trying to reduce the padding-right from 40px to 10px on my Restaurant ListView at http://test2.dfigdesign.com so the padding between the arrow and the restaurant names is reduced to allow visibility of Restaurant title.

.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow {
    padding-right: 10px;
}

Open in new window


How would I (and can I) include this in the HTML code below?
<div data-role="collapsible" data-mini="true" data-theme="b" data-content-theme="c" style="z-index: 999; position: absolute; right: 2px; margin : 8px 2px;">

    <h2>Restaurants</h2>

    <ul data-role="listview">

        <li><a href="index.html">Bennett Valley</a></li>

        <li><a href="index.html">Diablo Creek</a></li>

        <li><a href="index.html">Diamond Oaks</a></li>

        <li><a href="index.html">Paradise Valley</a></li>

        <li><a href="index.html">Rancho Solano</a></li>
        
        <li><a href="index.html">Woodcreek</a></li>

    </ul>

</div>

Open in new window

Avatar of Armand G
Armand G
Flag of New Zealand image

You could try adding this CSS code to hit the link tag:

ul[data-role="listview"] li a {
padding-right:10px;
}

Open in new window

Please note the spaces between ul, li and a tags.

A
Avatar of danfiggolf
danfiggolf

ASKER

Not sure about applying brackets [ ] to CSS ?
ASKER CERTIFIED SOLUTION
Avatar of Hagay Mandel
Hagay Mandel
Flag of Israel image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Not sure about applying brackets [ ] to CSS ?

The CSS that you are using is version 3 because it contains this tag: "<ul data-role="listview">" . You can lookup on google on how to use data- selectors.

As far as I am concerned, can you try out the code I've written for you?

Thanks,

A
Thank you for the lesson - for I understand now why to separate design from content for the purpose of maintenance and proper method of building a site.