Menu
Please Consider follow JSFiddle:
http://jsfiddle.net/7W2r4/12/
As you might notice: the list-group-item is fully collapsed. And i can't seem to make it autoadjust. (e.g. height:auto;)
yet when i supply the css rule:height:20px;, then the row size is adjusted.
How can i make the height of an list-group-item to adjust to size of the content?
Thank you for your time.
619
Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
Width and Height Utilities The width and height can be set for an element, by using 25%, 50%, 75%, 100%, and auto values. For instance, use w-25 (for remaining values, replace 25 with those values) for width utility and h-25 (for remaining values, replace 25 with those values) for height utility.
Add the badges component to any list group item and it will automatically be positioned on the right. Just add <span class = "badge"> within the <li> element.
Placing Ordered and Unordered List Items Inline. If you want to create a horizontal menu using the ordered or unordered list you need to place all list items in a single line (i.e. side by side). You can do this simply by adding the class . list-inline to the <ul> or <ol> , and the class .
You can add overflow:hidden or other "clear-fix" code to the list-group-item if you need to retain the floats within the items. Floats always cause problems with the height of the floated items. Clearing them or setting overflow will force the height to be calculated properly. See CSS: Floating divs have 0 height for more info on this.
.list-group-item
{
overflow:hidden;
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
Since you are using Bootstrap you could add the class="clearfix" to HTML for the list-group-items
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
