Why does my navbar jump a little to the right when a drop-down is selected? Looks like some padding is missing on :hover perhaps. Any help would be appreciated. Thanks
http://www.85widening.com/default.html
It has to do with Bootstrap hiding the vertical scrollbar on body when the modal opens. It occurs only when you have a fixed navbar and body/modal content that require vertical scrolling.
Based on what I recall and found, it's a bug with Bootstrap 3 that I don't believe was ever resolved based on this GitHub issue.
Most workarounds seem to involve JS to add padding-right (like 15px) to the navbar when the modal opens or to override the overflow: hidden property the modal-open class that Bootstrap adds to body when you open a modal. The downside of this is you will have two vertical scroll bars (ugly). Either add the workaround or remove the fixed navbar. I haven't moved on to Bootstrap 4 yet but maybe they've addressed this.
Related
I put terms and condition in popover to show it for users.
When popover present part of content visible not all content and can not scroll to show all content.
After searching I find this issue here. and try their solution but not work
I solve this issue via adding all content in
<ion-list> inside <ion-content>
When opening a Bootstrap modal (eg the GetBootstrap modal sample), the rest of the page is subtly faded out to draw attention to the modal:
How is Bootstrap accomplishing this? It seems that the class .modal-open is added to the body, but this only sets overflow: hidden. What else is Bootstrap adding/changing to cause that effect? Is the positioning of the modal within the page important?
(This is a roundabout way of asking why my modal isn't fading out the background when it's open. The code is too complicated to post, and presumably there's a flaw in my markup or CSS. If I knew how Bootstrap was accomplishing the opaque background I may be able to debug why it's not working for me.)
Bootstrap add a div and adds some classes to it. Which has black background with .5 opacity set. And add style to set height as viewport / browser screen.
<div class="modal-backdrop fade in" style="height: 984px;"></div>
If your modal is not fading out, check if you are using :
display:block!important /* notice !important */
When the modal appears, it adds a div container with the class modal-backdrop fade in before the modal-dialog container.
Using version 2.1.0 of durandal I found a problem I am not able to fix it seems.
I'm using a dialog but the content is too big for the screen, the buttons - which are at the bottom of the screen - kind of fall off, under the screen.
This mostly comes from the fact that I use visible bindings using knockout the show and hide elements on the dialog making durandal position it wrong and/or not showing a scrollbar for the dialog/screen when it overflows.
Does anyone know how to solve this by either getting a scrollbar or repositioning it on the screen?
I have tried the reposition method but to no success.
Moreover I tried both of these:
Responsive dialog
Durandal modal dialog
Both did not help out and I'm still stuck on this.
Anyone got any idea how to get the scrollbar on the dialog or on the screen so I can actually see my buttons by scrolling? Or is there a better way to get around this?
I'm not sure this is what you want
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
http://jsfiddle.net/farizazmi/5Lnqurar/
I have a relative div above a fixed one which acts like a navigation bar.
I want to be able to scroll past the relative div before the fixed div starts having to scroll here is my website.
as you can see from just scrolling on the site the sidebar doesn't work as intended.
Try using JavaScript to detect the scroll position of the window and then change the CSS to start scrolling like a fixed div.
Another tip, the the fixed div which contains your projects on the home page lays over your footer when you scroll to the bottom.
Use JavaScript to detect if the user is at the bottom of the page or not and then set the CSS of it to have a margin from the bottom of the page.
Hope I helped.
I'm using YUI 3 tabview, and my page appears without tabs very briefly, and then the tabs appear. I found this page:
http://yuilibrary.com/yui/docs/widget/
Hiding Progressively Enhanced Markup
which seems relevant, but I'm not sure how it applies to tabview.
Is there a way to prevent the display of the untabbed list until the tabs are ready?
Thanks very much!
The default style of the tab container could be set to display:none; and on your tab view creation you could then remove the display:none property
You could bind to your tabview render event and set the display on that.