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/
Related
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.
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;
}
I am using bootstrap Clock Picker plugin.
When I use picker in modal, it is not auto adjusting when it is in bottom of the modal. so that I am not able to view the picker completely. When it is in the bottom of the page, it should come on top of the text field automatically.
Please help.
I am not able to fix.
Please suggest.
Thanks in Advance.
use this code to fix your issue.
sometimes when you are multiple layers of Div or any Tags. then this type of issue comes or some CSS code of an Element always force to come in top or Front. then that case this example will very helpful. In some solutions to this problem, I saw some developers used different codes like they are finding DIV Class name and setting Z-index. that also works.
.popover {
z-index: 215000000 !important;
}
When you use clock picker in modal then you will be not able to view it because of the z-index of the modal, you have to give z-index to clockpicker also as below, please add this below style in your css.
.clockpicker-popover {
z-index: 999999;
}
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.
I have an app I have deployed to the iOS and Android stores. Now I am taking the same thing and building a version that also works on the desktop in Chrome/Safari. For this I used the code in this thread
http://www.sencha.com/forum/showthread.php?110792-Add-support-for-mouse-scrolling-(for-development)&p=927483#post927483
to fix the scrolling and now need to figure out how to fix the scroll bar to support dragging and dropping. Any pointers on how this could be accomplished - am going to try to figure it out, but if someone has done it before that would help.
I initially tried to go down the ExtJS path for the desktop app, but found that there are enough differences between the two frameworks that it becomes pretty expensive to develop and maintain, so want to put out a V1 out there quickly and then figure out how to handle this in the long term if I have enough interest to put out one for IE and FireFox - and with desktop based controls.
Normally the scroll bar in sencha touch will be hide by default and fade out after you finish dragging a long list or a panel... If you want to make your scroll bar always visible you can set this in your css or scss file:
.x-tabpanel .x-scroll-indicator {
opacity: 0.5 !important;
z-index: 0; // Make scroll bar draggable
}
Maybe I'm understand your question wrongly but hope it helps :)