dl horizontal issue

[sannefoltz]

Hello,

The dl horizontal list breaks apart if usage with not so beautiful data. If you try building a list with fields from a database, it's realistic these values or keys aren't as nicely formed as you wanted. You can solved it of course by sanitizing everything in the backend but still it's realistic some values (dd) could be empty or the length of the key/values are actually longer than the 130px set width.

here's something I came up with to fix/demonstrate the problem
http://jsfiddle.net/XRPwb/2/

Regards Sanne

[mdo]

Our goal isn't to provide styles for every situation or use case, but to find common components we can provide a base for. This is one of those latter cases—we've provided the core styles, and you have a custom use for the component. We won't be merging this into the core. Thanks though!

[shanepinnell]

I agree that this should be fixed, I am not versed enough in Bootstrap to know what the best fix is, but I added a non-breaking space after each dd element in a dl.dl-horiztonal

dl.dl-horizontal {
    dd:after {
        content: "\0000a0";
    }
}

Not pretty, but it prevents the dd elements from encroaching upon one another if they have no content.

[carlosfilho88]

lelio98, it works! Thanks!

[shanepinnell]

@carlosfilho88 my pleasure! It was a pain finding the right code for an nbsp to use in CSS.

[brianlong]

This trick worked for me too. Thanks!

[fguillen]

+1 to the @carlosfilho88 trick