CODEWITHSUNDEEP
jqueryhtmlcss
diegoaguilar
diegoaguilar

Reputation: 8376

How can I control divs overlapping?

I got some divs styled with Bootstrap but I just gave them inline CSS (I know is not that correct) and added some padding and margins.

When the click of a button I come an object to be shown. And it's when an awful overlapping can be seen.

This is my markup:

<div class="container" style="padding-top:150px;" ng-controller="ChangePDF as change">

    <div class="col-xs-1" style="margin-top:20px;">
        <ul class="nav nav-pills nav-stacked" ng-repeat="category in ['PTR Cuadrado','PTR Rectangular','Polín Z', 'Mallas','Lámina Lisa','Lámina Antiderrapante']">
            <li><button class="btn btn-success" style="width:150px; margin-top:7px; white-space: normal;" ng-click="change.changePDF(category)">{{category}}</button></li>
        </ul>
    </div>

    <div class="col-xs-11 text-center" style="padding-left:20px;">

        <div style="margin-top:120px" id="msg"><h3><span class="fa fa-sign-in"></span>Selecciona cualquiera de las categorías a la izquierda <br>para ver nuestra lista detallada de productos</h3></div>
        <div id="pdf" style="height:600px;"></div>
    </div>


</div>

Even the buttons can't get anchor property at some area, I think because of a previous not visible overlapping.

At click of buttons I remove #msg

Effect can be seen here:

http://www.gintegraconstruccion.com/html/catalogo.html

Upvotes: 0

Views: 119

Answers (3)

Raunak Kathuria
Raunak Kathuria

Reputation: 3225

The problem is the way you are using fixed units with responsive, for example

Container width is 1170px (this is fine) but the column division is not correct

col-xs-1 is 8.33% that comes to 97px

and your assigning width of 150px to button inside the col-xs-1 (97px)

Solution is 

<div class="col-xs-2" style="margin-top:20px;">
</div>

<div class="col-xs-10 text-center" style="padding-left:20px;">
</div>

Upvotes: 1

Manwal
Manwal

Reputation: 23846

Try this code its seems to be working:

<div class="container" style="padding-top:150px;" ng-controller="ChangePDF as change">

    <div class="col-xs-2" style="margin-top:20px;">
        <ul class="nav nav-pills nav-stacked" ng-repeat="category in ['PTR Cuadrado','PTR Rectangular','Polín Z', 'Mallas','Lámina Lisa','Lámina Antiderrapante']">
            <li>
                <button class="btn btn-success" style="width:150px; margin-top:7px; white-space: normal;" ng-click="change.changePDF(category)">{{category}}</button>
            </li>
        </ul>
    </div>

    <div class="col-xs-10 text-center" style="padding-left:20px;">

        <div style="margin-top:120px" id="msg">
            <h3><span class="fa fa-sign-in"></span>Selecciona cualquiera de las categorías a la izquierda <br>para ver nuestra lista detallada de productos</h3>
        </div>
        <div id="pdf" style="height:600px;"></div>
    </div>


</div>

Upvotes: 1

user3662273
user3662273

Reputation: 554

just add more padding as " 120px;" in this line

<div class="col-xs-11 text-center" style="padding-left:20px;">

this could solve your problem.

And one more thing, inline style is really a bad practice as you know. so please try to add internal or external CSS.

Upvotes: 1

Related Questions