I have four divs, three of which are in the right position so far, but one div doesn't want to cooperate with me. Here's a diagram:
How would I go about making the blue div fill up the entire space of the red div?
This is what I want it to look like:
The red div has this css to make it have a scroll wheel when necessary:
.thread-container {
flex-grow: 1;
overflow-y: scroll;
position: relative;
}
The blue div has this css:
.thread-container .thread {
position: relative;
width: 100%;
min-height: 800px;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #b3b2ca;
background: #dcddf5;
}
I tested out adding height: 100%; to the blue div, but that made the div unable to scroll vertically.
If necessary, here is the css for the green div:
.message-input {
background: white;
color: #484d79;
box-sizing: border-box;
height: 10vh;
max-height: 65px;
}
By the way, I'm working with React here.
Thanks for reading!
~ Matthew
Related
I have a page-wide wrapping div that has flexbox alignment to center:
.app_container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-y: auto;
overflow-x: hidden;
padding: 10px;
}
In this wrapper, I have a menu that can vary in height as the user expands submenus. The problem is when the menu becomes vertically bigger than the window height. Some parts of the menu gets cut off at the top.
Image: https://imgur.com/a/x00tnoJ
One solution that I found was to simply get overflow: auto on the menu. But that causes the scroll bar to appear on the menu, not on the page wrapper. I want the scroll bar to be on the page wrapper.
Image: https://imgur.com/a/0eZM5Iq
Don't think it is relevant, but I use React.
Here is codepen: https://codepen.io/GuacomoleCyclone/pen/xxEoary
EDIT: I've stumbled upon a solution. I've added this and it solved all problems:
html, body{
display: grid;
}
If I understand correctly what your codepen is showing, the issue seems to be coming from setting the width and height on the html element. You want to change:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
to
html, body {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100%;
}
I want to center .donut-graphs inside .dashboard horizontally, so the space between the right edge of the sidebar and the left edge of .donut-graphs is the same as the space from the right edge of .donut-graphs and the right edge of the screen. I have managed to do so, but I had to remove position: fixed from .navbar. The problem is, I can't do that because my sidebar has to stay on top of the screen when you scroll up/down, and with position: fixed on .navbar, the graphs aren't centered properly.
HTML:
<div class="container">
<div class="navbar">
</div>
<div class="content">
<div class="dashboard">
<div class="donut-graphs">
<div class="dashboard-income">
Div 1
</div>
<div class="dashboard-overall">
Div 2
</div>
<div class="dashboard-spent">
Div 3
</div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
}
.container {
display: flex;
align-items: stretch;
max-width: 100%;
min-height: 100vh;
}
.navbar {
background-color: #ddd;
flex: 0 0 230px;
position: fixed;
height: 100vh;
width: 230px;
}
.content {
flex: 1;
overflow-x: auto;
text-align: center;
}
.donut-graphs {
display: inline-flex;
border: 1px solid;
margin: 50px auto 0;
position: relative;
text-align: left;
}
.dashboard-income,
.dashboard-overall,
.dashboard-spent {
height: 256px;
width: 357px;
display: inline-block;
}
.dashboard-income {
background-color: green;
}
.dashboard-overall {
background-color: blue;
}
.dashboard-spent {
background-color: red;
}
How can I overcome the issue?
Demo
position: fixed puts element above everything. That element won't attach to any element in body because it is the way that works. It only becomes dependent of viewport
What you want to achive could be done with position: absolute but parent (whose child you want to center) has to be position: relative for this to work.
Read more about positioning elements in css here
.content { padding-left:230px; }
Should do the trick.
Assigning your navbar a fixed position takes it out of the document flow, so when centering your donut graphs the browser doesn't take the navbar into account.
Giving the .content element a padding equivalent to the width of the navbar makes up for this.
The only problem with this approach is that if .navbar changes dimensions, you'll need to change the padding on .content to match.
So I'm using flexbox to create the grid unfortunately, I'm a little stuck as to how to make the divs stack on top of each other. This is what it looks like when I hide overflow:auto and add position relative to the carddiv. I believe the divs are stacking on top but they don't look the right way.
this is what it looks like:
Image Link
https://imgur.com/a/1KsJDh7
What I want it to look like is this:
Except positon:absolute makes everything disappear.
I'm new to css/html so I'm not exactly sure what I'm doing wrong.
https://imgur.com/a/mrLsTdX
App.css
* {
/*overflow:auto*/
}
.App {
/*display: flex;*/
/*flex-wrap: wrap;*/
}
Card.css
.container{
background-color: yellow;
display: flex;
flex-flow: column;
text-align: center;
position: relative;
margin: 10% 10% 10%;
}
.cardDiv {
height: 100vh;
position: absolute;
}
.cardPicture {
background-color: blue;
height: 50vh;
}
.cardDescription {
background-color: green;
height: 50vh;
}
However, without position:absolute it looks like this which is what I want it to look like except it doesn't stack. I assume the first version is stacked which is why it only shows one div?
The code below is for the second image link:
https://imgur.com/a/mrLsTdX
App.css
* {
overflow:auto
}
.App {
/*display: flex;*/
/*flex-wrap: wrap;*/
}
Card.css
.container{
background-color: yellow;
display: flex;
flex-flow: column;
text-align: center;
position: relative;
margin: 10% 10% 10%;
}
.cardDiv {
height: 100vh;
}
.cardPicture {
background-color: blue;
height: 50vh;
}
.cardDescription {
background-color: green;
height: 50vh;
}
The cardDivs are being generated through a map function that is inserting the divs.
The html looks like this:
<div className='container'>
<div className="cardDiv">
<div className="cardPicture"></div>
<div className="cardDescription"></div>
</div>
</div>
Does anyone have any idea on what I could do make the divs stack up without disappearing?
I think the issue is the combination of a flex container and flex items that have been set to absolute positioning. When you set position: absolute on .cardDiv it takes all the cardDiv elements out of the flex flow, and without any width or content, the cardDiv's disappear. As an experiment, take your first CSS block and add a width (say, 50px) to .cardDiv. You should see the cards reappear, stacked and taking up 50 pixels horizontally.
When you set a element to display: flex or display: inline-flex, all the direct children of that element become flex items. You can see all the things that does to the children by default here, and the purpose of the various flex properties are there to manipulate how the children will be displayed along the axis you specify. If you set one of these flex-items to absolute positioning, however, it takes that element out of that flex configuration.
If I understand what you want correctly, I'm not sure you need the container to be flex at all. Try taking the flex properties out of the container, setting the cardDivs to position:absolute and setting width and height to conform to how much of the screen you want filled.
.container {
position: relative;
margin: 1rem;
}
.cardDiv {
position: absolute;
width: 100%;
height: 100vh;
}
.cardPicture {
background-color: blue;
height: 50%;
}
.cardDescription {
background-color: green;
height: 50%;
}
Let me know if this is not what you were looking for-- I figure you can adjust it to how you want the cards to appear. But that's them stacked and split 50-50 between picture and description.
I am making an animation that involves a set of four divs inside one larger div. The four divs are too large to all fit in the one div at once, so I want to be able to specify the position at which the larger div should start. For example, here I have four boxes inside the div. From top to bottom, the boxes are green, purple, pink, and blue (you can't see the blue in the current jsfiddle because it is cut off). I would like the BOTTOM of the larger fulldisplay div to align with the MIDDLE of the blue box, and everything else to fit above hat until it is cut off at the top of the div. Eventually I am going to be implementing a custom-made scroll button (as I don't want it to look like the overflow:scroll one) but for now I am just trying to get CSS to display the inner divs the way I want.
JS FIDDLE: http://jsfiddle.net/o33gw35w/
CSS:
body {padding: 0; margin: 0; height: 100%; overflow: hidden; font-family: Helvetica;}
.nameblock {
height:10%;
width: 30%;
position: absolute;
background-color: yellow;
}
.fulldisplay {
height:90%;
width: 30%;
position: absolute;
overflow: hidden ;
}
.spacer1 {
height:40%;
position: relative;
background-color: green;
}
.spacer2{
height:40%;
position: relative;
background-color: purple;
}
.spacer3 {
height:40%;
position: relative;
background-color: pink;
}
.spacer4{
height:40%;
position: relative;
background-color: blue;
}
HTML:
<div class="nameblock"></div><br/>
<div class="fulldisplay">
<div class="spacer1">
</div>
<div class="spacer2">
</div>
<div class="spacer3"></div>
<div class="spacer4"></div>
</div>
</body>
Apologize if I got the question wrong as I am not quite sure what you are trying to do, but if you want to have a way of ordering s dynamically, you could use css flexbox to do so. You might need to tweak the classes to have correct width and height (eg. width: 100%; height: 150px;) and define flex container as similar to below snippet.
.fullconversation {
padding: 0;
margin: 0;
list-style: none;
width: 30%;
display: flex;
flex-direction: row;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
and then
.spacer4{
width: 100%;
height: 150px;
position: relative;
background-color: blue;
order: -1;
}
For more information about flexbox, please refer to the urls below or feel free to ask any questions regarding flexbox or css. Hope this helps.
https://css-tricks.com/almanac/properties/o/order/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
***********Updated************
If you change the height of spacer1 to be 10%, then you will see the blue box visible at the bottom. Note that the value 10% is just an example, as long as the total size of the heights of inner s dose not take up more than 100%, the blue box will be visible.
.spacer1 {
height:10%;
position: relative;
background-color: green;
}
Also, if you want to see all divs regardless of the size, you could just set overflow to other than hidden.
While creating a HTML layout, I noticed some strange positioning issue I was unable to solve.
Take the following HTML:
<div class="outer-wrap">
<div class="header">
I am a Header
</div>
<div class="element">
Hello world
</div>
And combine with this CSS code:
#import "https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css";
html, body { height: 100%; }
.outer-wrap {
width: 100%;
height: 100%;
display: table;
background: grey;
}
.element {
display: table-cell;
vertical-align: middle;
background: blue;
}
.header {
position: absolute;
background: red;
}
Fiddle
As you can see, I've set the wrapper to display: table, which enables me to vertically center any child element with setting display: table-cell and vertical-align: middle.
Now when I try to add a header, strange things start to happen.
First, I have to declare position: absolute on the header, otherwise the header horizontally pushes away .element. I don't know why this happens, but I understand why this fix works: Because position: absolute takes things 'out of the flow'.
But if I take a look at the Fiddle, you'll notice a small gap on the left side which exposes the grey background color defined on .outer-wrap:
What is causing this gap & how to fix this?
Why do I have to use absolute positioning on the header to make it expand to the full container width?
The key reason causing that is you're not defining the table-cell div and would not be 100% wide and you see its shifting towards right seeing the gray border color which is the background of outer-wrap div. So, you need to define the width:100%; when you use display:table-cell; to make it display correctly.
Changed css:
.outer-wrap {
width: 100%;
height: 100%;
display: table;
background: grey;
}
.element {
display: table-cell;
vertical-align: middle;
background: blue;
width: 100%;/*explicitly define width to be 100%*/
}
.header {
position: absolute;
background: red;
z-index: 1;/*to make it display in front*/
}
Fixed fiddle