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.
Related
I have a Vue application that has menu items across the top in a nav bar fashion. The number of menu items changes based on the type of user logged in. Sometimes it might be 3 items, some times it could be up to 6 items.
I am trying to figure out how to determine when to switch between the desktop version of this navbar where the items are layed out as a row of buttons and the mobile version where the menus are hidden under in a slide in type drawer.
I have overriden the updated() life cycle hook to select the appropriate view on startup. I am using ref on a div that contains the menu buttons. From that I can get scrollWidth (the amount of pixels needed to display all the buttons) and clientWidth (the amount of pixels the div has been given). I have overflow: hidden.
From that I can determine when I need to switch from the desktop to the mobile view. I am using a resizeObserver to catch resize. This is working great to switch from desktop to mobile.
But the problem is that once I am in mobile, the desktop navbar isn't part of the dom so i don't know how many pixels are needed to render it so I don't know when to switch back from mobile to desktop as the user resizes the window bigger.
I also don't know how wide the menu buttons will be for different languages.
Any suggestions?
Thanks
Greg
But the problem is that once I am in mobile, the desktop navbar isn't part of the dom so i don't know how many pixels are needed to render it so I don't know when to switch back from mobile to desktop as the user resizes the window bigger.
So just hide them with visibility:
<div class='wrapper' :class='[mode]'>
<div class='items' ref='items'>
<div class='item' v-for='item in items'>Item {{ item }}</div>
</div>
</div>
.wrapper {
overflow-x: hidden;
pointer-events: none;
visibility: hidden;
&.desktop {
visibility: visible;
pointer-events: all;
}
}
.items {
display: inline-flex;
}
.item {
margin: 0 10px;
white-space: nowrap;
}
JSFiddle
Edit to add more information:
This answer caused me to rethink my approach to the question. I was looking at switching between two different navbar contents. But that isn't compatible with what is being suggested as an answer. The key to the answer is that both the mobile and the desktop navbar elements are going to be present at the same time. The difference is that the desktop elements are going to be squeezed into a smaller and smaller space and then made invisible using the visibility property.
Note about the visibility property: It leaves the element in the DOM and on the screen. The screen still renders the page as if the element was visibile but has transparent pixels. This is important to understand. It is also why the pointer-events have to be handled (turned on and off), because the elements are still there and can still be interacted with. So when they are hidden, we have to disable the pointer-events. And when the element comes back into visibility, we have to enable the pointer-events.
The other thing that you might have to look out for is that the answer uses offsetWidth. For simple navbar contents, this is fine. But in my case I have layers of flexbox and in the end the div that contained the menu was being squished due to flexbox and even though the overflow contents were being hidden, the offsetWidth was being shrunk. I switched to scrollWidth to get the true width of the menu and then it worked greata again.
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.
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/
Is it possible to have a Bootstrap 3 modal window that doesn't darken the screen and also lets users interact with the background if they want to? I use the default modal as well so I would want this functionality in addition, not instead of.
I've got an audio player inside a modal window and I'd like usersto be able to scroll the screen behind it (while the modal stays fixed in place) so they can access tracks etc..)
If you can interact with background then it's not modal.
Instead of a modal it sounds like you want an absolutely positioned div. Check out the "affix" object:
http://getbootstrap.com/javascript/#affix
You actually should prefer Avibodha's proposal!
But if you really want to use a modal, I've done some first approach here: http://bootply.com/109120
The key steps where:
disable the grey modal background
using the backdrop parameter, eg. in the button tag:
data-backdrop="false"
shrink the modals container
such that the underlying element is accessible
#myModal {
right: auto;
bottom: auto;
overflow: visible;
}
Now you can set this modals position with top and left
i am using jquery mobile and for header/footer i am using data-position="fixed".
However, when we scroll the page... the header footer goes away ands reappear when scrolling stops..
Is there a way we could just make it fixed on the screen an show all the time you are scrolling ?
I can only think of a way is to apply position fixed and not use jquerymobile for these elements..
I tried my best to get this to work. If you want you can delete the function that changes the header and footer class from .ui-fixed-overlay to .ui-fixed-inline and remove the webkit animation from .fade.in and .fade.out, but I've had no lock preventing the windows from disappearing. However, I believe JQM only recalculates the position of the header and footer elements after you scroll.
I put the following css in page div to remove the webkit animation.
.ui-fixed-inline {
opacity: 1!important;
display:block!important;
-webkit-animation-name:none!important;
}
.fade.in, .fade.out {
opacity: 1!important;
-webkit-animation-name:none!important;
display:block!important;
}
I know this is not what you want but it does speed up the reappearance of the header and footer elements (it looks a bit choppy.) Unless you want to rewrite the JQM javascript that controls the header and footer positioning, I don't think there is any easy way to do this as the JQM fixed position code is built to re-position after the user scrolls. I'll keep looking and edit this answer if I find a way.
A simpler version of Chase's code works fine for me:
/* sass - remove toolbar fade */
.nofade{
&.in, &.out {
-webkit-animation-name:none;
}
}
Note that tap-to-hide toolbars uses this same fade property, so the following is required:
$.mobile.fixedToolbars.setTouchToggleEnabled false # coffeescript