jQuery UI Widgets › Forums › Navigation › NavigationBar, ToolBar, NavBar › Vanvigation Bar
Tagged: angular navigationbar, bootstrap navigationbar, javascript navigationbar, jQuery NavigationBar, jqwidgets navigationbar, jqxnavigationbar
This topic contains 5 replies, has 2 voices, and was last updated by Hristo 8 years, 10 months ago.
-
AuthorVanvigation Bar Posts
-
Hi All,
I am using navigation bar s follow:
$("#jqxNavigationBar").jqxNavigationBar({ height: "100%", width: "100%", expandMode: "singleFitHeight"});
Because expandMode is singleFitHeight, only 1 panel can be opened at the same time. This is what I want.
But I also would like to be able close a panel like expandMode is multiple. Why is not this possible?
When page is loaded, all panels will be closed default, I will be able to open 1 panel at the same time which means that when I open 2nd panel, already opened 1st panel will be closed but also I will be able to close 2nd panel tooHello lineker,
Please take a look this example: http://jsfiddle.net/txhi/6eodcwLb/1/
Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHi Hristo,
Toggle mode works well for opening 1 panel at same time
But when a panel is opened, I want all other panels under it go to bottom like singlefitHeight, it does notHello lineker,
In case when using
expandMode: 'singleFitHeight',
that behavior is expected.
Please take a look this workaround:
http://jsfiddle.net/txhi/qqnacknh/Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHi Hristo,
At the example you wrote at recent message, why does not it work if css is as follow:
.content {
height: 100p%; // setting height 100% instead of 100px
}I can not set height to a scalar value because I don’t know screensize of computer
My jqxnavigationbar is inside in a splitter, so when I open a panel, all other panels should move to bottom of splitter and this should be supplied by using 100%I kindly request you try following at jsfiddle code, when you copy paste it will work. (do not have jsfiddle account yet and will open)
I want 2nd panel go to bottom when 1st panel is opened but it does not work.HTML:
<div id=”mainSplitter”>
<div>
<div class=”content” id=’jqxNavigationBar’>
<div>Panel 1</div>
<div class=”content”><div class=”content”>Content 1</div></div>
<div>Panel 2</div>
<div class=”content”><div class=”content”>Content 2</div></div>
</div>
</div>
<div>
<div id=”mappanel” style=”height: 100%;”>
<div id=”map”>Right</div>
</div>
</div>
</div>Javascript :
$(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: ‘90%’, orientation: ‘vertical’, resizable:false,
panels: [{ size: 200, collapsible: false }] });$(“#jqxNavigationBar”).jqxNavigationBar({ height: “100%”, width: “100%”, expandMode: “toggle”});
CSS :
html, body {
width: 100%;
height: 100%;
}
.content {
height: 100%;
}Hello lineker,
About described situation when content of the parent element is without height and width that happen.
And for that need to set some value in parent and after that could use height 100% for the child.
If you would like could read more in this article: http://stackoverflow.com/questions/7049875/height100-not-working
Please take a look this example: http://jsfiddle.net/6mevy7hm/Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.