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.
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 am trying to implement Bootstrap's affixed navbar, like in
this example.
Here is a pen of what I have. It seems that the 'affix' class is always activated on the navbar element. That is, when I do
.affix {
top: 0;
}
The navbar automatically goes to the top on page load, when what I want it to do is be under the name and title. Any ideas on why this could be happening?
EDIT: Fixed the example link
Something like this?
https://codepen.io/anon/pen/mRrBNK
I've just moved the title and sub text and added a class within
<nav class="navbar navbar-default navbar-custom" data-spy="affix" data-offset top="197">
<div class="navbrand">
<h1> John Smith</h1></div>
<h4> Developer and Engineer </h4>
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.
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');
I am using the tabs feature of the twitter bootstrap v2.2.2 API within divs being displayed using twitter modal (again, v2.2.2 of the bootstrap). The problem is, when I do this the modal dialog changes shape and size as the tabs change.
I have been looking at trying to set the size of the div that wraps the tab panes by interrogating those tab panes and setting the outer div to the maximum size and width encountered from the panes. Problem is, whatever I do I always seem to be unable to determine the size of those panes (I assume because they have yet to be displayed?).
My layout (roughly)...
<div id="ClientEditPanel" class="modal hide" role="dialog">
<div class="modal-header">
<h3>Client details</h3>
</div>
<div class="modal-body form-horizontal">
<ul class="nav nav-tabs">
<li><a class="active" data-toggle="tab" href="#ClientEditPanel_Tab_Personal">Personal</a></li>
<li>Profile</li>
<li>Other</li>
</ul>
<div id="ClientEditPanel_Tabs" class="tab-content">
<div id="ClientEditPanel_Tab_Personal" class="tab-pane active">
...
</div>
<div id="ClientEditPanel_Tab_Profile" class="tab-pane">
...
</div>
<div id="ClientEditPanel_Tab_Other" class="tab-pane">
...
</div>
</div>
</div>
<div class="modal-footer form-actions">
<input type="submit" class="btn btn-primary" />
</div>
</div>
this is further supported by the following CSS...
.tab-content {
overflow: auto;
}
.tab-content > .tab-pane, {
display: none;
}
.tab-content > .active, {
display: block;
}
I am trying to get the panes as follows...
$.each($(".tab-pane"), function () {
...
});
In theory it should then be as simple as setting the width of the parent div to the width of the widest child and the height of the parent div to the height of the tallest child. I want to measure ClientEditPanel_Tab_Personal, ClientEditPanel_Tab_Profile and ClientEditPanel_Tab_Other and set the maximums on ClientEditPanel_Tabs.
Through debugging, I can confirm that my selector is bringing back the right elements "this" clearly represents my first tab on the first pass through the iterator. Having ascertained that though, whichever property of the div that I interrogate is always null or zero. I have tried the following properties of "this"...
clientHeight
clientWidth
scrollHeight
scrollWidth
innerHeight
innerWidth
outerHeight
outerWidth
style.height
style.pixelHeight
offsetHeight
and probably a few more that I have not listed.
Does anybody have any further ideas that I might achieve what I am looking for. I am sure it can be done as I know that JQuery.dialog can automatically size the dialog to the content (including when combined with JQuery.tabs), but I am too far down the road with the twitter bootstrap to change now.
Thanks.
The height and width properties of an element aren't set until the element is rendered in HTML. You can push the container to be off the page, render the content, do some adjustments and then move the content back to the screen. From my personal experience, I would just render the output and then on document ready (jQuery) I would make the adjustment to the page. This should happen very fast and I haven't noticed any adverse affects as long as the number of elements is fairly small.
You can't read dimensions unless it is in DOM. As #Kalpers suggested, render it outside viewport (e.g. append to <body> and have position:absolute; top: -9999px or append anywhere else but add visibility:hidden, then get element dimensions.