This is the css
body, html {
height: 100%;
width: 100%;
}
#container {
display: flex;
position: absolute;
flex-flow: column wrap;
justify-content: stretch;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
background-color: black;
}
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
where #container is a sibling of div.sections, both directly under the body tag.
The problem is #container's height overflows the body by div.sections's height.
I have no idea what is the problem here or if it is related to flex. I do know how to solve it with javascript,
but I'd really like to see the solution in css.
I have tried to put a specific height value to your parent div.sections like height: 500px; and this will fix your problem. Thanks
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
height: 500px; /* Height Value as you want */
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
Related
So, I have a roundish card that my client don't want to get rid off, but the dynamic text will always be larger than the card itself. I have to limit the characters at first and then show the full text on hover and he want's me to zoom in the card so it can be larger to fit the text. How do I do that? I've been trying scale and width with ch, but on hover I cannot change the width since it only zooms in.
I'm using Angular 9, Typescript and Scss.
.model-list {
display: flex;
width: 65rem;
height: 55vh;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
overflow-y: scroll;
scrollbar-width: none;
.model-card {
display: flex;
flex-direction: row;
align-items: center;
margin: 10px 20px;
padding: 10px;
width: 16rem;
height: 5rem;
border-radius: 50px;
-webkit-box-shadow: 0px 1px 20px -4px rgba(0, 0, 0, 0.27);
box-shadow: 0px 1px 20px -4px rgba(0, 0, 0, 0.27);
cursor: pointer;
.text {
width: 13rem;
display: flex;
flex-direction: column;
padding: 16px;
.name {
font-size: 15px;
font-weight: bold;
color: #626c75;
margin: 0px;
width: 100%;
}
.description {
display: flex;
flex-direction: row;
font-size: 14px;
color: #dce1e7;
margin: 0px;
width: 17ch;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.icon-container {
width: 5rem;
height: 5rem;
img {
width: 100%;
height: 100%;
}
}
&:hover,
&.active {
transform: scale(1.2);
.name,
.description {
width: 60ch;
color: white;
}
}
}
}
Given the follow html and css, how to make the nested box like the
.parent {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
<div class='parent'></div>
draw them using background:
.parent {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background:
/* color position / width height*/
linear-gradient(red 0 0) left 20px top 20px/50px 50px,
linear-gradient(green 0 0) right 30px top 20px/50px 50px,
linear-gradient(blue 0 0) left 40px bottom 40px/50px 50px;
background-repeat:no-repeat;
}
<div class='parent'></div>
You can use the before or after pseudo element in CSS to achieve what you're looking for without altering the HTML at all. Take a look:
.parent {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.parent::before {
content: "";
width: 100px;
height: 100px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
<div class='parent'></div>
I wanted to put a large character to center alignment in both vertical and horizontal. here are my styles and result
div {
border: 1px solid black;
border-radius: 50%;
width: 300px;
height: 300px;
margin: 150px auto;
text-align: center;
line-height: 300px;
}
span {
display: inline-block;
background-color: burlywood;
line-height: 0.5;
vertical-align: middle;
font-size: 300px;
}
<div><span>s</span></div>
here is the result
How can I put the 's' in the middle?
It looks like the css difference is with lower case letters:
div {
border: 1px solid black;
border-radius: 50%;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
background-color: burlywood;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 50%;
height: 50%;
font-size: 10em;
}
<div><span>S</span></div>
<div><span>s</span></div>
<div><span>M</span></div>
<div><span>m</span></div>
I'm trying to vertically center a div using only display flex. I know how to do this with other methods, but need some insight on why this does not work. (The container do get horisontally centered but, not vertically)....
<body>
<div class="container"></div>
</body>
body {
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
justify-content: center; //works fine
align-items: center; //
}
.container {
width: 80vw;
height: 80vh;
border-radius: 10%;
padding: 0;
margin: 0;
}
Yes, it gets centered, as you can see here:
body {
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border: solid 1px green;
}
.container {
width: 80vw;
height: 80vh;
border-radius: 10%;
padding: 0;
margin: 0;
border: solid 1px red;
}
<div class="container"></div>
But probably what you want is this
body {
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border: solid 1px green;
height: 100%;
}
html {
height: 100%;
}
.container {
width: 80vw;
height: 80vh;
border-radius: 10%;
padding: 0;
margin: 0;
border: solid 1px red;
}
<div class="container"></div>
I have this simple div with a button inside of it. justify-content: center; works fine using Firefox and Chrome, but does not work on IE 11:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
}
<div id="div">
<button id="button">HELLO</button>
</div>
My goal is that, when I use transform with rotate(90deg) or rotate(270deg), the button will fit into the div:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
transform: rotate(90deg);
}
<div id="div">
<button id="button">HELLO</button>
</div>
The height and width of the div and button are always the same, but are customizable.
As much as possible, I prefer not wrapping elements.
IE11 needs the parent to have flex-direction: column.
This example has your button rotated:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
transform: rotate(90deg);
}
<div id="div">
<button id="button">HELLO</button>
</div>
In my case I had to make the flex container's height 100%. justify-content worked without a problem after that.
I also had to make the (first level) children's max-width 100% to fix some content overflowing horizontally.