How do I align the div so that both label has the same width and right aligned and both content start at the same place. Some suggest float, but I dont perfer floating the content. Is there a flex way of doing this.
<!DOCTYPE HTMML>
<html>
<body>
<div>
<div style="display: flex; flex-direction:row;">
<div style="align: right; background: blue">
Long label:
</div>
<div style="text-align: left; background: green">
This is the content
</div>
</div>
<div style="display: flex; flex-direction:row;">
<div style="align: right; background: blue">
label:
</div>
<div style="text-align: left; background: green">
This is the content
</div>
</div>
</div>
</body>
</html>
With flexbox...NO...you can't unless you use fixed width values (whatever they are)...there is no width/height equalisation between non-siblings.
You would need to given one of the elements a fixed width value and then let the other take up the remaining space with flex:1.
.blue {
background: lightblue;
/* width: 150px; */
flex: 0 0 150px
}
.green {
background: #bada55;
flex: 1;
}
.parent {
display: flex;
}
<div class="parent">
<div class="blue">
Long label:
</div>
<div class="green">
This is the content
</div>
</div>
<div class="parent">
<div class="blue">
label:
</div>
<div class="green">
This is the content
</div>
</div>
Why not simply add a class to the content and label divs?
HTML
<div>
<div>
<div class="label-div">Long label</div>
<div class="content-div">Content</div>
</div>
<div>
<div class="label-div">Label</div>
<div class="content-div">Content</div>
</div>
</div>
CSS
.label-div {
width: 70px;
text-align: right;
}
.content-div {
text-align: left;
}
This way, you can be sure that all label divs are equal in length.
Related
I'm using Angular Flex to align cards in a row. The cards should wrap into a new line if there are several of them. The relevant settings of the block are
fxLayout="row wrap" fxLayoutGap="40px grid"
fxLayoutGap uses paddings on the inner elements and a negative margin on the container so that the gap is also applied when the inner elements wrap to a new row. So I do not want to remove the grid setting (or the paddings or negative margins in the
In addition, the cards are grouped into blocks with a header and a line on the left. I've created a sample that mirrors the settings that Angular Flex applies. The image is taken from this sample:
As you can see, there is redundant space at the bottom of each group. I want the block and the line on the left to end where the last row of cards (of the block) ends:
You can find the sample on jsfiddle.
How can I adjust the CSS and/or the Angular Flex settings to remove the redundant space and make the line end at the last row of cards while preserving the space between the blocks?
remove the padding-bottom from the last two elements:
#outer {
border-left: 2px solid red;
padding-left: 0px;
padding-bottom: 40px;
}
#outer:not(:first-child) {
margin-top: 40px;
}
#header {
padding: 10px;
margin: 0px 0px 40px 0px;
background-color: red;
}
#container {
margin: 40px -40px -40px 40px;
display: flex;
flex-flow: row wrap;
box-sizing: border-box;
}
#inner {
padding: 0px 40px 40px 0px;
flex: 0 0 50%;
box-sizing: border-box;
max-width: 50%;
min-width: 50%;
}
/* added */
#inner:last-child,
#inner:nth-last-child(2):nth-child(odd){
padding-bottom:0;
}
/**/
#card {
background-color: green;
}
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
I created a Vuetify app managing some card items. Before adding the actions / buttons I check the User's permissions. If some permissions are missing these buttons will not be rendered. I created an example here
https://codepen.io/anon/pen/RmMRQb?editors=1010
As you can see the second div collapses because no children is rendered. This problem is not related to Vuetify, so I will reproduce it with default HTML / CSS example.
.container {
background: red;
}
.box {
display: inline-block;
height: 32px;
width: 32px;
margin: 5px;
background: blue;
}
.notRendered {
display: none;
}
<div id="app">
<h1>Div with visible elements</h1>
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<h1>Div with hidden elements</h1>
<div class="container">
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
</div>
</div>
I don't want the div to collapse. I already found a solution here
JQuery: Prevent div from collapsing when element hides()
but would like to ask if there is a way to achieve it without using some hardcoded heights or selecting the element's height. I don't want to modify Vuetify's native elements, so maybe there is a trick when the action bar is empty (no children got rendered) and the bar would not collapse.
I have added a secondary class for the default/native container. I think this is the best/easiest approach.
.improved-container {
background: red;
min-height: 40px;
}
.box {
display: inline-block;
height: 32px;
width: 32px;
margin: 5px;
background: blue;
}
.notRendered {
display: none;
}
<div id="app">
<h1>Div with visible elements</h1>
<div class="container improved-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<h1>Div with hidden elements</h1>
<div class="container improved-container">
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
</div>
</div>
I had encountered to an interesting CSS challenge. In the following code I was able to vertically aligned the text and input. The part I couldn't manage was, without breaking the vertical alignment (text - input) I need to put footer text under the input.
.container {
width: 300px;
}
.head {
display: inline-block;
vertical-align: middle;
width: 20%;
}
.col {
display: inline-block;
vertical-align: middle;
}
.col input {
width: 100px;
}
<div class="container">
<div class="head">
Text
</div>
<div class="col">
<input type="text" />
</div>
<div class="col">
<input type="text" />
</div>
<div class="head"></div>
<div class="col">
Footer Text
</div>
</div>
<div class="container">
<div class="head">
Three Line Text
</div>
<div class="col">
<input type="text" />
</div>
<div class="col">
<input type="text" />
</div>
<div class="head"></div>
<div class="col">
Footer Text
</div>
</div>
Also, container div height should effect from footer text as well. So using absolute will not work for this case.
I already aware some JavaScript or CSS hack solutions. But for this case, I want to proceed with a proper way. How can we achieve this properly?
UPDATE
I forgot to mention before. Footer text could be multiple lines as well. It should cover both inputs underneath.
Flexbox can do that but it requires restructuring the HTML and altering a class or two...oh, and a pseudo-element.
.container {
width: 300px;
display: flex;
margin: 1em;
border: 1px solid red;
}
.head {
width: 20%;
display: flex;
flex-direction: column;
justify-content: center;
}
.col,
.second {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 .25em;
}
input {
width: 100px;
}
.col:before {
content: "";
height: 1.2em; /* or whatever your line-height is */
}
<div class="container">
<div class="head">
Text
</div>
<div class="col">
<input type="text" />
<div class="foot">
Footer Text
</div>
</div>
<div class="second">
<input type="text" />
</div>
</div>
<div class="container">
<div class="head">
Three Line Text
</div>
<div class="col">
<input type="text" />
<div class="foot">
Footer Text
</div>
</div>
<div class="second">
<input type="text" />
</div>
</div>
I have a layout like this:
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner">
<div class="deeper">
<div class="newLineContent"></div>
<div class="newLineContent"></div>
<div class="newLineContent"></div>
</div>
</div>
</div>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner">
<div class="deeper">
<div class="newLineContent"></div>
<div class="newLineContent"></div>
<div class="newLineContent"></div>
</div>
</div>
</div>
I have to align the divs like: All the divs with "outer" class has to start from new line and all the divs with "inner" class has to be in the same line within "outer" div and the divs with deeper class inside "outer" div should start from new line and the "newLineContent" divs has to be in the same line within "deeper" divs
How can I achieve this using flexbox? or is there any other way to achieve it?
One can do similar without Flexbox, thought Flexbox appears to be the best in this case.
.outer,
.deeper {
display: flex;
flex-wrap: wrap;
}
.inner {
flex-grow: 1;
padding: 20px 10px;
border: 1px solid white;
background: lightgray;
}
.inner:last-child {
flex-basis: 100%;
}
.newLineContent {
flex-grow: 1;
padding: 10px;
border: 1px solid white;
background: lightgray;
}
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner">
<div class="deeper">
<div class="newLineContent"></div>
<div class="newLineContent"></div>
<div class="newLineContent"></div>
</div>
</div>
</div>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner">
<div class="deeper">
<div class="newLineContent"></div>
<div class="newLineContent"></div>
<div class="newLineContent"></div>
</div>
</div>
</div>
Updated based on a comment
If the deeper can be a child to any of the inner, and to achieve similar result, one would need either a parent selector, which doesn't exist, or give the inner an additional class for those that contain a deeper.
Another possible workaround could be to use viewport units vw.
.outer,
.deeper {
display: flex;
flex-wrap: wrap;
width: calc(100vw - 40px); /* 40px to make up for body's margins/scrollbar */
margin: 0 auto;
}
.inner {
flex-grow: 1;
padding: 20px 10px;
border: 1px solid white;
background: lightgray;
}
.deeper {
width: calc(100vw - 62px); /* 62px is to make up for "inner" padding/border, 22px,
and 40px for body's margins/scrollbar */
}
.newLineContent {
flex-grow: 1;
padding: 10px;
border: 1px solid white;
background: lightgray;
}
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner">
<div class="deeper">
<div class="newLineContent"></div>
<div class="newLineContent"></div>
<div class="newLineContent"></div>
</div>
</div>
</div>
<div class="outer">
<div class="inner"></div>
<div class="inner">
<div class="deeper">
<div class="newLineContent"></div>
<div class="newLineContent"></div>
<div class="newLineContent"></div>
</div>
</div>
<div class="inner"></div>
</div>
.outer{
display: flex;
}
Simple as that! How you configure parent and child options, depends on the effect you want to achieve.
You can do it with Flexbox:
.outer {
display: flex; /* displays flex-items (children) inline */
justify-content: space-between; /* MDN: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. */
}
.inner:last-child .deeper {
display: flex;
}
<div class="outer">
<div class="inner">1.1</div>
<div class="inner">1.2</div>
<div class="inner">1.3
<div class="deeper">
<div class="newLineContent">1.3.1</div>
<div class="newLineContent">1.3.2</div>
<div class="newLineContent">1.3.3</div>
</div>
</div>
</div>
<div class="outer">
<div class="inner">2.1</div>
<div class="inner">2.2</div>
<div class="inner">2.3
<div class="deeper">
<div class="newLineContent">2.3.1</div>
<div class="newLineContent">2.3.2</div>
<div class="newLineContent">2.3.3</div>
</div>
</div>
</div>
With your current HTML structure this is the result you get. Flex-items of the .inner:last-child .deeper div can't stretch the full width of the browser because the .deeper div represents one third of the parent element, i.e. the .outer div.
See my code at codepen
I'm trying to horizontally center the circle progress bar in the page, I tried setting margin: 0 auto; on the div, it didn't work. I, also, tried setting text-align: center on the parent div and setting the div to display: inline-block, no success as well.
This is the element in the HTML I'm trying to center:
<div class="row">
<div class="clearfix">
<div class="col-md-12">
<div class="timer"> <!-- this one should be centered -->
<div class="c100 p50 big">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
</div>
And this is the CSS I'm applying on the element:
.col-md-12{
width: 100%;
}
.timer{
width: 100%;
margin: 0 auto;
}
Remove float: left; or set it to none in .c100 css class.
.c100 {
float:none;
}
I think it should be like this.
<center>
<div class="row">
<div class="clearfix">
<div class="col-md-12">
<div class="timer"> <!-- this one should be centered -->
<div class="c100 p50 big">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
Replace your existing CSS rules with:
.col-md-12 {
text-align: center;
}
.timer {
display: inline-block;
}
<div class="timer"> <!-- this one should be centered -->
.timer{
width: 100%;
margin: 0 auto;
}
It is centered. It is also 100% wide, so being in the center is the same as being left or right aligned. It takes up all the space.
You need to set a smaller width in order for it to noticeably appear in the center.
Remove float: left;from .c100 class to center the div.
If that's what you wanted:
CodePen example
I added:
.timer {display: flex}
and also added a new class to it's only child
.align {margin: 0 auto !important;}
as .c100 overrides margins.