I seem to have a strange Issue with the Bootstrap collapse dropdown feature in small views. I have icons in a header in both XS and S views, in XS, clicking on these will expand the feature, whilst in S - these dropdowns are already opened, and if I try to click the button that interacts with the dropdown I get a strange animation.
Iv noticed that turning off display: !important; on the navbar-collapse.collapse in the bootstrap css (browser debugger) seems to remedy the issue - however this is a poor fix for all kinds of reasons - and I dont know how I can override this in my custom style sheet. Has anyone had similar issues with Bootstrap Collapse dropdowns?
I have created a Bootply document, images and font-awesome icons won't show up on there so it looks abit strange, ignore the red line as that is there to test the height of something.
http://www.bootply.com/2dWHqPQ0x3
I know its not a coding service - just looking for pointing in the right direction, will be good for those with similar problems in the future.
It's because 'navbar-collapse' is built to work (toggle) only for xs screens as defined in your bootstrap.css.
This is taken from the bootstrap site:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
So essentially you need to change this so that it starts at 992px and not 768px.
#media (min-width: 768px){ /* change to 992px (or whatever you've set your grid breakpoint at for 'md') */
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
}
Related
Nice new nav bar on stackoverflow. Looks like the bootstrap I am using. It has the same problem that my site does, the nav bar jumps slightly when clicked.
Any ideas how to fix it? I haven't looked too close, but I'm thinking there should be some sort of javascript fix to hold the screen until it repaints.
The reason why the navbar jumps is because at load time the browser calculates, based on the information it has about the content, that it won't need a scrollbar. Therefore it starts rendering using full viewport width. For a quick flash, until enough of the page has loaded to make the browser paint the scrollbar, the navbar is full-width.
That means, in desktop browsers, it is 17px wider than on pages with scrollbar.
Note: Before trying to fix this, please note it's only an issue on wide, pointer based devices. It doesn't exist on mobile/touch devices. Any method from below should be limited, using media queries or device detection, to desktop, pointer based devices.
A few methods on dealing with this:
give certain elements min-height property so that the browser will estimate the initial height of the page correctly (or at least more accurate).
give <body> a min-height of calc(100vh + 1px) on pages you are certain will have a scrollbar.
use overflow:scroll on <body> on pages that you know know will have scrollbar (always wrap this in a media query)
hide (as in: opacity:0) all above the fold content and fade it in when a particular element has loaded (typically used on window load event, but you could just use a particular HTML element for this, if the page is very long and you don't care about the bottom parts to be loaded when you paint the top) - this technique is widely used by AngularJs websites/apps, principle from ng-cloak directive, but with opacity. Effective at removing FOUC and this desktop scrollbar jump issue.
use a scrollbar plugin, removing the default scrollbar. Custom scrollbars are usually positioned absolute, over the content and don't influence content rendering.
(this is more of a hack, but I use it):
#media (min-width: $md-min) { /* 768px ? */
#navbar { /* assuming this is navbar */
position:absolute;
left: 0; top: 0; /* depends on layout */
min-width: 100vw;
}
body {
margin-top: 60px; /* navbar height #desktop */
overflow-x: hidden;
}
}
Note: This issue is also known as the modal overlay navigation bug, because when modals give body position:fixed in order to place the overlay, the navigation jumps to full width (as the body no longer has a scrollbar). It's a long discussion, with various fixes. example.
From my point of view, this is a fault of desktop browser developers.
Sidebar should never, ever, interfere with window width calculation. You either paint it over the content (only when the user scrolls?) or you paint it aside from the page in a manner that still looks good when you don't have a scrollbar.
It's not that hard.
I've updated my self-made responsive menu but I have a problem with the menu disappearing when resizing.
When I downsize my window below 1100px width and open the responsive menu, everything is fine. However when I close the responsive menu Jquery applies a display: none inline attribute.
This makes my screen disappear when I resize back to full width.
I've updated my codepen with the javascript below. Is this a good solution or can somebody help me improve this little responsive menu?
Codepen link
$(window).resize(function() {
var viewportWidth = $(window).width();
if (viewportWidth > 1100) {
$('.navigational-menu').show();
}
});
Unfortunately, this is just part of adapting a site to be responsive.
First off, I'd recommend using media queries instead of javascript to do it. Start by adding in rules for the different widths you'll be defining for, so if it goes below 1100px, you'll need to have
#media screen and (max-width: 1100px) { /* Changes to your CSS for widths below 1100px will go here */}
What you want to do is resize your window below that width, and then see everything that "breaks" or needs to be redone with new CSS rules, and make those changes. You'll probably need to change the menu sizes, maybe font-sizes (depending on how you have it set up). But what I find to be the easiest, is to open up your browsers CSS Element Inspector / CSS Editor, and make those changes on the fly as you're resizing your browser. Then, just transfer those changes to your main code, and keep going for the lower widths. Chances are this one rule for under 1100px won't be enough, and you'll have to create a few to ensure it looks good at all widths. So say, once you get to 800px, you'll want to further update some elements, you just
#media screen and (max-width: 800px) { /* Changes to your CSS for widths below 800px will go here */}
And do the same thing. Keep going until your site works well at all widths, and your site will be responsive.
From the look of your question though, it seems as though you're looking for a magic bullet to make the menu work automatically responsively... unfortunately, that's not how it works, and you're going to have to code in the changes at each level to make it look how you'd like.
Good luck!
I am using bootstrap3 for a responsive layout. I am also using JQuery UI to resize the div.
My code snippet looks like this div (class="col-sm-4 ui-widget-content")
When I resize the div I need to size it to the bootstrap 12 col grid pattern. So for example if I resize the div horizontally, I need the class as col-sm-5.
Is there a way to align the grid/assign the class to bootstrap columns?
Thnak you
For a CSS solution you would need to establish the breakpoint in which you want the column width to be over-written. So if your saying you want (class="col-sm-4 ui-widget-content") to utilize col-sm-5 width on tablet portrait view (for example), you would need to over-ride the width in your media query by replacing the bootstrap width of col-sm-4 for width of col-sm-5.
Example:
#media (min-width: 768px) and (max-width: 979px) {
.col-sm-4 .ui-widget-content {width: 41.66666667% !important;}
}
Personally, I'm not sure why you would want to do this. It would be far more beneficial to leverage the bootstrap framework as is and simply fine tune the jQuery UI elements by redefining their widths to (width: auto) or (width: 100%) where needed to ensure they properly fill the bootstrap cols. This would ensure the responsive integrity of your template. Additionally, leveraging jQuery UI themes and images won't provide the visual clarity your looking for as they are not compatible with mobile Retina displays or (#2x). jQuery UI has some cool functionality and widgets but I find customizing your own mobile-friendly theme within bootstrap will give you the best of both.
Hope this helps!
jsfiddle example here
I have implemented a sticky footer using CSS3.It works fine for the footer.But in the same page I have datepickers and other jquery widgets which popout from elements.
The problem occurs when scrolling.
On scrolling the widgets also move from their corresponding position that is not needed because if i have two datepickers one after other and open the first and scroll the calendar position may change to second one's calendar position and cause usability issues.
when removing the sticky footer style especially
body {
height : 100%;
}
everything works fine
Fixed the issue.
There was an
.mainContainer, .dashBoard {
float: none !important;
overflow:auto !important;
}
and on removing the overflow auto the calendars remained their corresponding positions on scrolling.
The example here .
But dont know the reason .Can any one explain the reason pls.
I am attempting to build a content navigation pattern that uses vertically stacked tabs to toggle the display of hidden content panels next to the tabs. At smaller widths, this pattern breaks.
Heres my fiddle: http://jsfiddle.net/jrotton/xCeX8/1/
It is somewhat responsive...but lets say I have 12 tabs and the length of their labels range from "Nursing" to "Architecture, Design, and Construction". This breaks when the screen gets below 500px or so.
I could:
.contextNav { width: 100%; }
ul.checklist-select li { display:inline-block; }
..it works but it not ideal when you have more than a few tabs.
I would rather hide the tab menu and change the panels into collapsibles with clickable h2's. It's also important that the pattern is screen-reader-accessible but I haven't made it that far yet.
Any ideas on how I could do this? Thanks in advance..
http://www.zurb.com/playground/off-canvas-layouts
Here's a few ideas...
Also I would say with what you have at the moment, floating that menu to the right on the mobile version isn't going to work. at the mobile size, those nav items should be 100% width, and the nav should be above the content, or should be another "slide panel".
Jquery mobile also has some very useful, very common design patterns built right in:
http://jquerymobile.com/