Div scroll is not showing automatically.
.sectionContent {
height: 100vh;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
}
.asideContent {
flex: none;
width: 30rem;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
background: #eceff1;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
justify-content: space-between;
min-height: 100%;
}
.rightSideDiv {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: 2rem;
min-height: 100%;
}
I am having Section inside that having aside and Div. Div scroll not showing automatically and some times showing but div not fully displaying when check in responsive way. here I am providing in section, aside, div css classes, please help.
After changing .sectionContent as {height: 60vh} its working , but i am not sure its correct or not.
Related
I have a problem with Flex for Google Charts. Div with charts is not using available height. Am I missing something? (colors and blue borders are for development purpose so I'm sorry for that...)
CSS
.pc-metrics-chart {
display: flex;
flex-direction: column;
width: 100%;
height: 65%;
overflow: hidden;
background-color: var(--yellow);
}
.metric-ch{
height: auto;
flex : 1;
justify-content: stretch;
align-items: flex-end;
position: relative;
background-color: var(--success);
}
.ManagementCharts {
flex: 1;
overflow: hidden;
}
HTML
<div class="pc-metrics-chart" id="pc-metrics-chart-proj">
<div class="metric-ch">
<div id="totalProjectChart1" class="ManagementCharts">
</div>
</div>
</div>
I was trying to play with the position, alignments, height of the chart as well, but I'm using it's auto height and I thought that Flex will fill available space under the chart:
It is possible to use height property and set it to 100% to fill the remain space:
body {
margin: 0;
}
.pc-metrics-chart {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: yellow;
}
.metric-ch{
height: auto;
flex : 1;
justify-content: stretch;
align-items: flex-end;
position: relative;
background-color: lightgreen;
}
.ManagementCharts {
flex: 1;
overflow: hidden;
background-color: red;
height: 100%;
}
<div class="pc-metrics-chart" id="pc-metrics-chart-proj">
<div class="metric-ch">
<div id="totalProjectChart1" class="ManagementCharts">
Here should be chart placed
</div>
</div>
</div>
.appShopSummaryContainer {
display: flex;
flex-flow: column wrap;
}
.appShopSummaryContainer .appShopSummaryProductWrap {
flex-basis: 100%;
background: pink;
height: 100%;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.appShopSummaryContainer .appShopSummaryImg {
flex: 0 0 40%;
height: auto;
padding-bottom: 26.667%;
background: green;
background-size: cover !important;
background-position: center center !important;
}
.appShopSummaryContainer .appShopSummaryInfo {
flex: 0 0 60%;
background: orange;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
height: 100%; /* not working */
/* doesn't work: align-self: stretch; */
}
.appShopSummaryContainer .appShopSummaryMoreInfoBtn {
cursor: pointer;
background: #214291;
color: #fff;
padding: 10px;
border-radius: 5px;
}
<div class="appShopSummaryContainer">
<!-- FOR EACH THING DO THIS -->
<div class="appShopSummaryProductWrap">
<div class="appShopSummaryInfo">
<h3>Title</h3>
More Information
</div>
</div>
<!-- ENDFOREACH -->
</div>
I've had a look at some other stackoverflow answers to similar questions, but none work in this situation. Not sure why, but cannot get the orange div to expand to the full height of it's parent.
Setting a height to 100% obviously won't work since the parent doesn't have a fixed height, but aligning itself as stretch also fails to stretch the height.
If anyone can solve this, can someone explain why the align stretch won't work, and why their solution does? Thanks for any help here.
Do you mean something like this ?
you have to add align-items: stretch; to the parent not the item itself
check out this css flex guide
add align-items: stretch; to .appShopSummaryContainer .appShopSummaryProductWrap and remove height: 100%; from .appShopSummaryContainer .appShopSummaryInfo and add justify-content: center; to .appShopSummaryContainer .appShopSummaryInfo
.appShopSummaryContainer {
display: flex;
flex-flow: column wrap;
}
.appShopSummaryContainer .appShopSummaryProductWrap {
flex-basis: 100%;
background: pink;
height: 100%;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: stretch;
}
.appShopSummaryContainer .appShopSummaryImg {
flex: 0 0 40%;
height: auto;
padding-bottom: 26.667%;
background: green;
background-size: cover !important;
background-position: center center !important;
}
.appShopSummaryContainer .appShopSummaryInfo {
flex: 0 0 60%;
background: orange;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
justify-content: center;
}
.appShopSummaryContainer .appShopSummaryMoreInfoBtn {
cursor: pointer;
background: #214291;
color: #fff;
padding: 10px;
border-radius: 5px;
}
<div class="appShopSummaryContainer">
<!-- FOR EACH THING DO THIS -->
<div class="appShopSummaryProductWrap">
<div class="appShopSummaryInfo">
<h3>Title</h3>
More Information
</div>
</div>
<!-- ENDFOREACH -->
</div>
I have the following CSS, trying to make a responsive table-like design.
.table {
display: flex;
width: 100%;
flex-direction: column;
overflow-x: auto;
}
.table__row {
display: flex;
flex-flow: row nowrap;
}
.table__column {
flex-shrink: 0;
display: block;
align-items: center;
padding: .54rem 1.05rem;
width: 300px;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Here's a JSFiddle: https://jsfiddle.net/abuer473/
The problem is that when a user scrolls to the right, the background gets lost. How do I fix this?
I was able to fix the issue by adding background to the columns of every even numbered row:-
css:
.table__row:nth-child(2n) > .table__column {
background: #AAA;
}
or else you could write
css:
.table__row:nth-child(even) > .table__column {
background: #AAA;
}
DEMO
Image stretches if I don't use object-fit contains. Stretches in width, losing aspect ratio.
object-fit contain fixes that.
The problem is, the element itself is not contained, just the visible image. Which means if I make the image clickable, the whole element area (even outside the image) is clickable.
https://jsfiddle.net/nyysyngp/10/ (or see code below)
I just want the visible image to be clickable. This seems to work on Firefox, but not Chrome.
body, html
{
margin: 0;
padding: 0;
background-color: red;
display: flex;
height: 100%;
width: 100%;
}
#media
{
display: flex;
background-color: #262423;
justify-content: center;
align-items: center;
flex-direction: column;
flex-grow: 1;
}
#media_split
{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
}
#media_image_container
{
height: 50%;
width: 100%;
flex-grow: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
}
#media_image
{
object-fit: contain;
max-height: calc(100% - 4em);
max-width: calc(100% - 4.7em);
min-height: 100px;
min-width: 100px;
cursor: pointer;
}
#media_tv
{
height: 50%;
width: 100%;
flex-grow: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background-color:blue;
}
<div id='media'>
<div id='media_split'>
<div id='media_image_container'>
<img id='media_image' src='https://i.imgur.com/F26h0tq.jpg'>
</div>
<div id='media_tv'></div>
</div>
</div>
Well some months later I found a solution. Just by adding "position: absolute" to #media_image the problem went away, which in my case didn't break anything else.
In #media_image_container remove display: flex; and add text-align: center;
It will fix the issue.
I have this
.parentcontainer
{
background-color: black;
max-width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: space-around;
}
.aside
{
display:flex;
flex: 30%;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
}
.content
{
background-color: blue;
flex: 70%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
max-height:800px;
}
.content img
{
width: 100%;
max-width: 100%;
height: auto;
}
when I resize the browser the imgs of the .content doesnt resize and I need to do a horizontal scroll. How can I do for resizing the images? and the child container doesnt get bigger than the parent container. thanks.
EDIT: now I change .content to columns, and mas height to 800px. I want the articles of the .content go down,and when they reach 800px, make another column. the problem stays, the articles of .content goes outside the parent box instead or resize...
Try this:
.content img{
width: 100%;
max-width: 100%;
height: auto
}