CODEWITHSUNDEEP
jqueryhtmlcss
Marco Dinatsoli
Marco Dinatsoli

Reputation: 10570

css li pading itself

I have this div element

<div class="foodsSection">
    <label>
        Foods:
    </label>
    <ul>
        <li>
            here
        </li>  
    </ul>
</div>

the results is : enter image description here

but when i add li elements from jquery, the results become this: enter image description here

why the padding to the left and how to solve it please?

jquery

$(document).ready(function(){
    $("..RestauranstSection li").click(function (){
        var divYourOrder = $(".YourOrder");
        var li = $(".OMRestaurants li");
        var restaurantID = 8;
        var foodDive = $(".foodsSection ul");
        foodDive.html("");
        var lis = '<ul>';
        $.getJSON("http://localhost/TheEatTel/Food/getFoodForRestaurant/"+restaurantID+"/TRUE",function(data){
            for(var i=0;i<data.length;i=i+2){
                lis +="<li>"+"<label>"+data[i]+"</label> <label>"+data[i+1]+"</label></li>";
            }
            lis+="</ul>";
            foodDive.html(lis);    
        });
    });
});

css

.foodsSection{
    width: 50%;
    margin-left: 100px;
    margin-top: 20px;
    border: black solid 2px;
}
.foodsSection label{
    width: 100px;
    color: blue;
}
.foodsSection ul{
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-left: 100px;
    padding: 0;
}
.foodsSection ul li{
    font-size: 18px;
    padding: 0px;
    margin: 0px;
    list-style: none;
}
.foodsSection ul li:hover{
    background-color: #ccccff;
}

Upvotes: 2

Views: 82

Answers (5)

Tim B James
Tim B James

Reputation: 20364

You are setting the HTML of the foodsSection ul with another ul. e.g.

You are selecting $(".foodsSection ul") which is the ul element. Then setting the HTML within it with another ul.

<div class="foodsSection">
    <label>
        Foods:
    </label>
    <ul>
        <ul>
         .
         .
         .
         </ul>
     </ul>
 </div>

This is going to cause twice the amount of padding and also is incorrect HTML markup. It may look wrong in one browser (due to the double padding) but is going to look worse it others due to the broken HTML.

What you can do is replace your .html(lis) line of code with .replaceWith(lis) You can read about this method here .replaceWith()

Upvotes: 4

superUntitled
superUntitled

Reputation: 22527

You are adding a second ul to your markup, and it is inheriting the css style for your ul(a margin left of 100px).

instead of

.foodsSection ul

try

.foodsSection > ul

Upvotes: 1

SachinGutte
SachinGutte

Reputation: 7055

You are adding extra <ul> from your script. You already obtain destination for li with var foodDive = $(".foodsSection ul");. So you don't need that 2nd var lis = '<ul>'; and closing lis+='</ul>' too. Just just var lis = ''; instead.

Upvotes: 1

DavidB
DavidB

Reputation: 2596

Its because you are adding the code to the ul element, and it includes a nexted ul. Firefox developer toolbar has a "view generated source" button that is useful for this.

Try this:

$(document).ready(function(){
    $("..RestauranstSection li").click(function (){
        var divYourOrder = $(".YourOrder");
        var li = $(".OMRestaurants li");
        var restaurantID = 8;
        var foodDive = $(".foodsSection ul");
        foodDive.html("");
        var lis = '';
        $.getJSON("http://localhost/TheEatTel/Food/getFoodForRestaurant/"+restaurantID+"/TRUE",function(data){
            for(var i=0;i<data.length;i=i+2){
                lis +="<li>"+"<label>"+data[i]+"</label> <label>"+data[i+1]+"</label></li>";
            }
            foodDive.html(lis);    
        });
    });
});

Upvotes: 1

Ram
Ram

Reputation: 144689

That's because you are appending another ul element to the current ul. You can either replace the ul or only append li elements.

foodDive.replaceWith(lis);

Upvotes: 1

Related Questions