Semantic-UI forewarns on its sidebar page that "Fixed position content may have issues changing its position when a sidebar appears." It then provides two possible solutions to the problem.
Surprisingly, on that very same page and throughout the site, Semantic-UI's website uses a fixed top menu that adjusts just fine when the left sidebar is triggered.
I want to simply create a fixed top menu like the one Semantic-UI's site uses that adjusts properly when the sidebar is opened. However, this is proving frustratingly difficult, as neither of the two proposed solutions work. I've inspected the markup, css, and javascript but can't figure out how he went from the code Semantic-UI provides to a working fixed top menu that adjusts properly when the sidebar is opened.
Any thoughts or direction? Using Semantic-UI how do you create a fixed top menu that adjusts properly when a sidebar is opened?
From the docs:
Using Fixed Content Any fixed position content that should move with
page content when your sidebar is visible, should receive the class
name fixed and exist as a sibling element to your sidebar.
Fixed content that is not included adjacent to your pusher will lose
its positioning when a sidebar is shown.
<div class="ui left vertical inverted labeled icon sidebar menu">
</div>
<div class="ui fixed inverted main menu">
</div>
<!-- Left Sidebar -->
<div class="ui visible inverted left vertical sidebar menu">
<a class="item">Home </a>
<a class="item">Page 1</a>
<a class="item">Page 2</a>
</div>
<!-- Top Fixed Menu -->
<div class="ui top fixed menu">
<a class="item menu-trigger">Menu</a>
<a class="item">Page 1</a>
<a class="item">Page 2</a>
</div>
<div class="pusher">
<!-- Page Content Here-->
<div class="ui basic segment">
<h3 class="ui header">Hello there</h3>
</div>
</div>
Don't forget to put the code above inside the "body" tag and including the css & js files.
Use the 'exclusive' setting to display multiple sidebars that play nicely with each other.
$('.your-shared-sidebar-class').sidebar('setting','exclusive',false).sidebar('show');
Related
Currently I am using materialize navbar and for the most part it work perfectly.
<div className="navbar-fixed fadeInDown animated">
<nav>
<div className="nav-wrapper">
...
</div>
</nav>
</div>
The thing is, it has an automatic collapsing behavior and for that reason I removed the id="nav-mobile".
It still collapses I think because it gets the width change events.
How do I make it so that it just changes the width without collapsing eventually?
As per the documentation, remove the button-collapse from your navbar and remove the initialization code: $(".button-collapse").sideNav();
I have my own website
However, on resizing it, I see the options on the navbar going up and down, depending on window size, what is the problem? How do I fix it?
Simple fix is to change the .container to a .container-fluid:
<div class="container-fluid">
<div class="navbar-header navbar-right">
...
</div>
</div>
This will resize the container and not make it have fixed width.
I am trying to create a simple web ui with semantic ui.
I want a sidebar with a menu in it in some items will have subitems... Shouldn't be that hard hu?
http://jsfiddle.net/ycm8ctfx/
<div class="ui vertical menu sidebar teal">
<div class="menu">
<a class="item" target="_blank" href="http://semantic-ui.com/modules/dropdown.html">
Example
</a>
<div class="ui left pointing dropdown link item">
<i class="dropdown icon"></i>
Messages
<div class="menu">
How do I get the sub-items to "fly-out" of the sidebar over the normal page content? If you click "Messages" within the example, the menu will appear (watch the scrollbar at the bottom to appear) but since those are children of the sidebar, they are being shown within the sidebar. But I want them to float over the normal content! I didn't get it to work via fiddle with the z-index.
if sidebar is configured to use overlay transition it can be fixed by specifying
.ui.sidebar {
overflow: visible !important;
}
taken from here http://jsfiddle.net/59174tt1/2/
It's the combination of position:fixed and overflow on .ui.sidebar. This article might help: http://css-tricks.com/popping-hidden-overflow.
An alternative might be to use an accordion to keep everything within the sidebar.
I have two containers, as displayed in this FIDDLE.
Both have content that can become quite lengthy, thus I need to use overflow: auto on both containers.
The HTML structure:
<div id="maincontainer">
<div id="left-container" class="go-left overflow-y-auto">
<div id="left-inner-container">Contents</div>
</div>
<div id="right-container" class="go-right overflow-y-auto">
<div id="right-inner-container">
<div id="button-wrapper">
<button type="button" id="tip_button" class="btn primary customized-button">tip</button>
</div>
</div>
</div>
</div>
I have a button within the #right-container that creates a tooltip on click, displayed right next to it. The problem is that, when I have lengthy content (that determines scroll bar to appear), the tooltip won't be placed near the button (on scroll). It will remain relative to the #maincontainer. If I make it relative to the #right-container the tooltip will be 'chopped' (due to overflow).
What I'm seeking is to have the tooltip aligned next to the button when the user scrolls down that area.
If you are using Bootstrap tooltip then add class 'bootstrap-demo' to parent div of button & make sure you are NOT passing container:'body' parameter when initializing tooltip.
EDIT: My temporary solution is to turn off all transitions and use different id for each header. You then get the persistent toolbar, but without transitions.
working example without transitions
I am using a persistent fixed navbar in my header in JQuery Mobile.
I'm navigating between 3 html files, and on the first(main) page there is no problem, but on the second and third page the navbar covers some of the content.
example of broken navbar code for the navbar and header:
<div data-role="header" data-id="header" data-position="fixed">
<h1>Page 1</h1>
Options
<div data-role="navbar">
<ul>
<li><a href="#page1" data-icon="home" data-iconpos="top"class="ui-btn-active ui-state-persist" >Page1</a></li>
<li><a href="#page2" data-icon="info" data-iconpos="top" >Page2</a></li>
<li><a href="#page3" data-icon="gear" data-iconpos="top" >Page3</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
I have uploaded an example of the problem here(with pages in one html file instead of three html files) : broken navbar
here's the updated one:
http://jsfiddle.net/LvuUX/2/
You had same data-id="header" for all three pages, as you are using multi-page template so you can't have same id for multiple elements
EDIT: http://jsfiddle.net/LvuUX/3/
looks like jQuery is not using the correct padding-top when page loads. To fix this issue you can just use a fix padding-top for your data-role="content"
<style type="text/css">
.ui-page-header-fixed { padding-top: 5.9em; }
</style>
I think what you're trying to do is similar to the problem I had. I had a fixed positioned navbar but my page content was being hidden underneath it. I solved the problem by applying a top margin to my content div equal to the height of the navbar. (ie. My margin-top of my content div was 50px as that was the height of my navbar.)
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
I hope I interpreted your question correctly. I've only been learning html&css 3 months but when I saw your question I thought this might help.