I'm trying to create this layout in css:
Several blogs (e.g. http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/) mentioned that the best way to do this is using the table layout. And it works actually, but the problem is i cant scroll the individual vertical panels, they always occupy their actual content. I tried to set a height explicitly for each but it's always ignored.
The CSS:
main {
width: 100%;
overflow: auto;
.cycle-progress{
display: table;
table-layout: fixed;
width: 100%;
}
.cycle-progress > div{
display: table-cell;
width: 600px;
height: 1000px;
h1{
background-color: #ffde17;
text-transform: uppercase;
}
}
.cycle-progress > div:nth-child(even){
background-color: white;
}
}
The HTML
<main>
<div class="cycle-progress">
<!--ng-init="timeline = $('.timeline').timeline()" -->
<div ng-repeat="pc in production_cycles" ng-controller="ProductionCycleCtrl" data-pcid="{{pc.id}}">
<h1 class="text-center m-t-none">{{pc.name}}</h1>
<div class="row">
<div class="col-lg-4 padder-lg">
<img src="/src/img/pc-init.svg" style="width: 200px" />
</div>
<div class="col-lg-8">
<div timeline class="timeline"></div>
</div>
</div>
<!--<div style="height: 1000px; background-color: red"></div>-->
</div>
</div>
</main>
A flexbox sized to occupy as much horizontal space as necessary should work:
body {
display: flex;
max-height: 100vw;
flex-direction: column;
}
.container {
display: flex;
width: fit-content;
}
.column {
max-height: 100%
overflow-y: auto;
}
For browsers that don't support flexboxes styling the columns as inline-blocks setting their parents to no-wrap might work too.
If you have a choice of setting explicit height(As I see in your post), then the solution is simple.
Wrap everything inside the table cell with a div and set height and overflow.
The HTML:
<div ng-repeat="pc in production_cycles" ng-controller="ProductionCycleCtrl" data-pcid="{{pc.id}}">
<div class="wrapper-element">
<h1 class="text-center m-t-none">{{pc.name}}</h1>
<div class="row">
<!--more content-->
</div>
</div>
</div>
The CSS:
.cycle-progress > div {
display: table-cell;
width: 600px;
> .wrapper-element {
height: 1000px;
overflow: auto;
}
}
Related
I'm trying to create a Flexbox setup comprised of two div elements which are both taking up 50% of the width of the screen equally.
The left side will have some text and the right side will have an image which will only fill the whole of it's 50% of the width, shrinking larger images down if necessary.
What's the best way to achieve this? I'm fairly new to Flexbox.
.content{
position: relative;
display: flex;
width: 100%;
height: 600px;
}
.content div{
flex-direction: column;
justify-content: center;
flex: 1;
}
.text{
background-color: pink;
}
.image{
background-color: paleturquoise;
}
<section class="content">
<div class="text">
<p>text goes here</p>
</div>
<div class="image">
<img src="https://i.imgur.com/rcZLIwH.jpg" alt="image">
</div>
</section>
You can make the .image position: relative and set the width of the image to 100%:
.content{
position: relative;
display: flex;
width: 100%;
height: 600px;
}
.content div{
flex-direction: column;
justify-content: center;
flex: 1;
}
.text{
background-color: pink;
}
.image{
background-color: paleturquoise;
/* make the parent position relative */
position: relative;
}
.image img {
/* make the width of the image equal to the parent width */
width: 100%;
}
<section class="content">
<div class="text">
<p>text goes here</p>
</div>
<div class="image">
<img src="https://i.imgur.com/rcZLIwH.jpg" alt="image">
</div>
</section>
I am trying to achieve the effect below in the example, so that the two images not in the middle are cut off purposely, so that when the browser is smaller, the user will actually see the full images. I have tried endless variations on this css:
width: 100%;
height: auto;
max-width: 670px;
overflow: hidden;
position: absolute;
and seem to be getting nowhere
Just use display: flex; for the container and align all the images in the middle.
.wrapper {
display: flex;
justify-content: center;
}
You can see and test this example here: https://codepen.io/bIropka/pen/WNramag
So I've used flexbox to get them all on the same line.
Added overflow: hidden; to .image-wrapper so the image can overflow without getting a scrollbar.
on the first .image-wrapper I've added direction: rtl; so it goes out of the box on the left instead of the right side.
.container .image-wrapper:nth-of-type(2n) {
min-width: max-content;
}
This is to make sure the middle wrapper will always be the full image size
.container {
display: flex;
}
.container .image-wrapper {
padding: 5px;
overflow: hidden;
min-height: max-content;
position: relative;
}
.container .image-wrapper:first-of-type {
direction: rtl;
}
.container .image-wrapper:nth-of-type(2n) {
min-width: max-content;
}
<div class="container">
<div class="image-wrapper">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="image-wrapper">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="image-wrapper">
<img src="https://via.placeholder.com/400" alt="">
</div>
</div>
How do I set a div as scrollable (absolute) without fixed height filling entire view, while inside a flex-box?
(https://imgur.com/7v5OFas)
(typo at the right section, its fixed width, the only height expected is to be fullpage everything)
https://codepen.io/anon/pen/oJyOOp?editors=1000
(if I add height to the relative parent of the red section, it works, but I cant have a fixed height. Adding 100% from html to the relative parent also works, but I can't also do that.)
currently it goes:
<div style="display:flex">
<div style="flex-grow:1">
<div style="display:flex">
<div style="width:45px...">
....
</div>
<div ...header code>
....
</div>
<div style="flex-grow:1; top:70px; position: relative">
<div style="position: absolute; top:0; left:0; right:0; bottom: 0; overflow: auto>
</div>
</div>
</div>
</div>
<div style="width:45px...">
....
</div>
</div>
It ends up filling the header height.
I would drop the idea of absolute content if its not necesarry and try something similiar to:
html, body {
min-height: 100%;
height: 100%;
margin: 0;
}
.container{
background: blue;
display: flex;
height: 100%;
flex-flow: row;
}
.sidebar{
background: red;
height: 100%;
width: 200px;
}
.contentWrapper{
display: flex;
flex-flow: column;
flex: 1;
}
.header {
background: yellow;
height: 100px;
width: 100%;
}
.content {
flex: 1;
overflow: auto;
}
.scrollableContent {
height: 3000px;
}
<div class="container">
<div class="sidebar"></div>
<div class="contentWrapper">
<div class="header"></div>
<div class="content">
<div class="scrollableContent">
</div>
</div>
</div>
</div>
Where you basically make every container a flex and the non scalable part of its content will have fix width/height and the other part get flex: 1 which is shorthand for taking rest of the space.
I have the following html :
<div class="main-container">
<h1>A title</h1>
<p>Some text</p>
<div class="sub-container">
<img src="">
</div>
</div>
With the following CSS :
.main-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.sub-container{
flex-grow:2;
background-color: green;
}
Please note that I don't know the size of the container above "main-container". I'm using flex because I want the div in "main-container" to occupy all the remaining space at the bottom.
What I want is to have an image in "sub-container" which fits its parent's size in both directions (height and width). Right now if I add an image into "sub-container" it overflows and doesn't get scaled at all.
I know that flex only works for immediate children (i.e. "sub-container" but not the image inside). I tried to use flex on "sub-container" too, but I couldn't achieve anything satisfactory.
Is this layout you wanted?
Using flex: 1 1 0 to control the sub-container and using width: 100% could make the image to fit the container.
.main-container{
border: 3px solid green;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.sub-container{
flex-grow: 1 1 0;
background-color: green;
display: flex;
}
.sub-container img {
width: 100%;
height: 100%;
}
<div class="main-container">
<h1>A title</h1>
<p>Some text</p>
<div class="sub-container">
<img src="https://picsum.photos/1080/600">
</div>
</div>
You can use this class:
.img-fluid {
max-height:100%;
height:auto;
}
Don't forget to add .img-fluid to your img
The task I encountered looks standard: I have a fixed height container and 3 div's inside it. I want the 2nd div to be stretched between the top and the bottom div's. When the contents of the 2nd div overflows - I would like to show the scroll bars.
I know how to accomplish this task using the absolute positioning. A question is: can I do it using the table on divs?
An additional requirement: if possible, I would like to avoid setting header's height as fixed.
I have tried to code it in my fiddle, but, as you see, I failed.
CSS:
.container {
height: 500px;
background-color: gainsboro;
}
.table {
display: table;
height: 100%;
}
.table > div {
display: table-row;
}
.table > div > div {
display: table-cell;
vertical-align: middle;
border: 1px solid black;
overflow: scroll;
}
.center > div {
height: 100%;
}
.content {
height: 700px;
}
HTML:
<div class="container">
<div class="table">
<div>
<div>XXX</div>
</div>
<div class="center">
<div>
<div class="content"></div>
</div>
</div>
<div>
<div>YYY</div>
</div>
</div>
</div>
Here is one possible solution:
<div class="container">
<div class="header">
<div>Top Header Block</div>
</div>
<div class="center">
<div class="content">
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
</div><!-- .content -->
</div><!-- .center -->
<div class="footer">
<div>Bottom Footer Block</div>
</div>
</div>
and the CSS:
.container {
height: 200px;
}
.header, .footer {
background-color: gainsboro;
}
.center {
height: inherit;
}
.content {
background-color: #F0F0F0;
height: inherit;
overflow: auto;
}
Since you are fixing the height of the container, you inherit the height both in the .center and the .content <div>'s.
If you tweak the container height, the center div expands but the header and footer div's stay the same height.
Use overflow on the content div to allow for scrolling.
Fiddle Reference: http://jsfiddle.net/audetwebdesign/nae5z/
Your way was right, just make a few changes (See this Fiddle):
html, body, .container, .table {
margin: 0;
height: 100%;
}
#header,#footer {
height: 1px;
}
This should work because tables cells get increased in height if the content needs it.
Just a hint: You may improve the whole thing, for example I would use HTML 5 and the <header/> and <footer/> elements. But that was not part of your question. Anyway, here is another update to your fiddle:
<div>
<header>
<div>XXX</div>
</header>
<main>
<div>
<div class="content"></div>
</div>
</main>
<footer>
<div>YYY</div>
</footer>
</div>
With CSS:
html, body, body > div {
margin: 0;
height: 100%;
}
body {
background-color: gainsboro;
}
body > div {
display: table;
width: 100%;
}
body > div > * {
display: table-row;
}
body > div > * > div {
display: table-cell;
vertical-align: middle;
border: 1px solid black;
}
header, footer {
height: 1px;
}
main is very new to HTML 5, just if you're wondering.