?
Solved

Jquery Mobile Listview Padding

Posted on 2013-01-03
5
Medium Priority
?
1,028 Views
Last Modified: 2013-01-05
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
Comment
Question by:danfiggolf
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 7

Expert Comment

by:armchang
ID: 38741924
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
 

Author Comment

by:danfiggolf
ID: 38742114
Not sure about applying brackets [ ] to CSS ?
0
 
LVL 16

Accepted Solution

by:
HagayMandel earned 2000 total points
ID: 38742566
@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
 
LVL 7

Expert Comment

by:armchang
ID: 38743151
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
 

Author Closing Comment

by:danfiggolf
ID: 38747678
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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question