It seems that when the Modal is centered in screen it occupies more height than what is needed: Plunker
How to solve this?
Actually this is not an Issue. This will look normal on mobile device but, will create issues while viewing on desktop .
However, if you still want to solve this...remove min-height from modal class in ionic.css : 5298 line number.
Related
Code sandbox: Code sandbox
I have a column of Icon like this:
I css it with overflow-x:auto so that It can scroll the icon outside the container.
But when It bounced out. The overflow-y: visible didn't work for me so the Icon is still inside the box.
I tried using oveflow-y but didn't work for me. I coded a code sandbox so that you guys can have a look. Thanks for all of your help! Have a nice day!
For overflow-y to work, the height of the content in the element needs to exceed the specified height.
I just removed the height of container and slightly increased the padding of AppBar to make it work. Yes, you have to little workaround to meet the height of the container actual to the design.
Another solution, for now, I can suggest is to play with z-index property of the elements.
SanBox
from mozilla : "Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto."
source : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow...
You could avoid this side effect either by controlling the scroll another way (css and javascript driven scrollbar) (this would by the way avoid the different scrollbars on some browser which can be a little ugly (ie under edge), either by setting the container bigger, and setting a nested element for the background.
I'm trying to create an overlay that may contain its own scrollbar. The overlay should take up the full width and height of the screen, and scroll its own contents if they are longer than the page height.
My problem is I can't figure out how to stop the actual page from scrolling when the overlay scrolls. I want this to act like a Bootstrap modal.
Here is the fiddle with a code example: https://jsfiddle.net/r5jLcekb/
In the example, I'm using:
fixed bg-black bg-opacity-50 w-screen h-screen overflow-y-scroll
As you can see, the page scrolls it's contents, not just the overlay. I only want the contents within the overlay to scroll. Is this possible to do purely with tailwind?
I think you're looking for overscroll-auto -- see https://tailwindcss.com/docs/overscroll-behavior for more.
The way I approached this problem is by adding a class to the body whenever this overlay is rendered. Whenever your overlay element is mounted you need to execute a javascript code that does the following :
document.body.classList.add(`overflow-hidden`);
document.body.style.marginRight =
document.body.offsetWidth - widthBefore + "px";
The second assignment is optional and it's added to get rid of layout shift when scrollbar shows and hides
I had this same issue. My parent container was scrolling for the entire length of the site when the fullscreen overlay was active, but the content was not scrolling in the fullscreen overlay. I added overflow-y-scroll and overscroll-y-none to the fixed container and it worked nicely. Hope this saves someone some time :) Thanks Jas (comment above) for the point to overscroll.
See https://tailwindcss.com/docs/overflow
and https://tailwindcss.com/docs/overscroll-behavior
I have a big issue, i'm using a page builder to create four button with one modal per button. I want to display the modal in full screen over the FIXED header. Where i'm wrong?
Actual image:
expectation image:
There is a link to the page if wanna see the css:
I've tried with z-index, overflow-y but nothing seems work. Thank you so much
First make sure that the header has a lower z-index than the modalbox, then make sure modalbox has display set to fixed display: fixed; with width/heigh of 100%.
Remember to set top/bottom to 0 if you want it to occupy full viewport.
i am sorry to disturb you all, but i want to understand how a certain margin responsiveness works.
As you can see on this site http://www.trade-ideas.com/about-us/ the navbar, the paragraphs, the h1, h2 and the footer maintain the same left-margin as you resize the browser window (with firefox the effect it's more clear).
It's like when the elements reach the limit of the left margin (that is mean zero), they restart just on the same distance (the same margin-left) that they where before i was starting resize my browser width.
I've noticed that the navbar included in bootstrap also has this left margin responsiveness: as i resize in width my browser's window, the navbar continue to stay in the same left-margin range, restarting every time he reach the zero margin-left.
In fact, on this bootstrap page you can find the exact same effect in all the page's elements (the navbar and the div box on the body) : http://getbootstrap.com/examples/navbar/
With firebug i've tried to search what parameter set this particular effect, but i'm not an expert, and i didn't find a solution.
So, my question is: this left-margin responsiveness it's generated by a set of #media queries instructions to a set of width? Or there is something that i'm missing?
Thank you in advance for all the help that you'll give me.
Andrew
p.s.: i noticed that on http://getbootstrap.com/examples/navbar/ if i delete "margin-left:auto; margin-right:auto;" the effect that i need doesn't show up anymore.
I tried to create a div container with that margin auto on my site, but i was not able to ricreate the effect (maybe that "margin-left-right:auto" it's just a part of the effect).
The media queries are the ones that make sure the website is responsive. The example: http://getbootstrap.com/examples/navbar/ is using media queries to set the width of the container. If you set the media queries to change when the screen width is 700px and when you make the width of the screen smaller. The media queries will register the px of the screen and when the width of the screen is equal 700px the container will change.
I am using bootstrap modal in my application but when i see in mobile it's content is shows out of modal. I tried to use min width of modal so if modal show in mobile screen that width should not go beyond from min width.
but did not work.
Try max-width it will restrict the div that you are using to go beyond the limit.
I think in this case min-width is what you are having trouble with.
Try adding a div class="container" (with brackets, I don't know how to type it with them) to the inside of the modal.
Also, it might help if you could show me your code.