I am trying to split my webpage into two vertical columns which can be clicked on to take you to the right pages. I've gotten this far.
HTML
<!-- Choices -->
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-12 vertical-center webd">
<h1 class="text-muted text-center">Web Design</h1>
</div>
<div class="col-md-6 col-xs-12 vertical-center circ">
<h1 class="text-muted text-center">Circus</h1>
</div>
</div>
</div>
CSS
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
.webd {
background-image: url('webd.jpg');
}
.circ {
background-image: url(circ.JPG);
}
My issue is, no matter where I put the text-center class. My <h1>s stay left aligned on the page. Can anybody help?
It is because you have added display flex to the parent container. This means the children are not full width anymore.
If you add the following style, it will fix your error:
.vertical-center > .text-center
{
flex-grow: 1;
}
Example bootply
If you don't want to grow the children, you can just add the following to your vertical center: justify-content: center;
Example bootply 2
Related
I'm using Angular CLI to create a flexbox page with 3 containers. The middle is attached to a route outlet and one has 2 items, left one showing a list and right one showing details when selecting an item from the list.
Here is what I'm coding
this is the app.component.html
<div class="container"
fxLayout = "row"
fxLayoutAlign="center">
<div class="item item-1" fxFlex="100%"><app-header></app-header>
</div>
</div>
<div class="container main"
fxLayout = "column"
fxLayout.xs="column"
fxLayoutAlign="center stretch"
fxLayoutGap="10px"
fxLayoutGap.xs="0">
<router-outlet></router-outlet>
</div>
<div class="container"
fxLayout
fxLayout.xs="row"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0">
<div class="item item-1" fxFlex="100%"><app-messages></app-messages>
</div>
</div>
here's main-page.html
<div class="scrollable-item" fxFlex="25%">
<app-parts-list></app-parts-list> //here is the list to scroll
</div>
<div class="item" fxFlex="75%">
<app-part-details></app-part-details>
</div>
here's app.component.css
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
margin: 0;
}
.main {
min-height: 0;
}
.scrollable-item {
overflow: auto;
}
I'm not familiar with CSS for sure as this is the first project I'm developing.
The issue is that I cannot get the scrollbar on scrollable-item div only, but I got it on the whole page as soon as the list gets populated.
Setting a height for scrollable-item would bring the scroll only in that div.
.scrollable-item {
height: 100px; // required height
overflow: auto;
}
What I want to have is two divs side-by-side and within one of them is an image and in the other is two divs, one above the other.
This happens to be a Wordpress theme, but I'm pretty sure this is basic CSS question.
The Wordpress stack exchange told me it was off-topic.
Call the left div #divL and the right div #divR.
I found an answer on SO mentioning that I should set display of #divL and #divR to
inline-block. I can get this to work on a test html file that I created in isolation but it doesn't work in the wordpress header. Specifically the divs in the wordpress header #divL and #divR act as if they had display: block rather than being positioned side-by-side.
Changing them to display: inline does put them side-by-side but then it
doesn't work to stack two divs within #divR.
I'll replicate here some of the code in the Wordpress header. Note that I'm going to simplify this by omitting the stacked divs inside #divR, because the symptom is obvious without that.
the following is what I'm using to try to get #divL and #divR to display side-by-side.
#divL { display: inline-block; }
#divR { display: inline-block; }
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" class="attachment-full size-full">
</div>
<div id="divR">Some text that should go on right</div>
</div>
<nav> .... </nav>
</div>
</header>
But they display one above the other.
Note that this actually does work to get them side-by-side, but then the
stacked divs inside #divR don't work as intended:
#divL { display: inline; }
#divR { display: inline; }
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" class="attachment-full size-full">
</div>
<div id="divR">Some text that should go on right</div>
</div>
<nav> .... </nav>
</div>
</header>
There is a lot of CSS on these other elements but I'm not sure which of it is important to this question so I'll wait for someone to comment and tell me what I should include.
As I wrote in my comment, you should set widths for those ìnline-blocks, that should basically do what you are after.
But as an alternative you can also use display: flex; on the container DIV. This can be done rather simple, but in the snippet below I added some additional settings to define a certain width for the two DIVs and to center the contents in these DIVs both horizontally and vertically (by also making the child elements flexboxes with flex-directon: column. For the rest of the settings see the code below.
.title-area {
display: flex;
justify-content: center;
align-items: stretch;
}
.title-area>* {
width: 40%;
border: 1px solid green;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" src="https://placehold.it/200x150/fa0" class="attachment-full size-full">
</div>
<div id="divR">Some text that should go on right</div>
</div>
<nav> .... </nav>
</div>
</header>
Here's an example of what would work:
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" class="attachment-full size-full" />
</div>
<div id="divR">
<div id="divTR">Some text that should go on top right</div>
<div id="divBR">Some text that should go on bottom right</div>
</div>
</div>
<nav>....</nav>
</div>
</header>
And the CSS:
#divL {
display: inline-block;
width: 49%;
}
#divR {
display: inline-block;
width: 49%;
}
But also Jon P is right; it might be worth your while to investigate one of the newer methods for dynamically spacing and sizing content.
I'm using Bulma have a column of cards which need to have the same height regardless of the content.
To achieve so I have created the following class
.equal-height
display: flex
flex-direction: column
height: 100%
My HTML looks like
<div class='columns is-multiline'>
<div class='column is-one-fifth'>
<div class='card equal-height'>
<div class='card-content'>
# CONTENT GOES HERE
</div>
<div class='card-footer'>
# FOOTER GOES HERE
</div>
</div>
</div>
<div class='column is-one-fifth'>
<div class='card equal-height'>
<div class='card-content'>
# CONTENT GOES HERE
</div>
<div class='card-footer'>
# FOOTER GOES HERE
</div>
</div>
</div>
</div>
Which produces something like
Now I'm trying to make the card-footer to stick at the bottom of the card like below.
I have tried a few things with flex but they don't really make sense.
Any ideas on how I may do it?
Add "flex: auto;" to '.card-contents' to make the card-footer to stick at the bottom of the card. Here is the working jsfiddle link.
.equal-height {
display: flex;
flex-direction: column;
height: 100%;
}
.equal-height .card-content {
flex: auto;
}
Add this CSS
.card-footer {
margin-top: auto;
}
working demo : https://jsfiddle.net/baLg7940/
UPDATE:
I made a fiddle for testing.
An illustration of what I'd like to achieve: (Rows and columns are Bootstrap 4 rows and columns.)
The page should only have scrollbars if the second row is already
"fully compressed" (0 height) and still the header + first row +
footer can't fit in the viewport.
The second row doesn't have to fill
in all remaining pale green place. It's height can be flexible.
Flexbox? Max-width? Overflow... How should I start? What could be a good solution?
HTML:
<div class="page">
<div class="header">
...<br>...
</div>
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-header"> .... </div>
<div class="card-body"> .... </div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-header"> .... </div>
<div class="card-body"> .... </div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-header"> .... </div>
<div class="card-body scrollable"> THIS <br> SHOULD <br> BE <br> THE <br> SCROLLABLE <br> CONTENT </div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
...
</div>
</div>
CSS:
div.page {
background-color: palegreen;
display: flex;
flex-direction: column;
min-height: 100vh;
max-height: 100vh;
}
div.header,
div.footer {
background-color: grey;
padding: 0.5em;
}
div.main {
display: flex;
flex-grow: 1;
}
div.row {
margin-top: 1em;
}
div.scrollable {
/* ??? */
}
The key is how you calculate the height for the <main> and usage of flex, esp. flex-grow, flex-shrink.
<header>, <main> and <footer>
The second row doesn't have to fill in all remaining pale green place. It's height can be flexible.
So I assume you want the <header> and <footer> always stay on top and bottom. Instead of regular absolute positioning approach, I want to explicitly set the heights for them, as well as for <main>.
HTML
<header>header</header>
<main class="container-fluid"></main>
<footer>footer</footer>
SCSS
$custom-header-height: 3rem;
$custom-footer-height: 2rem;
header, footer {
background-color: var(--gray);
// In order to position the text to the center, like your picture
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
header {
height: $custom-header-height;
}
footer {
height: $custom-footer-height;
}
main {
// Calculate the height for main, which is 100% viewport height -
// height of header - height of footer
height: calc(100vh - #{$custom-header-height} - #{$custom-footer-height});
background-color: var(--teal);
}
Result
This gives you the playground you can build stuff on.
First Row
The first row is free to expand as high as its contents, but you don't want it to take up any free space. That's why you set flex-grow: 0;. Also when you resize the window and the space for first row is shrinking, you don't want the cards go over the row. That's why you set flex-shrink: 0;. We might as well use the shortcut flex: 0 0 auto; for those 2.
But in order to set that, the first row (as well as the second row) needs to be flexbox children. So we set display:flex; on its parent - <main>.
HTML
<header>header</header>
<main class="container-fluid">
<div class="row first-row">
<div class="col-6">
<div class="card">...</div>
</div>
<div class="col-6">
<div class="card">...</div>
</div>
</div>
</main>
<footer>footer</footer>
SCSS (In addition)
main {
display: flex;
flex-flow: column nowrap;
}
.first-row {
// I purposely make first row's background yellow so that you can see it
background-color: var(--yellow);
flex: 0 0 auto;
}
Result
Second Row
The key here is to make the <card> not to grow when there is space, but shrink on limited space, which is the default of flexbox children: flex: 0 1 auto;
But again, in order to use that, its parent needs to display: flex;. Here the parent is col-6 since we want to use bootstrap grid system.
HTML
<header>header</header>
<main class="container-fluid">
<div class="row first-row">
<div class="col-6">
<div class="card">...</div>
</div>
<div class="col-6">
<div class="card">...</div>
</div>
</div>
<div class="row second-row">
<div class="col-6">
<div class="card">
...
...
...
</div>
</div>
</div>
</main>
<footer>footer</footer>
SCSS (In addition)
.second-row {
// I purposely make second row's background to be blue so that you can see it
background-color: var(--blue);
// Any column, class name starts as "col-"
[class*="col-"] {
display: flex;
flex-flow: column nowrap;
// So that when the second row is compressed to 0, it doesn't show
// the row completely.
min-height: 0;
.card {
// flex-grow: 0;
// flex-shrink: 1;
// Might as well just set it
// flex: 0 1 auto;
// But this is the default of flexbox children so we don't need to set
// it here.
.card-body {
overflow-y: auto;
}
}
}
}
Result
The second row doesn't have to fill in all remaining pale green place. It's height can be flexible.
An illustration of what I'd like to achieve
The page should only have scrollbars if the second row is already "fully compressed" (0 height) and still the header + first row + footer can't fit in the viewport
Notes
There is still a funkiness when the second row is fully compressed. The scrollbar is still hanging there and I don't know how to get rid of it.
The code can be simplified a little bit without usage of bootstrap grid system.
Demo
https://codepen.io/anon/pen/XBqyxZ
Sorry for this lengthy post. If you want to know more about flexbox, here is a great guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would but a set the height (or max-height if you prefer) on the card and then set overflow to scroll.
<html>
<div class="box">
<div class="content">
Dispassionate extraterrestrial observer citizens of distant epochs
permanence of the stars billions upon billions vastness is bearable only
through love brain is the seed of intelligence.
</div>
</div>
</html>
<style>
.box {
width: 500px;
overflow: scroll;
}
</style>
i am just wondering if i have layout like this
<div class="container">
<div class="left"> Left </div>
<div class="right"> Right </div>
</div>
changing view port to 320 needs right div appear first and left div below it , Is this possible ??????
yes. just use the flex-box setup on the pertinent media query, as exemplified below and the boxes will show up reversed.
<html><head></head><body><div class="container" style="
display: -webkit-flex;
">
<div class="left" style="
-webkit-flex-flow: column;
background: lightgray;
"> Left </div>
<div class="right" style="
-webkit-flex-flow: column;
background: yellow;
-webkit-order: -1;
"> Right </div>
</div>
</body></html>
Original source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
It is possible and widely used. Take a look at this mobile first approach:
<div class="container">
<div class="right"> Right </div>
<div class="left"> Left </div>
</div>
This will be rendered one box below another on mobile. And now we use CSS to rearrange them on bigger screens (above 320px):
#media only screen and (min-width : 481px) {
.left { float: left; }
.right { float: right; }
}