I'm trying to create a modal that has contents of dynamic height that needs to be scrollable if the height of the content goes beyond a certain value but also needs to have certain elements overflow it. To be specific, there are dropdowns within the modal that I don't want to expand the height of the modal but instead overflow the modal's boundaries if they happen to be at the bottom of the modal.
Setting overflow: visible on the modal content achieves this if the modal height is small but then if the height of the modal content increases beyond the height of the viewport, it's obviously unscrollable because of the aforementioned overflow: visible.
I've thought about checking the height of the modal with JS to decide whether it should be overflow: auto or overflow: visible, however that seems like a wonky solution and it means that if the modal is already near viewport height and I set the overflow property to auto to enable scrolling, I still lose the effect I'm looking for, which is for open dropdowns to go outside the modal's boundaries.
Is there a more elegant solution to this?
Related
I am working on a web app. I use a NavBar and on some pages I have to center the content (vertically and horizontally).
To make the navbar + the rest of the content occupy 100% of the page (more if the content is big) and to make the centering work, I do:
html,
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
Without the flexbox, a scroll appears on my page and I can scroll just past the navbar + the content is not centered - it will be after I scroll down. And this happens even when the centered content is just a single little <span>. So I thought the flexbox is the answer here, easy. But I stumbled upon another problem:
I sometimes display card-like divs - rounded borders with a header which is filled with a color. Background color fill + border-radius don't play well together (basically the rounded edges disappear as the color overflows the borders), so I use overflow: hidden.
The problem that I encountered is that if I do three things:
I set the flexbox for html and body tags like I've shown above
I set overflow: hidden for my div
I add more content to the div - so much, that it doesn't fit on the page and a user would have to scroll it vertically
then the scroll doesn't appear and the content inside my card is cut/truncated just before the page ends - so no scroll. And no content.
This is the codesandbox example: https://codesandbox.io/s/angry-pare-1qokr.
To see what I mean try either:
removing the flexbox props from html and body (you can leave the height and the margin)
removing the overflow: hidden from .card
If you do, then boom, scroll appears and the content is no longer truncated.
And I cannot proceed without any of them because I either:
lose the ability to not have the scroll when having just the navbar and some <span>
or
lose the rounded edges, because the card's color will overflow (I didn't show it in the example, but I use it)
The .navbar and .center classes are there just to show that:
this is how I basically define the navbar in my project (although here I defined the height as fixed pixels, normally I don't do that so I cannot easily, I guess, calculate the height for the rest of the content)
the .center class is used by me to center the whole content below the navbar, when I want it to be centered
So finally my question is: can I somehow preserve the ability to have flexbox defined for my html and body tags, have overflow defined for some long divs and make it so the div's content isn't truncated when it becomes too long - basically the page would render a scroll then?
P.S If the solution would be not to use flexbox to make the centering without the scroll work - perfect for me, if you guys know how to do it without flexbox (as without the flexbox, my issue with truncated div content gets solved)
I'm using full-screen modals on my site on mobile. The problem is that touching the modal will cause the body page to move even though it's overflow:hidden;
Here's what bootstrap says about that:
Support for overflow: hidden on the element is quite limited in
iOS and Android. To that end, when you scroll past the top or bottom
of a modal in either of those devices' browsers, the content
will begin to scroll.
What can I do to prevent that?
Setting the body to position:fixed causes the scroll to jump to the top in an ugly way. What's the best solution if anyone came up with one?
I had the same question myself before.
What I did is changed the body to overflow:hidden and fixed height equal to modal height and remembered document scroll position. After closing the modal, I've applied remembered scroll position back and height to auto.
It is so complicated because I needed my modals to be bigger than window and I wanted to be able to scroll the modal.
I'm attempting to expand and transition a button into a modal that's 60% of the height and width of the window when it is clicked. Here's a CodePen of my work so far: http://codepen.io/anon/pen/WbNONa. The problem I'm having is that the position property can't be transitioned. Both the button and the modal (which is underneath the button) are absolutely positioned inside the button wrapper to make both elements look like one element. When the button is clicked, the modal should expand to a fixed position on top of the overlay.
The issue is that the positioning immediately changes from absolute to fixed, so the modal just looks like it's contracting from the full window size. If you delete the position: fixed property on the #btn-content.active class, you can see what I'm essentially trying to do. How can I emulate the transition of the position property? If that's not possible, how can I have the modal transition to a height and width that are relative to the size of the window? Thank you kindly for your time.
I am using Twitter's Bootstrap fluid layout for my site. I have a collapse/expand accordion and inside of one of the sections, I have three columns that I would like to be separately scroll-able. These columns currently expand to the full height of their content, but I'd instead like them to expand to the viewport (viewable page) and show a scrollbar to get to the rest (when it is not already all visible).
The scrollbars will show up if I set the column to: overflow: auto; height: 500px;
I don't want to set the height; however, I want it to be set to whatever fits in the viewport.
I understand you can set a div's height to 100% in order to expand to the viewport; however, it has to depend on a containing elements height. I'm not sure how to deal with this within Bootstrap.
appart $('#collapseOne').on('shown', sizing()); not resizing properly if you resize after loading.
This is working pretty much ok on desktop.
http://jsfiddle.net/baptme/MwzvD/17/
I want to make a div that expands to reveal its content when clicked. What I did to date is:
Created a div, set to overflow:hidden
Created a JS function that toggles the height of the div between "minimized" and "maximized" (20px height and XYZpx height).
So far everything works, except I don't know how to get the height of the content inside my div so I can make the div resize to fit the content exactly. So in essence I have hidden content that overflows from the 20px "minimized" div, and I can expand the div to reveal the overflowing content but I don't know by how much to expand it.
Do you have an idea how I could do this?
Thanks in advance!
Here's my stab at the problem. I wasn't sure exactly what you were trying to do.
http://jsfiddle.net/Mw6Ys/2/
Can't you just remove the overflow hidden and height css. And the div will resize the correct height. And if you need to find the exact height. Use javascript to remove the overflow:hidden and height. Then measure the offsetHeight and set that to the height. Though if you are doing this it might be better to remove the element from the DOM then place back in once you are done.