How can I get all elements to fit in a container element that is fixed to the size of the window?
I have a container element that is fixed position and flexbox, it does not stay within window. The menu is 50px and I want the main element to fill the remainder of the window height.
I have a container my-app and inside it, 2 vertically stacked elements (flex-direction = column). It works as expected in Chrome but not Edge or Firefox.
my-app {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
app-menu {
border-bottom: 2px solid black;
width: 100%;
height: 50px;
background: lightcoral;
box-sizing: border-box;
}
app-my-view {
display: flex;
flex: 1;
width: 100%;
background: lightgreen;
}
https://stackblitz.com/edit/2-column-scroll-v2
I've got it working by using a fixed position menu sticking to the top and using padding to offset menu height in the main content area. However I thought it would be better to use approach with 2 stacked elements without using fixed menu .
See here: https://stackblitz.com/edit/2-column-scroll-v1
Related
I have a sticky navbar that is vertical but when the screen is too small I want it to be scrollable. Now I can only get to see the bottom categories in navBar only when I scroll to the bottom of the page and then it scrolls.
On the second photo I'd like it be scrollable when o hover over it with my mouse.
I've tried:
Setting a height to it but the categories change so the height is changes.
Setting height to fit content
Setting max-height to max-content
Without a specific code sample I just give you a "random code sample" mimicing the navbar. You have to implement the code yourself.
Add a max-height: 100vh; to the navbar. This will limit the navbars height to the height of the browser window height.
Allow a vertical overflow and scrollbar by using overflow-y: auto; on the navbar. In combination with the max height, it allows an overflow of the navbar itself instead of resizing the height.
nav {
max-height: 100vh;
overflow-y: auto;
}
/* for styling purpose only */
body {
margin: 0;
}
nav {
width: 150px;
}
nav a {
display: block;
box-sizing: border-box;
width: 100%;
text-align: center;
background-color: blue;
color: white;
text-decoration: none;
padding: 1em;
border: 1px solid darkblue;
}
<nav>
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7
Link 8
Link 9
</nav>
Simple fiddle : https://jsfiddle.net/75zwpy3b/2/
The navbar is styled as
#navbar {
background-color: #333;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
/* width: 100%; */
position: fixed;
}
As you can see the width has not been applied but position:fixed is applied, the navbar contracts to fit its content, but if i comment out position:fixed then suddenly the navbar goes all the way from left to right.
Why does position:fixed requires width:100% to go with it ?
Since it´s fixed it doesn't know of its parent elements or siblings so it just fits the width to its contents. One solution is to go width: 100% or left: 0; right: 0;
Since you are setting a fixed position it needs a height and width property since there are no other defined elements to go off of. If you want the nav to scale across the screen then use width: 100% but if you wanted a specific fixed nav size you could do width: 800px.
I'm trying to make a chat layout. So i have 3 divs, activeUSer - top, messages middle (has to fill the space between 1 and 3), actions - bottom
Now, I've put flex-direction row. and it works fine. I needed the bottom div to grow if the input grows (if you have 2 or more lines of writing)
It worked ok untill I added display:flex to the Actions div (bottom). I needed another flex layout for input and buttons. Now it does not care for the padding i've set on the last div
Here is my codepen https://codepen.io/capraruioan/pen/XKWxrV
#content {
height: 300px;
display: flex;
flex-direction: column;
}
.activeUser {
height: 66px;
background-color: yellow;
}
.Messages {
flex: 1 1 100%;
}
.Actions {
flex-grow: 1;
display: flex;
padding-top: 2px;
padding-bottom: 20px;
}
.aa { //the inputbox
border: 1px solid black;
min-height: 10px
}
fixed it by letting display default on the 3rd div and placing a div with display flex inside
I have the following arrangement via flexbox with flex-wrap and elements able to stretch using flex-grow:
Each item has a margin on all sides. This is to separate the items from each other, but the side effect is the whole block has margins which I'd like to collapse. It could be done with rules like nth-child(-n+3) { margin-top: 0; } but because the container size could vary, there could be any number of items per row and any number of rows. So I'm wondering if flex-box has any way to collapse the outer margins in a setup like this, while retaining the margins between items.
JSBin
The HTML is simply 6 items inside a container.
The CSS (Sass) is as follows:
.container
display: flex
flex-wrap: wrap
background: #eef
align-items: stretch
.item
flex-grow: 1
margin: 1em
border: 1px solid black
padding: 1em
min-width: 6em
It's a bit of a hack, but you can add a negative margin on the flex container to cancel out the items' margins along the edges, and then move its "background" styling to a parent wrapper-element.
Updated JSBin
Updated CSS (SASS):
.wrapper
background: #eef
border: 1px solid darkgray
.container
display: flex
flex-wrap: wrap
margin: -1em
.item
flex-grow: 1
margin: 1em
border: 1px solid black
padding: 1em
min-width: 6em
Another hack is to split the margin responsibilities between container and item, each caring about half (say $margin is 1em):
• container cares about its bottom margin and half left + half-right of items:
.container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap; // Go to next line if not enough space
padding-top: 0; // Let items handle top
padding-left: $margin/2; // Handle half of left
padding-bottom: $margin; // Handle bottom
padding-right: $margin/2; // Handle half of right
}
• items care about top and half left + half right:
.item {
flex-grow: 1; // Use available space
margin-left: $margin/2; // Handle other half of left
margin-right: $margin/2; // Handle other half of right
margin-top: $margin; // Handle top
}
Regarding items size, you can set a width if you want items to look the same.
.item.fixed {
width: 15em;
}
See a demo here.
I'm implementing a simple ribbon-like heading that extends off the content area (both left and right) displaying a 3d effect with an image background (no css3 tricks).
I tried floating, negative margins and finally relative positioning but my problem is that all the solutions I tried increased the content's scrollable width (extending it to the right). I'd like to keep my ribbon as a "background effect" keep the content's scrollable width.
Check out my simplified working example: http://jsfiddle.net/c5cVG/16/
body {
background: blue;
}
body>div {
width: 200px;
margin: 0 auto;
background: white;
}
body>div>p {
padding: 5px;
}
body>div>h2 {
overflow: hidden;
padding: 10px 20px 5px;
background: red;
width: 190px;
left: -15px;
position: relative;
}
If you set the viewport width below 215px, you can see that the left-edge extension of the red "ribbons" stay outside of the viewport, and cannot be scrolled inside using the horizonal scollbar.
I'd like to get the same effect on the right-edge extension (overflowing the white area), but it pushes the right edge of the scrollable area and makes itself scrollable.
Any help or demo would be appreciated.
OK, I found a solution that looks fine for me in this thread: https://stackoverflow.com/a/2650215/2084434 (answer by Nikolaos Dimopoulos)
Wrapping the whole content in another div and applying
#wrapper {
width: 100%;
overflow: hidden;
min-width: 200px;
}
works OK.
Here's the updated fiddle: http://jsfiddle.net/jJaxp/2/