How do I make the container fit the size of the content when the content size is changes? Notice the background fill does not extend when more content is added.
var text = document.getElementById("content");
text.innerText = document.body.innerText + document.body.innerText + document.body.innerText;;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
}
#view1 {
position: absolute;
background: #E5E5E5;
width: 671px;
height: 272px;
background-color: rgba(232,232,232,1);
overflow: visible;
}
#FlexGroup {
position: absolute;
width: 589px;
left: 41px;
top: 88px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
flex-wrap: nowrap;
overflow: visible;
gap: 30px;
}
#content {
position: relative;
align-self: auto;
overflow: visible;
width: 590px;
text-align: left;
font-family: Malayalam Sangam MN;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(34,44,65,1);
}
<div id="view1">
<div id="FlexGroup">
<div id="content">
<span>How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make</span>
</div>
</div>
</div>
Parent element is not aware of its child element if you set position: absolute in the child element. So, parent's height will not grow as when child element grows. To make it work, you need to set position: relative in child element
var text = document.getElementById("content");
text.innerText = document.body.innerText + document.body.innerText + document.body.innerText+ document.body.innerText;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
}
#view1 {
position: absolute;
background: #E5E5E5;
width: 671px;
height: auto;
background-color: rgba(232,232,232,1);
overflow: visible;
border: 1px solid red;
}
#FlexGroup {
position: relative;
width: 589px;
/* height:auto; */
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
flex-wrap: nowrap;
overflow: visible;
gap: 30px;
}
#content {
position: relative;
align-self: auto;
overflow: visible;
width: 590px;
text-align: left;
font-family: Malayalam Sangam MN;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(34,44,65,1);
}
<div id="view1">
<div id="FlexGroup">
<div id="content">
<span>How to make container size to content. How to make container size to content. How to make containntto content. How to make container size to content. How to make</span>
</div>
</div>
</div>
In your case you can remove height in #view1 also remove position: absolute in #FlexGroup
#view1 {
position: absolute;
background: #E5E5E5;
width: 671px;
background-color: rgba(232,232,232,1);
overflow: visible;
}
#FlexGroup {
width: 589px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
flex-wrap: nowrap;
overflow: visible;
gap: 30px;
}
Instead of position you can also move your #FlexGroup with margins if you need
Related
I have tow divs in a flex container, one containing the chart and another containing it's legends as below :
When I scroll on the div below, it should scroll up on the chart like so :
Here's my attempt at this with z-index and position absolute :
HTML -
<div className={`${style['chart__doughnut-wrapper-opportunity']} ${props.class}`}>
<div className={style.chart__data}>
<div className={style.chart__doughnut}>
<Chart
className="chart"
data={tabChartData}
width={props.width}
height={props.height}
options={optionsForGraphic(
props.type,
props.orientation,
tabChartData,
)}
/>
</div>
</div>
<div className={style.chart__legend}>
<div className={style.chart__table}>
<ChartLegend
chartType={'doughnut'}
page={props.page}
legendData={tabChartData}
percentage={percentage}
legendColor={legendColor}
legendStyle={legendStyle}
/>
</div>
</div>
</div>
CSS :
.chart__doughnut-wrapper-opportunity {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
max-height: 13.5rem;
margin: 1.25rem 0rem;
width: 100%;
border-bottom: #dadbdf solid 0.063rem;
.chart__data {
display: flex;
height: 100%;
align-items: center;
min-height: 13.5rem;
padding: 0 1rem 0 0;
width: 45%;
position: relative;
.chart__doughnut {
padding: 0;
width: 100%;
canvas {
z-index: 1;
position: relative;
}
}
}
.chart__legend {
display: flex;
// width: 100%;
position: absolute;
height: 20rem;
padding: 0 0 0 1rem;
z-index:10;
.chart__table {
display: flex;
flex-direction: column;
height: 20rem;
width: 100%;
word-wrap: break-word;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
}
Which has resulted in something like this :
I am stuck, not getting any ideas, please help.
Try applying the overflow to the chart_legend class and let's see
I have a fixed-height interface I'm styling with CSS. I want it to be responsive to browser height (and, eventually, width... but one problem at a time) and I have a fiddle in which the interface operates almost exactly as I'd like it to with respect to browser height... with one exception.
I use a flexbox layout with object-fit: scale-down to force the row of images in the green div to shrink when their containing div is not tall enough to fit the images at native dimensions. This results in some "padding," the existence of which is perfectly well explained here. I've made the background color of the relevant div blue so that you can clearly see the visual space I'm talking about. I do not want this space to appear at all.
So, what is the proper way to make a row of images responsive in the way I'd like without introducing additional visual space between the images if object-fit cannot do this? Thank you for the input.
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
display: block;
object-fit: scale-down;
min-height: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex: 0 1.5 auto;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 0;
background-color: green;
}
.context {
display: flex;
flex-direction: column;
max-height: 100%;
background-color: blue;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
align-items: end;
background-color: orange;
}
.primary img {
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
}
<div class="container">
<div class="flex-column">
<div class="primary">
<img src="https://via.placeholder.com/200">
<div class="mask">
<img src="https://via.placeholder.com/200/FF000">
</div>
</div>
<div class="flex-row">
<div class = "context">
<img src="https://via.placeholder.com/75x250">
</div>
<div class = "context">
<img src="https://via.placeholder.com/150x75">
</div>
</div>
<div class="nonimage">
<div class="smallhint">Some Text<br>Other Text</div>
</div>
</div>
</div>
I am trying to make a navbar using flexbox. In my code I have the actual navbar wrapped with flex- direction:"row" to align the logo and the button.
Now I want to have the nav-inner (the beige div) under the navbar (that should be 100vw wide), but actually it sits next to the navbar.
I have tried to change the flex-direction to "column" inside my nav-menu div, but the Hamburger button goes out of the screen. Am I doing something wrong?
body {
margin: 0;
overflow: hidden;
}
/* defaults */
.safe-view {
display: flex;
height: 100vh;
}
.hamburger {
height: 30px;
width: 30px;
}
/**/
/* navbar */
.navbar {
position: sticky;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
width: 100vw;
font-size: 1.2em;
height: 100px;
}
.nav-menu {
width: 100%;
display: flex;
flex-direction:row;
/*flex-direction:column;*/
position: absolute;
height: 100%;
overflow: hidden;
background-color: white;
}
.nav-inner {
height: 100%;
width: 100%;
background-color: blanchedalmond;
}
/**/
<div class="safe-view">
<div class="nav-menu">
<div class="navbar">
<h1>logo</h1>
<button class="hamburger"></button>
</div>
<div class="nav-inner"></div>
</div>
</div>
This is a CSS box-model issue. You need to add box-sizing: border-box. This will ensure that padding is included in calculation of the width.
*{
box-sizing: border-box;
}
By default box-sizing is set to content-box. This will only care about the element content and shift padding and border outside of the element. That is why you saw the button push out to the right! This can also help you to understand further.
Also, flex-direction for .nav-menu needs to be set to column in order to position .nav-inner below.
Heres an alternative. I removed padding and just used calc() function to create padding. But always include box-sizing:border-box in your CSS :)
*{
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.safe-view {
display: flex;
height: 100vh;
}
.navbar {
position: sticky;
display: flex;
flex-direction:row;
align-items: center;
justify-content: space-between;
width: calc(100vw - 60px);
margin: 0 auto;
font-size: 1.2em;
height: 100px;
}
.nav-menu {
width: 100%;
display: flex;
flex-direction:column;
position: absolute;
height: 100%;
overflow: hidden;
background-color: white;
}
.nav-inner {
height: 50px;
width: 100%;
background-color: blanchedalmond;
}
<div class="safe-view">
<div class="nav-menu">
<div class="navbar">
<h1 class="logo">logo</h1>
<button class="hamburger">button</button>
</div>
<div class="nav-inner"></div>
</div>
</div>
i have flexbox container and divs in it. I want the content to stay inside the div. In the sense that if the content exceeds the width of div then it should start from next line.
What i have tried doing?
used white-space: nowrap property. This added horizontal scrollbar which is not desired.
Below is the code,
CSS:
.notification_message_wrapper {
width: calc(100% - 450px);
position: absolute;
top: 105px;
left: 250px;
margin: 0 auto;
display: flex;
align-items: center;
.box {
background-color: white;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
top: 100px;
left: 250px;
flex: 1;
}
.message {
display: flex;
color: green;
flex-direction: column;
justify-content: space-between;
font-weight: normal;
padding: 10px;
white-space: nowrap;
.content {
height: auto;
white-space: nowrap;
}}}
HTML:
<div class="box_wrapper">
<div class="box">
<div class='message>
<div class="container">
<div>title</div>
<div>detail</div>
<div>
<div>
<h2>Debug</h2>
someresponse
<div/></div></div></div></div>
<div>close</div></div>
The divs with title, detail should not go out of the div...how could i solve this. could someone help. thanks.
just add overflow: auto; or overflow: hidden to your div. refer this link https://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow
I have a div inside a div which has content in it (content created dynamically) I have gotten the child div to center vertically but can't vertically center the content inside. I am using Bootstrap.
.main {
position: relative;
min-height: 600px;
width: 100%;
margin: 0; padding: 0;
}
#content {
position: absolute;
display: inline-block;
text-align: center;
margin: auto;
max-width: 60%;
top: 50%;
right: 0;
left: 0;
bottom: 0;
transform: translateY(-50%)
}
#content p {
position: relative;
font-weight: 500;
font-size: 3.5em;
line-height: 1.25em;
color: #fff;
}
<div class="row">
<div class="main">
<div id="content">
<p> text content </p> ( this is inputted by Wordpress/post )
</div>
</div>
</div>
You can use a flexbox:
.main {
min-height: 300px;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
#content {
background-color: rgba(0, 0, 0, 0.4);
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
#content p {
color: white;
}
<div class="row">
<div class="main" style="">
<div id="content">
<p> text content </p>
</div>
</div>
</div>
The better solution will always be to use flexbox which comes out of the box in CSS3.
Just use the following class:
#content p {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-weight: 500;
font-size: 3.5em;
line-height: 1.25em;
color: #000;
}
Alternatively,
You can put the min-height of the class "main" to a 150% instead of 600px.
.main {
position: relative;
min-height: 150%;
width: 100%;
margin: 0; padding: 0;
}
That would be the easiest solution.
Try adding a style something like this, bootstrap don't have that kind of functionality, its up to the user do the job.
.center {
margin: auto;
height: 65%;
}
Hope this help