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;
}
Related
I am trying to add scroll bar seperately to side bar and main content using css. I tried adding overflow variables to both the div container but it is adding the scroll to whole page which is common for both sidebar and main content. Side bar and main content are in a row using flex.
Note : I'm very new to SCSS/CSS and its react app where I'm trying out to add some styling.
Code Sandbox : https://g0mbs.csb.app/
The element .main-content-with-side-bar .main-side-bar needs a height set.
IE:
.main-content-with-side-bar .main-side-bar {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow-y: scroll;
position: relative;
height: 950px;
}
If you don't know exactly what height it needs to be via px you can use calc() IE height:calc(100% - 300px); OR you can set the height dynamically after the page loads with React/ JavaScript / jQuery etc etc etc.
Overflow only works when the content exceeds a certain point which in this case has to be forced with height.
You can add the following properties to these css classes:
.main-content-with-side-bar .padded-side-bar {
...
height: calc(100vh - 42px);
overflow: auto;
}
.main-content-with-side-bar .padded-main-content {
...
height: calc(100vh - 42px);
overflow: auto;
}
Or if you are using SCSS:
.main-content-with-side-bar {
.padded-side-bar {
...
height: calc(100vh - 42px);
overflow: auto;
}
.padded-main-content {
...
height: calc(100vh - 42px);
overflow: auto;
}
}
And that should certainly do the job.
Edit: Updated the height as height: calc(100vh - 42px); where 42px is the height of your header.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have the following layout with a scrollable grid area using overflow on the parent element.
https://jsfiddle.net/riri78/cvghazqf/139/
It work while I have the height to 300px on the grid. But if I set the grid to something a bit higher in height it squeezes and makes it shrink in to as small as it can be.
I can't really figure out why that is, shouldn't be overflown not matter what the height it has?
Showing a header with correct height
Showing a squeezed header
In order to fully master flexbox, I would suggest you take a look at these properties:
flex-direction, flex-grow, flex-shrink, flex-basis and experiment with min/max value settings.
Flexbox might be powerful on its own, but it is even more powerful when paired with CSS media queries. When working with smaller viewport devices, such as mobile phones, it could come in handy to work with some pixel specifications for the min values (heights especially).
This could be a small example of what you are trying to achieve:
#main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:flex-start;
flex: 0 0 100%;
width: 100vw;
height: 100vh;
background-color: #FFFFFF;
padding-left: 15px;
padding-right: 15px;
overflow: hidden;
}
#main .header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex: 0 0 100%;
justify-content: space-between;
align-items: center;
min-height: 15%;
max-height: 25%;
background-color: red;
}
#main .container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 0 0 100%;
justify-content: flex-start;
min-height: 85%;
max-height: 75%;
}
#main .container .left-menu {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 0 0 15%;
min-width: 15%;
max-width: 15%;
min-height: 100%;
max-height: 100%;
background-color: green
}
#main .container .content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 0 0 85%;
min-width: 85%;
max-width: 85%;
background-color: purple;
}
<div id="main">
<div class="header"></div>
<div class="container">
<div class="left-menu"></div>
<div class="content"></div>
</div>
</div>
Notice that I am working in percentages, which is relative to the viewport dimensions. This means that smaller the scale, the smaller the elements become.
Best way to tweak the scales we want at smaller viewport sizes is what I mentioned earlier. Make use of min-height and min-width with pixel value instead of percentages.
One of the great things with a flexbox layout, is that it is easy to make use of the best practice, "mobile first" apporach.
First write up your CSS so that your grid look appropriate for a minimum of viewport of 320px in width. Then use media queries with min-width specifications for the adjustments you might need at certain breakpoints.
Mobile viewport min-width: 320px to 767.98px.
Tablet viewport min-width: 768 to 991.98px.
Desktop viewport min-width: 992px and forward.
Once you play around more, you'll easily see where in detail you need pixel values, and where you need percentages. If you have Bootstrap incorporated, you have a built-in grid system available to you through classes, .row and .col. If you have Bootstrap, I would also suggest you use rem for general padding purposes.
Codepen example here.
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).
I'm attempting to create a "bookshelf" using html and sass (Note: this is heavily based on http://ameijer.nl/2013/03/bookshelf-css-only/) You can see my version of the concept here:
https://mainstringargs.github.io/bookshelf.html
I'm trying to only show the horizontal scrollbar when necessary for the particular "bookshelf" -- for example, in the "Read" shelf above -- but not have it appear when not necessary -- see "Reading" & "On Deck" at the link.
I expected using "overflow: auto;" would give me this effect, but that seems to cause the scrollbar to always appear.
The relevant sass file is here: https://github.com/mainstringargs/mainstringargs.github.io/blob/master/src/styles/_bookshelf.scss
How can I only show the horizontal scrollbar when needed for each particular bookshelf?
As an example, it currently looks like this with horizontal scrollbars on both displayed bookshelfs even when not enough books:
I want it to look like this mockup (Note the bottom bookshelf has no horizontal scrollbar because there aren't enough books there, but the top one does because there are enough books to scroll):
You can use flexbox and let .books overflow vs .shelf just be sure to remove the width: 1470px; from .books, .shelf:after:
.shelf {
height:auto;
overflow: hidden;
padding: 0;
}
.books {
position: relative;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
overflow: auto;
align-items:flex-start;
justify-content: flex-start;
height: 420px;
z-index: 1;
}
.books, .shelf:after {
/* width: 1470px; */
box-sizing: border-box;
padding: 40px 30px;
margin: 0;
width: 100%;
}
.book {
flex-shrink: 0;
}
By looking at your code if you only want to apply a horizontal scroll when necessary and not vertically.
Use the following on your class name:
.books {
overflow-x: auto; // Auto horizontal
overflow-y: hidden; // Disable vertical scrolling
}
Try that see if it works. No need to add scroll but let the browser decide with the "auto" set.
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.