CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
kstubs
kstubs

Reputation: 808

Text out of box

I am using Twitter bootstrap and CSS to style a dropdown. I have a child element that floats on the left and then text that flows to the right of it. Unfortunately the text does not flow within the containing box and spills over.

I' not sure if this is a Twitter bootstrap issue or just a CSS issue (ultimately a CSS isseu I know but worth tagging this as Twitter Bootstrap too since I'm using that framework).

I've tried several combinations, and obviously not the right combination to achieve the behavior I'm after. Does anyone know how to fix this? A working example of the problem is here:

http://ec2-54-215-108-9.us-west-1.compute.amazonaws.com/ (click on the International Gymnast link on the right)

Here is a screenshot demonstrating the issue as well. enter image description here Thanks,

Karl..

Upvotes: 0

Views: 1090

Answers (2)

JohanVdR
JohanVdR

Reputation: 2878

.dropdown-menu > li > a ,
.btn.btn-default.btn-large.btn-left > span {
  white-space: normal;
}
  1. I would also reduce the line-height on the a tag.
  2. Reduce the height on [.live-mon]
  3. Remove the height on the a tag.

  4. Increase the padding top and bottom on the a tag.

    .intl-link li a {
  overflow: hidden;
}
.intl-link li a {
  line-height: 19px;
}
.dropdown-menu.intl-link > li > a {
 padding: 7px 20px;
}
.live-mon {
 display: block;
 height: 62px;
 width: 92px;
}

You would get something like this:

style cleaning up of message box

Upvotes: 1

Tomáš Blatný
Tomáš Blatný

Reputation: 902

Its because links in dropdowns in TWBS have white-space: nowrap;.

The easiest solution i could think of is creating a custom CSS class:

.dropdown-menu > li > a.btn-wrap {
    white-space: normal;
}

And then adding class="btn-wrap" to your <a> element

Upvotes: 1

Related Questions