I have prepared modal that works perfectly fine in Chrome, but crashes in IE.
Could you please check what am I doing wrong? I tried multiple fallback-prefixes etc, wrapping with flex-row and so on.
http://plnkr.co/edit/Z2pQDsIMjqs4jWvytcVf?p=preview
.flex-container {
background-color: #ccc;
width: 100px;
max-height: 100%;
min-height: 200px;
overflow: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.middle {
flex: 1 1 auto;
overflow: auto;
max-height: 100%;
}
Version that works on Chrome satisfies all requirements:
modal has to be aligned horizontally in the middle
footer and header have static height
when window is too big, the modal should not stretch any more
when window is to small to show full modal, the scrollback should appear for "middle" content, so the hedr and footer will always be shown
modal should be as small as possible to not show any blank spaces under "middle" content, so I cant set height: 100% on any wrapper (that would solve issue for Ie, but not for me :( )
but on IE11, when .middle is to big it either overflows the footer or makes the scroll appear on the whole modal.
Related
I'm currently trying to create a horizontal card row for my website. The cards have a little transition where they lightly rotate and raise on hover, like so:
I want to make the row scrollable on the horizontal axis to make it responsive, but after setting overflow-x: auto; on the container, I noticed that the cards now get clipped, making the hover effect look pretty bad.
I've tried setting overflow-y: visible; on the container but it has no effect. Is there any way I can keep my cards from clipping but still leave the container scrollable?? Thanks in advance for your help.
You should wrap the elements in 2 divs. The first and inner will have a width(for horizontal scroll) that is greater than the viewport. And the second and outer div, will have a width, that is exactly the same as the viewport. The second div will then have the property overflow-x: scroll; overflow-y: hidden and it should work.
Example:
body {
width: 100vw;
height: 100vh;
}
outer-wrapper {
width: 100vw;
height: max-content;
overflow-x: scroll;
overflow-y: hidden;
}
inner-wrapper {
width: 150vw;
height: 100px;
display: flex;
}
cards {
// what ever properties you want
}
I have a modal implemented in CSS and it is getting cut off at the bottom of the page:
I've tried the following style attributes:
style = "max-height: 100%; overflow-y: scroll; margin: auto"
But I am unable to make the modal fit in the page, on mobile or desktop. How can I fix this?
Update:
Tried:
style = "max-height: 95vh; max-width: 95vw; overflow-y: auto;"
This gave some room at the bottom, but I still want the modal to fit in the page:
Edit 2:
I've updated my modal to:
class="modal" style="overflow-y: auto; max-height: 100vh; padding: 30px 0px 50px 0px; box-sizing: border-box; height: 90vh; z-index: 1000"
and my modal content to:
class="modal-content" style="height: 80vh; max-height: 600px; position: relative; display: flex; flex-direction: column; width: 95vw; max-width: 600px; border-radius: 4px; overflow: auto; box-sizing: border-box"
This seems to solve the problem I was having that caused the bottom button to get cut off; however, now, the header doesn't look right. It is pushed down. What can I do to fix this?:
CSS has the unit vh (viewport height) for this.
max-height: 95vh; /* 95% of the viewport's height */
This works on any device, mobile or desktop, with a supporting browser. Even Internet Explorer 9 supports it.
Regarding the overflow, I recommend you overflow-y as auto, not scroll. The difference is that scroll will always result in a scrollbar, even if not needed.
Remember to also limit the width of the modal. Long playlist names might, especially on mobile devices, lead to unwanted layout results otherwise.
For width, the corresponding unit is vw (viewport width).
This problem is purely CSS, but for the background I am using mdPanel, in material design for angularjs.
https://codepen.io/anon/pen/oJbPzX?&editable=true
If your browser is relatively small, and you put this height to a big value
.menu-panel .menu-content {
display: flex;
flex-direction: column;
padding: 8px 0;
height: 100px; <=== here
overflow-y: auto;
min-width: 256px;
}
You will have the menu outside of the window. This is an example, In my case, I have a mdPanel that is kind of big (you can simulate it by having a big height in codepen, and I would like those behaviors.
If the panel is entirely visible, don't show the scrollbar (EASY /
Already Implemented)
If the panel is smaller than the content, show scrollbar (EASY / Already Implemented)
If the panel is bigger or
going out of the viewport, than add a scrollbar to it so that I can
navigate the content (HARD / Not Implemented)
How can I do that?
Add Height with calc
.menu-panel .menu-content {
display: flex;
flex-direction: column;
padding: 8px 0;
height: calc(100vh - 98px);
overflow-y: auto;
min-width: 256px;
}
I want to create a page with a main area and a scrollable side area. When the page is too small, I want the side area to wrap below and the whole page to scroll instead. If possible I want to do this in pure CSS. I've come up with the following, which works in Chrome but not Safari. (In Safari, the whole page always scrolls.)
How do I fix this, and more importantly, have I misunderstood flexboxes somehow?
html, body, main {
height: 100%;
margin: 0;
}
main {
display: flex;
flex-flow: row wrap;
overflow: scroll;
}
content {
min-width: 600px;
flex: 9999 1 auto;
background-color: #ffa;
}
aside {
flex: 1 1 auto;
overflow: scroll;
background-color: #aff;
}
<main>
<content>
main
</content>
<aside>
side
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10000<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10000<br>
</aside>
</main>
View full page to see responsive behavior, or see this fiddle.
I need to put a wide and long table in a relatively short and narrow container, and I want to keep the table heads always visible. I've got this to work as you can see in the JSFiddle below.
http://jsfiddle.net/chemLk1z/1/
The important code is this:
<div id="h">
<div id="v">
<table> [... 10 rows of content ...]
</div>
</div>
With CSS:
#h {
width: 300px;
height: 100px;
overflow-x: scroll;
overflow-y: hidden;
}
#v {
width: -moz-fit-content;
width: -webkit-fit-content;
height: 100px;
overflow-x: hidden;
overflow-y: scroll;
}
table {
width: 500px;
/* Height will be more due to content. */
}
As you can see in the JSFiddle, the scrolling experience on Chrome is great. But on Firefox (v38.0.5 Mac OS X) I can't scroll horizontally and vertically at the same time, I need to wait for 10 seconds or so before it allows me to scroll in another dimension.
Why is this, and what can I do to fix it?