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
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.
When in mobile view using Owl Carousel (Version 2 ) some of my sliders take up near the whole screen.
The carousel uses touch to slide left and right fine however when doing so the user cannot scroll the page up and down which makes it difficult to navigate the to the rest of the page.
Is there a way so that while sliding the scrolling for the page is still active?
Seems i had the touch-action property set to none disabling scrolling and zooming etc when touching on the items within the slide. I had to remove the below although i don't think this is default and i added it in at some point for some reason that i can't remember.
.owl-item {
touch-action: none;
}
In my application, in a page I have a carousel in toolbar, to have a top fixed position.
The Carousel is not visible until I put a position:fixed in a div containing the carousel.
In this page I have a sliding menu too.
When I slide the sliding menu, the carousel remains fixed in the view, over the sliding menu, instead to swipe right in the page.
I experienced this problem in Android default browser and like a builed app in Android. In the desktop browser (Firefox and Crome) it's all ok.
How can I solve this problem?
I solved my carousel issues with the sliding menu just by containing in in an column. If you have to, you may have to adjust the width to be under the set for the sliding menu. It may even work with width being set at 100% but, putting it in its own column or row helped me out a lot avoiding those overlapping issues.
Example:
<ons-row><ons-col width="10%"></ons-col>
<ons-col width="80%"><br /><h4>Carousel</h4>
<ons-list-item>
<ons-carousel swipeable overscrollable auto-scroll style="height: 50px; width: 100%; align: center;" initial-index="0" swipe-target-width="100">
<ons-carousel-item class="button--menu">
Item 0
</ons-carousel-item>
<ons-carousel-item class="button--menu">
Item 1
</ons-carousel-item>
</ons-carousel>
</ons-list-item>
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/