Menu
When I add class d-flex my Bootstrap 4 <ul> list items do not respond to .hide() anymore, even though style="display: none;" is added to the DOM.
The d-flex is used for the Bootstrap 4 list badges.
Suggestions?
// test 1: regular list, no issue
$("#myList li:even").addClass("disabled").hide()
// <li class="list-group-item" style="display: none;">First item</li>
// test 2: list with badges, no response to hide (class "disabled" still works)
// just adding class "d-flex" is sufficient to reproduce issue
//$("#myList2 li").addClass("d-flex")
$("#myList2 li").addClass("d-flex justify-content-between align-items-center")
$("#myList2 li").append("<span class='badge badge-primary'>test</span>")
$("#myList2 li:even").addClass("disabled").hide()
// <li class="list-group-item d-flex justify-content-between align-items-center" style="display: none;">First item<span class="badge badge-primary">test</span></li><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<h3>regular list</h3>
<ul class="list-group" id="myList">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
<h3>with d-flex class (used for badge)</h3>
<ul class="list-group" id="myList2">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
801
d-flex will result in an element that takes up the whole width of its parent. And creating a Bootstrap 4 flex container with . d-inline-flex will make its width vary depending on the width of its content. . d-inline-flex will only take up the space it is necessary to display its content.
Use the d-none class to hide an element. Use any of the d-*-none classes to control WHEN the element should be hidden on a specific screen width. Resize the browser window to see the effect.
Inline-flex: Displays an element as an inline-level flex container. The display:inline-flex does not make flex items display inline. It makes the flex container display inline.
To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.
Bootstrap 4 Flex 1 Horizontal Direction. Use .flex-row to display the flex items horizontally (side by side). This is default. 2 Vertical Direction 3 Justify Content. Use the .justify-content-* classes to change the alignment of flex items. 4 Fill / Equal Widths. Use .flex-grow-1 on a flex item to take up the rest of the space. ...
Use the .d-*-flex class in Bootstrap to set a flexbox container on a screen size as shown below −
Besides offering multiple styles for the default list, Bootstrap 4 is introducing a new element: the list group. The Bootstrap 4 list group offers extensive use cases and learning how to add them to your project will help you organise your information and navigation. Let’s start creating lists!
If you are using actionable panels and you want the item links to toggle content, you can use the JavaScript we have started learning about in Day 11: Bootstrap 4 Navigation Tutorial and Examples. To add the panels we need the place them in a container with the class .tab-content and give each panel the .tab-pane class.
.d-flex uses !important which overrides the display: none which hide() puts on the element.
You could put containers within your li (I've used divs in example fiddle) and add .d-flex onto them so display: none on the li won't be overridden.
Fiddle here
129
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
