I use quiet complex multi-level navigation and I need to wrap content of the dropdown in the bootstrap container, so it's max height fit's the grid height. However, when I do so, dropdown doesn't open at all.
See the fiddle (I put the comment right after the issue causing div, so if you comment that div, the dropdown will open normally): https://jsfiddle.net/s5ug07t4/7/
Here's the HTML with the container:
<ul class="nav navbar-nav">
<li class="dropdown">
Main menu item
<div class="container"><!-- That's the issue causing container -->
<ul class="dropdown-menu row">
<li class="col-sm-3 col-xs-6">
<ul>
<li class="dropdown-header">abc</li>
<li class="dropdown-header">def</li>
<li class="dropdown-header">ghi</li>
</ul>
</li>
<li class="col-sm-3 col-xs-6">
<ul>
<li class="dropdown-header">abc</li>
<li class="dropdown-header">def</li>
<li class="dropdown-header">ghi</li>
</ul>
</li>
<li class="col-sm-3 col-xs-6">
<ul>
<li class="dropdown-header">abc</li>
<li class="dropdown-header">def</li>
<li class="dropdown-header">ghi</li>
</ul>
</li>
<li class="col-sm-3 col-xs-6">
<ul>
<li class="dropdown-header">abc</li>
<li class="dropdown-header">def</li>
<li class="dropdown-header">ghi</li>
</ul>
</li>
</ul>
</div><!-- /That's the issue causing container -->
</li>
</ul>
Here's my updated fiddle, so you see exactly what I need: https://jsfiddle.net/s5ug07t4/9 Currently it's not a valid HTML because there is div container inside ul, however, moving it one level up wrapping ul with that container breaks dropdown so it doesn't open anymore.
Related
I need to scroll horizontally inside a lengthy list. It was possible when the list is statically implement as below.
<div style="margin-top:100px;white-space: nowrap;">
<ul >
<li style="display:inline">wfwe1</li>
<li style="display:inline">wfwe2</li>
<li style="display:inline">wfwe3</li>
<li style="display:inline">wfwe4</li>
<li style="display:inline">wfwe5</li>
<li style="display:inline">wfwe6</li>
<li style="display:inline">wfwe7</li>
<li style="display:inline">wfwe1</li>
<li style="display:inline">wfwe2</li>
<li style="display:inline">wfwe3</li>
<li style="display:inline">wfwe4</li>
<li style="display:inline">wfwe5</li>
<li style="display:inline">wfwe6</li>
<li style="display:inline">wfwe7</li>
</ul>
</div>
But if we fetch the list via a loop it will not display inline even. So horizontal scrolling is not possible. My attempt is as below.
<div
style="margin-top:100px;white-space: nowrap;">
<ul
v-for="(infoChildBtn, index) in infoSubContracts"
:key="index"
#click="infoTopBtnFun1(index, infoChildBtn)">
<li style="display:inline">
{{ infoChildBtn }}
</li>
</ul>
</div>
Where I was get wrong and how to resolve this?
The difference between your static example and your Vue example is, you are using v-for on the ul element. Therefore you will end up having something like this :
<ul>
<li style="display:inline">wfwe1</li>
</ul>
<ul>
<li style="display:inline">wfwe2</li>
</ul>
<ul>
<li style="display:inline">wfwe3</li>
</ul>
<ul>
<li style="display:inline">wfwe4</li>
</ul>
Try changing your vue template to
<div style="margin-top:100px;white-space: nowrap;">
<ul>
<li
style="display:inline"
v-for="(infoChildBtn, index) in infoSubContracts"
:key="index"
#click="infoTopBtnFun1(index, infoChildBtn)">
{{ infoChildBtn }}
</li>
</ul>
</div>
so you actually loop the li tag, not the ul tag.
guys I need your assistance in my current project.
I want to give for my img button a "side effect" , which should be interactive.
For instance, it must listen an event on click and should be opened and closed by clicking on img. I was to hardly trying to make this thing happened. Unfortunately, something wrong in my coding. And it should hide all div id="left"elements, since I'm doing responsive design for this project.
Please guys I need your help. I might assume my approach is totally wrong maybe you have some another recommendations.
Here is my HTML code:
<div id="main">
<!-- This img "button" should do slide effect to the right side -->
<img class="door_open" src="/templates/shablon/images/door_open.png">
<div id="left">
<div class="moduletable">
<div class=" modtit">По материалу</div>
<ul class="nav menu">
<li class="item-118">Металлические двери</li>
<li class="item-119">Клееный брус</li>
<li class="item-121">Пластиковые двери</li>
<li class="item-122">Шпонированные двери</li>
<li class="item-157">Массив древесины</li>
</ul>
</div>
<div class="moduletable">
<div class=" modtit">Фурнитура</div>
<ul class="nav menu">
<li class="item-163">Каталог дверных ручек</li>
<li class="item-164">Замки и защелки</li>
<li class="item-165">Наличники и короба</li>
<li class="item-166">Арки</li>
<li class="item-167">Лестницы</li>
</ul>
</div>
<div class="moduletable diz">
<div class=" modtit">По дизайну</div>
<ul class="nav menu">
<li class="item-136">Барокко</li>
<li class="item-137">Классика</li>
<li class="item-158">Ампир</li>
<li class="item-159">Минимализм</li>
<li class="item-160">Поп-арт</li>
<li class="item-161">Эклектика</li>
<li class="item-162">Модерн</li>
</ul>
</div>
<div class="moduletable">
<div class=" modtit">По производителю</div>
<ul class="nav menu">
<li class="item-156">Бульдорс</li>
</ul>
</div>
</div>
and here is my jQuery:
$('#left').on('click', function(){
$('.moduletable').toggle('slide', { direction: 'left' }, 1000);
$('#main-content').animate({
'margin-left' : $('#main-content').css('margin-left') == '0px' ? '210px' : '0px'
}, 1000);
});
Here is how it's supposed to look like
enter image description here
I am trying to make a bootstrap side menu that makes sub items collapsible.
Similar to http://jsfiddle.net/
However I want link items in the submenus and not such a complicated structure.
This is what I tried
<div class="row">
<!-- Main component for a primary marketing message or call to action -->
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="dropdown">
More<b class="caret"></b>
<ul class="dropdown-menu">
<li>Blog</li>
<li>About US</li>
<li>Jobs</li>
</ul>
</li>
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
</ul>
</div>
</div>
The dropable submenu does not push the rest of the items on the list down but rather appear on top of them. That makes it hard to navigate.
Would you not be better using panels and the collapse plugin to make a simple accordion? Here's an example to show what I mean. It does what I think you want.
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
More
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li>Blog</li>
<li>About US</li>
<li>Jobs</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
</ul>
</div>
</div>
I need a little assistance in modifying the javascript that controlls bootstrap dropdowns.
What i need to happen is when you click on a dropdown, it shows. On the top level that works fine, but if i want to go into a dropdown within a drop down
Example:
<ul>
<li>Dropdown 1
<ul>
<li>Dropdown 2
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</li>
</ul>
</li>
</ul>
When i click on dropdown 1, I can see the list item called dropdown 2 but when i click on it, it closes the whole list item again. When you click on dropdown 2 i need it to show up.
I found a hover method to open the second nested dropdown but i need it to show on click.
And help is much appreciated. Here is a fiddle: http://jsfiddle.net/raDUC/1/
try this:
HTML:
<div class="navbar navbar-fixed-top span2">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a> <a class="brand" href="#">Project Name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="dropdown">
Dropdown 1
<ul class="dropdown-menu">
<li class="dropdown dropdown-nested"> Dropdown 2
<ul class="dropdown-menu">
<li>Living and Nonliving things</li>
</ul>
</li>
<li> Another action
</li>
</ul>
</li>
<li> Link
</li>
<li> Link
</li>
<li> Link
</li>
<li class="dropdown"> Dropdown
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
JS:
$(function(){
$('.dropdown-nested').click(function(event){
event.stopPropagation();
var dropdown = $(this).children('.dropdown-menu');
dropdown.toggle();
});
});
Side Note...
I recommend adding the following css to your nav menus in bootstrap:
ul.nav a {
outline: none;
}
it keeps that ugly blue outline from showing up if you click on a main menu item to close it.
I thought I ask SO for help before I file a bugreport. I have a twitter bootstrap tab inside another tab, and wenn I click to change to the next inner tab, bootstrap.js does not only remove the .active from the closest .tab-pane, but also from the outer .tab-pane. I tried to dive into the code, but my javascript isn't good enough to fully understand it. I tried to manually add the active class to the outer .tab-pane with jquery and also tried .tab('show') on the data-toggle="tab" element. It seems like that bootstrap.js finds all .tab-content and then removes the .active from its children. Or maybe I have a mistake in my markup (well from experience 99% of the time it's human error). The javascript is all boilerplate, I just call the first tab with tab('show'). Here's my markup:
<ul id="sidebar" class="unstyled naviTab">
<li class="accordion-group">...</li>
<li class="accordion-group active">
<h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2>
</li>
</ul>
...
...
<ul class="unstyled tab-content">
<li id="course" class="tab-pane">
<li id="getting-started" class="tab-pane active">
<div class="wizard stepTab">
<a class="active" href="#module1-step1" data-toggle="tab">1.Step</a>
<a class="" href="#module1-step2" data-toggle="tab">2.Step</a>
<a class="" href="#module1-step3" data-toggle="tab">3.Step</a>
</div>
<ul class="links unstyled tab-content">
<li id="module1-step1" class="tab-pane active" data-original-title="">...</li>
<li id="module1-step2" class="tab-pane">
<li id="module1-step3" class="tab-pane">
</ul>
</li>
</ul>
And after clicking a href="#module1-step2":
<ul id="sidebar" class="unstyled naviTab">
<li class="accordion-group">...</li>
<li class="accordion-group active">
<h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2>
</li>
</ul>
...
...
<ul class="unstyled tab-content">
<li id="course" class="tab-pane">
<li id="getting-started" class="tab-pane">
<div class="wizard stepTab">
<a class="" href="#module1-step1" data-toggle="tab">1.Step</a>
<a class="active" href="#module1-step2" data-toggle="tab">2.Step</a>
<a class="" href="#module1-step3" data-toggle="tab">3.Step</a>
</div>
<ul class="links unstyled tab-content">
<li id="module1-step1" class="tab-pane" data-original-title="">...</li>
<li id="module1-step2" class="tab-pane active">
<li id="module1-step3" class="tab-pane">
</ul>
</li>
</ul>
Notice how the outer tab-panes are all inactive.
If anybody has run into this problem or can tell me where I messed up I'd be very grateful!
EDIT1
Here's my javascript. I actual don't have to include any js because bootstrap.js works just fine just with the html attributes(and that's probably the reason why it breaks). I tried different approaches (.each(), e.preventDefault()) but nothing seemed to work. But here's my js anyway:
<script>
/*global $*/
"use strict";
$(function () {
$('.naviTab li:first-child h1').tab('show'); //shows the first child of the outer tab on load. Could just add an .active to the markup instead
$('#sidebar li:first-child').addClass('active'); //this is for the accordion that the outer tab links are enbedded in
$('.stepTab a').click(function () {
if ($(this).closest('li').hasClass('active') == false) { //this is supposed to check if the outer tab has .active and add it if it doesn't. Unfortunately it doesn't work...
$(this).closest('li').addClass('active');
}
$(this).siblings().removeClass('active'); //this is for css styling purposes on the inner tab a's
$(this).addClass('active');
});
});
</script>
Cheers for any suggestions!
As stated by albertedevigo you only need to provide a unique ID's to each tab, no matter if the tab is nested, this is because the javascript action will open/close this specific tab:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 3</li>
<li>Section 4</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab3">
<p>I'm in Section 3.</p>
</div>
<div class="tab-pane" id="tab4">
<p>Howdy, I'm in Section 4.</p>
</div>
</div>
</div>
</div>
</div>
Take a look at jsfiddle.net/simbirsk/RS4Xh/2
maybe this should help http://www.juvenpajares.com/?p=204 Custom Accordion Using Bootstrap Framework
The problem was that I didn't use an for the links in the inner tabs, but just a div with a's(had to do it for css reasons). I didn't know that bootstrap requires the links to be in a ul > li > a format. Now it know! I'll leave the question in case somebody has the same problem. Cheers for the help!