CODEWITHSUNDEEP
htmltwitter-bootstrapcssresponsive-design
Cyril Gandon
Cyril Gandon

Reputation: 17058

How to fix this horizontal overflow with dl-horizontal?

Maybe I'm doing something really wrong, but the result is aweful:

enter image description here

Note how the text of Value 2 is out the border of the panel.
I need to display two panels of the same width, and inside each of them, two properties displayed horizontally with dl and dd of bootstrap.

Here is the bootply example

<div class="row" style="width:800px">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                Properties
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-6">
                        <dl class="dl-horizontal">
                            <dt>Property 1</dt>
                            <dd>
                                Value 1
                            </dd>
                        </dl>
                    </div>
                    <div class="col-md-6">
                        <dl class="dl-horizontal">
                            <dt>Property 2</dt>
                            <dd>
                                Value 2
                            </dd>
                        </dl>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                Properties
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-6">
                        <dl class="dl-horizontal">
                            <dt>Property 1</dt>
                            <dd>
                                Value 1
                            </dd>
                        </dl>
                    </div>
                    <div class="col-md-6">
                        <dl class="dl-horizontal">
                            <dt>Property 2</dt>
                            <dd>
                                Value 2
                            </dd>
                        </dl>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

How to fix this horizontal overflow? Am I doing something wrong?
My example looks standard. What have I done which is not supported by Bootstrap?

Upvotes: 2

Views: 1537

Answers (3)

Stafox
Stafox

Reputation: 1005

So, you can override bootstrap dt width and dd margin-left which are iqual to 180px for this case only.

.dl-horizontal dt {
    width: 80px;
}

.dl-horizontal dd {
    margin-left: 90px;
}

http://www.bootply.com/SnawhTGbvU

EDIT:

http://www.bootply.com/mg7mkR303W

Just remove div.col-md-6 which wrapped your dl. Also you may keep all dl items in one dl

Upvotes: 1

z1m.in
z1m.in

Reputation: 1661

http://www.bootply.com/aAXea5CY2E

All issues is because your block width is to small.

Upvotes: 0

NooBskie
NooBskie

Reputation: 3841

Codepen http://codepen.io/noobskie/pen/PPQZjv

Are you looking for something like this?

by default bootstrap adds margins to dd elements so I just applied the following css to reset that

.dl-horizontal dd{
  margin-left:0;
}
.dl-horizontal dt{
  text-align: left; //Align title with content
}

Upvotes: 0

Related Questions