I have an input container here:
const InputContainer = styled(BaseInputContainer)`
display: inline-block;
width: 100%;
align-items: center;
input[type="number"] {
background: black;
width: 100%;
text-align: center;
}
`;
I want the width of the container to be the same size of the input field, basically
width: fit-content
but that does not work in the InputContainer component. How do I do this?
Related
Let's assume we have a parent element whose dimensions are 100vh x 100vw. If that element were to have a child and that child's position was set to 'fixed'. The child would be in the center of the element
.parent {
height: 100vh;
width: 100vw;
border: solid 5px orange
}
.child {
height: 6vh;
width: 6vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.25);
border-radius: 0.5em;
position: fixed;
color: steelblue;
cursor: pointer;
&.childOfChild { // the 3 bars
width: 3vh;
height: .25em;
border-radius: .1em;
margin: 3px;
}
}
Now let's say that the parent div's height needs to be 180vh in order to fit child elements, now because that one 'fixed' child is positioned at the center of the div. It will move down, because it's position to be at the center of the parent and not the view port.
So is it possible to keep the child element centered to the viewport and ignore its parent without nesting it outside of the parent? Maybe some kind of CSS positioning property?
I don't want to use margins or transform properties. I want a way for the element to IGNORE it's parent's positioning without nesting it outside.
body,
html {
margin: 0;
}
.parent {
height: 180vh;
width: 100vw;
background: orange;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.child {
height: 6vh;
width: 6vh;
background: red;
position: fixed;
top: 50%;
margin-top: -3vh;
}
<div class="parent">
<div class="child">
</div>
</div>
So, i'm trying to get my left div to be the same height as the right div, just let me show the code ( i did in react.js ) and the styles
This is the structure
<FlexBoxModal>
<FlexBoxMPhoto onClick={e => e.stopPropagation()}>
<img src={sp.photo} />
</FlexBoxMPhoto>
<FlexBoxMComments
onClick={e => e.stopPropagation()}
></FlexBoxMComments>
</FlexBoxModal>
My styles
export const FlexBoxModal = styles.div`
max-width: 70%;
min-width: 50%;
height: 605px;
margin: auto;
margin-top: 3rem;
margin-bottom: 4rem;
overflow-y: hidden;
overflow-x: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background: red;
`;
export const FlexBoxMPhoto = styles.div`
flex: 1.25;
display: flex;
align-items: center;
justify-content: flex-end;
img{
max-width: 100%;
min-width: 70%;
min-height: 300px;
max-height: 605px;
object-fit: cover;
}
`;
export const FlexBoxMComments = styles.div`
flex: .75;
width: 100%;
min-height: 300px;
max-height: 605px;
background: white;
`;
The Problem : i've thinking how to can i make this work, but i really don't know where to start, i fixed mi left div so i can position the img between a min-size and max-size, but, how can i make mi right div follow the height of my left div ? Let me show you this output
Test
What i want : So, as you can see, the white div isn't the same height ad the other one, how can i make that happen? both with same height?
Thanks !
The FlexBoxModal container that you have has align-items set to center. Switch that to stretch. That's the container that controls both the children.
I got the following structure:
<header></header>
<main>
<card />
</main>
<footer></footer>
header {
height: 70px;
top: 0;
left: auto;
right: 0;
position: sticky;
width: 100%;
display: flex;
z-index: 1100;
box-sizing: border-box;
flex-shrink: 0;
flex-direction: column;
}
main {
height: calc(100vh - 130px);
display: grid;
place-items: center;
max-width: 600px;
padding-left: 24px;
padding-right: 24px;
width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
card {
width: 100%;
padding: 40px 25px;
}
footer {
top: auto;
width: 100%;
bottom: 0;
height: 60px;
display: flex;
position: fixed;
justify-content: center;
}
The card actually is a login form with two inputs and has to be in the center of the screen. I used the main to wrap and center it. But now the problem is that on horizontal orientation and when the height is reduced to some pxs it is not possible to see the whole card. Part of it is covered by the footer. Any idea how I can center it and scrolling to be possible.
Here is my sandbox: https://codesandbox.io/s/recursing-meitner-ocgz9
add this to you'r body maybe youre problem solve
body {
min-height:100vh;
}
if you place it to a code pen, would be easier to help you.
I can only assume that if you change main to the below it might help:
main {
height: calc(100vh - 130px);
display: flex;
place-items: center;
max-width: 600px;
padding-left: 24px;
padding-right: 24px;
width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
background: red;
}
Also check you have body { margin: 0 }. As browsers adds margin automatically, so your 100% layout does have extra height.
from the main container remove the height and add margin-bottom equals to the height of the footer.
paperContainer: {
display: "grid",
placeItems: "center",
marginBottom:'60px'
}
And to avoid some styling issues regarding height, add min-height if required.
Codesandbox demo
Got a very simple solution!!
paper: {
width: "100%",
borderRadius: "8px",
padding: "40px 25px",
paddingBottom: "100px"
},
just give the paddingBottom to the paper, you can also use it conditionally if the user is using mobile and the width of the view > height of the view. It looks fine without that too.
Check this out!!
sandbox link
let me know if you still have an issue.
Sorry, another flexbox related question :)
I have two flex elements :
A container (red) containing a centered div (yellow)
A footer (blue) with an undefined height
The red container has a flex-grow:1 attribute, forcing it to take the remaining space on the screen
The issue happens when the yellow element is bigger than the screen size. I would like my red container to grow based on its content. Any idea of how I could do that ?
HTML:
<div class="container">
<div class="content"></div>
</div>
<div class="footer"></div>
CSS:
body,
html {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.container {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.content {
background: yellow;
height: 2000px;
width: 100px;
}
.footer {
flex-shrink: 0;
height: 50px;
background-color: blue;
}
https://codepen.io/stepinsight/pen/roRVGQ
== EDIT ==
Andre helped me find the answer, thanks heaps !
The only thing you need to change in the code above is to replace height by min-height and the % by vh for the body/html tags 🎉
body,
html {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
Simply remove the height property on the body element and add height: 100% to html
* { box-sizing: border-box; }
html {
height: 100%
}
body {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.content {
background: yellow;
height: 2000px;
width: 100px;
}
.footer {
height: 50px;
background-color: blue;
}
Corrected: https://codepen.io/ferreirandre/pen/maoVvb
Feel free to play around with the height of .content
I have markup like so:
HTML:
<ListElementRoot>
<ListElementText>
{children}
</ListElementText>
<ListElementDescription>
{description}
</ListElementDescription>
</ListElementRoot>
//platform.web.js
export const ListElementRoot = div(style.root)
export const ListElementIcon = div(style.icon)
export const ListElementText = div(style.text)
export const ListElementDescription = div(style.description)
//CSS
.root {
display: flex;
width: 100%;
height: 56px;
align-items: center;
border-top: 1px solid var(--color-gray2);
padding: 0;
}
.icon {
position: absolute;
width: 28px;
height: 28px;
align-items: center;
padding-left: 18px;
}
.text {
color: #000;
font-size: calc(var(--font-size-body) / 10)rem;
padding-left: 64px;
}
.description {
color: #000;
font-size: calc(var(--font-size-body) / 12.3)rem;
padding-left: 64px;
}
I'm new to flexbox.
How can I make element just under ?
I'm trying to find a solution but it is heavily twisted in flexbox for me (for now). Any ideas?
EDIT:
Without flex-direction: column;
With flex-direction: column;
You need to have a flex-direction property set to column for your flex container (.root).
Here you can find a jsfiddle example.
EDIT:
Change align-items: center to be align-items: flex-start in order to have the elements align to the left