CODEWITHSUNDEEP
htmlcsshtml-lists
AlbatrossCafe
AlbatrossCafe

Reputation: 1842

How do I make my background-color fill entire width of div when applied to a `ul li`?

I'm using jQuery-UI-Layout plugin that creates a pane on the east side of the screen. When I create a list in it and apply a background-color to each <li> element, it doesn't span the width of the entire pane.

I would like it so that there is no white space on either side of the <li>, even if it has a bullet or number next to it (meaning if I decide to include a bullet or number, it should also be covered by the color). How can I do this?

Fiddle: http://jsfiddle.net/5EECD/497/

HTML:

<div class="ui-layout-center">Center</div>

<div class="ui-layout-east">
    <ol id="someList">
        <li class="not-selected">step 1</li>
        <li class="selected">step 2</li>
        <li class="not-selected">step 3</li>
        <li class="not-selected">step 4</li>
    </ol>

</div>

CSS:

.selected {
    background-color: #e90902;
    padding-top: 10px;
    border-bottom: 1px solid #808080;
    padding-bottom: 10px;
}

.not-selected {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #e9e9e9;
    border-bottom: 1px solid #808080;
}

Upvotes: 2

Views: 1548

Answers (4)

clickbait
clickbait

Reputation: 2998

Add this to your CSS file:

.ui-layout-pane-east {
    padding: 0 !important;
}

Don't do this from the browser's inspector. jQuery UI's inner workings are supposed to calculate widths on page load.

Upvotes: 4

Michael G
Michael G

Reputation: 189

Here is your edited working Fiddle, with a List Style Disc "inside" the actual list item, by using the list-style-position style. To remove the Disc icon, simple use the style "none" instead.

If you set the font-size to 0px and that will remove all white space from list items, as long as the list item has a given font size which is shown in the example.

I just added a little CSS to your working CSS:

ol#someList {
  font-size:0px;
  padding-left:0px;
  list-style:disc;
  list-style-position: inside;
}

ol#someList li {
  font-size:14px
}

I also added a body style to remove the default margin of 8px to show you that there is no white space to left or right of the list items.

Hope that helps! Michael G

Upvotes: 1

Das
Das

Reputation: 470

It might not be the best way of doing it, though you can expand the margins of the <li> to fill the pane.

li{
    margin: 0px -10px 0px -10px;    
}

JSFiddle

Upvotes: 1

Eric
Eric

Reputation: 368

Try Removing the 

padding: 10px

from the following in css

body > div.ui-layout-east.ui-layout-pane.ui-layout-pane-east

Upvotes: 1

Related Questions