In followed example I used: bootstrap AngularJS recursive ng-include or (see second example) recursive directives jQuery (will try to avoid in the future) Demo 1 (ng-include) Plunker From this model: $scope.displayTree = [{ “name”: “Root”, “type_name”: “Node”, “show”: true, “nodes”: [{ “name”: “Loose”, “group_name”: “Node-1”, “show”: true, “nodes”: [{ “name”: “Node-1-1”, “device_name”: “Node-1-1”, “show”: true, … Read more
Both jQuery and Bootstrap.js should be included with jQuery placed before Bootstrap.js. Note: The version of jQuery that can be used will vary depending on the version of Bootstrap being used (or vice versa). Bootstrap Version 4 JS Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and … Read more
I’m not sure you have gotten past this yet, but I had to work on something very similar today and I got your fiddle working like you are asking, basically what I did was make another table row under it, and then used the accordion control. I tried using just collapse but could not get … Read more
Using data-parent, first solution is to stick to the example selector architecture <div id=”myGroup”> <button class=”btn dropdown” data-toggle=”collapse” data-target=”#keys” data-parent=”#myGroup”><i class=”icon-chevron-right”></i> Keys <span class=”badge badge-info pull-right”>X</span></button> <button class=”btn dropdown” data-toggle=”collapse” data-target=”#attrs” data-parent=”#myGroup”><i class=”icon-chevron-right”></i> Attributes</button> <button class=”btn dropdown” data-toggle=”collapse” data-target=”#edit” data-parent=”#myGroup”><i class=”icon-chevron-right”></i> Edit Details</button> <div class=”accordion-group”> <div class=”collapse indent” id=”keys”> keys </div> <div class=”collapse indent” id=”attrs”> … Read more
After close examining, not 300k lines but there are around 3-4 CSS properties that you need to override: .navbar-collapse.collapse { display: block!important; } .navbar-nav>li, .navbar-nav { float: left !important; } .navbar-nav.navbar-right:last-child { margin-right: -15px !important; } .navbar-right { float: right!important; } And with this your menu won’t collapse. DEMO (jsfiddle) EXPLANATION The four CSS properties … Read more
You could add overflow:auto to .body to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins
well you need something in between to “break” the collapsing. my first thought was to use a div with display:none set in between, but that doesn’t seem to work. so I tried: <div style=”overflow: hidden; height: 0px; width: 0px;”>.</div> which seems to do the job nicely (at least in firefox, don’t have internet explorer installed … Read more
2018 UPDATE Bootstrap 4 Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-* classes: <nav class=”navbar fixed-top navbar-expand-sm”>..</nav> navbar-expand-sm = mobile menu on xs screens <576px navbar-expand-md = mobile menu on sm screens <768px navbar-expand-lg = mobile menu on md screens <992px navbar-expand-xl = mobile menu on lg screens <1200px navbar-expand = … Read more
There are two main types of margin collapse: Collapsing margins between adjacent elements Collapsing margins between parent and child elements Using a padding or border will prevent collapse only in the latter case. Also, any value of overflow different from its default (visible) applied to the parent will prevent collapse. Thus, both overflow: auto and … Read more