Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1079
  • Last Modified:

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

0
danfiggolf
Asked:
danfiggolf
  • 2
  • 2
1 Solution
 
armchangCommented:
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
0
 
danfiggolfAuthor Commented:
Not sure about applying brackets [ ] to CSS ?
0
 
HagayMandelCommented:
@danfiggolf:

Some basics:
Applying styles best practice is done via css file(s). The inline styling that you use is not recommended, and here is not the right place to discuss why, you can google a bit and find the answers.
As long as you only wanted minor css touches, inline styling is acceptable, but the issues pile up and I guess it's time for the proper approach.
 
First modify the html <div> from:

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

to:
<div data-role="collapsible" data-mini="true" data-theme="b" data-content-theme="c" class="restaurants_list">


Since you already have a css file included in your application (<link rel="stylesheet" type="text/css" media="all" href="http://test2.dfigdesign.com/wp-content/themes/testtwo/style.css" />), you can open the 'style.css' located in your /wp-content/themes/testtwo/ folder, and add some custom rules to it.
Put a distinctive remark at the end of the file (such as //********************MY CUSTOM CSS************************ this will differentiate between the original part and your addition ), and add your css custom rules below it.

Now for the actual css content:

.restaurants_list {
  z-index: 999;
  position: absolute;
  right: 2px;
  margin : 8px 2px;
}

.restaurants_list ul {
  padding-right:10px !important;
}







As far as the padding issue.
0
 
armchangCommented:
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
0
 
danfiggolfAuthor Commented:
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.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now