I have the following HTML code:
<span class="container">
<span id="item1" class="item">
<button class="removeitem"></button>
<span class="text"></span>
</span>
<span id="item2" class="item">
<button class="removeitem"></button>
<span class="text"></span>
</span>
<span id="item3" class="item">
<button class="removeitem"></button>
<span class="text"></span>
</span>
</span>
Imagine the #item3 extends .container, but overflow is hidden. How can I achieve that the elements inside are still visible and will continue in the following row?
I tried the following (in Sass-syntax):
.container
display: flex
justify-content: flex-start
flex-wrap: wrap
But #item3 will just appear on the next row.
I tried making everything display: inline, but then I can not assign any height-properties.
I attached an image of what I want to achieve.
This is what the layout should look like. #item3 continues in the next row:
What you are asking is not technically possible unless you use the natural wrapping of text as in this example:
.item {
display: inline;
background: yellow;
margin-right: 5px;
border: 2px solid green;
line-height: 2;
}
Fiddle:
https://jsfiddle.net/658tdurx/1/
Related
I want to do this:
However I'm having some issues with trying to have the Blue Link, the summary text and the Severity all align and having the severity on the far right.
I currently have this:
This is my code:
<div style={{ padding: 20, display: 'flex', 'justify-content': 'space-between' }}>
<div>
<p>
<a id="hyperlink" target="_blank" href={link} style={{ paddingRight: 16}}>
{element.key}
</Hyperlink>
{element.summary}
</p>
<a style={{ color: '#737373', 'font-size': '12px', 'line-height': '15px' }}>
{element.severity.toUpperCase()}
</a/>
</div>
</div>
I was told I have to use justify-content: space-between but it seems to not be working?
Any help would be very appreciated, thank you so much!
First of your code is a mess: You use a element that's no HTML5 element, forget to close multiple elements etc
As for the desired result, you have only 1 item within your flex box.
Try the code blow to fix your issues
.flex{
padding: 20;
display: flex;
justify-content: space-between;
}
.severity{
color: #737373; font-size: 12px; line-height: 15px;
}
#hyperlink{
padding-right: 16px
}
<div class="flex">
<div>
<p>
<a id="hyperlink" target="_blank" href="{link}" >
{element.key}
</a>
</p>
</div>
<div style="flex-grow:1;">
<p>{element.summary}</p>
</div>
<div>
<p>
<a class="severity">
{element.severity.toUpperCase()}
</a>
</p>
</div>
</div>
your html has for instance a p element inside that prohibits flexbox.
flex-grow: 1 makes the middle element large once flexbox is in force.
<div style="display: flex; justify-content:space-between">
<a>CSFID</a>
<a style="flex-grow:1">Multiselect</a>
<a >MINOR</a>
</div>
https://jsfiddle.net/wb104amk/1/
<div class="checkbox-password">
<div>
<mat-checkbox class="example-margin">Remember me</mat-checkbox>
</div>
<div>
<a routerLink="/forgotPassword" class="createAccount"
routerLinkActive="active"> Forgot Password? </a>
</div>
</div>
Using the above code I get remember me and forgotPassword next to each other, I need help in giving space between them, I have tried the following CSS code. Thanks in advance.
CSS:
.checkbox-password {
padding: 5px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between
}
Try giving a class to the div, and applying the styles to the div.
For example:
<div class="checkbox-password">
<div class="remember-me">
<mat-checkbox class="example-margin">Remember me</mat-checkbox>
</div>
<div>
<a routerLink="/forgotPassword" class="createAccount"
routerLinkActive="active"> Forgot Password? </a>
</div>
And in the css
.remember-me {
margin-bottom: 10px;
}
I have currently tried to set the vertical-align CSS to middle but it does not output as I would like.. thanks for feedback
<template>
<!-- block to be tested -->
<div data-v-5a5e3060="" class="layout row">
<div data-v-5a5e3060="" class="flex xs12">
<div data-v-5a5e3060="" class="text-xs-center">
<button data-v-5a5e3060="" type="button" class="btn btn--round">
<div class="btn__content">Clear</div>
</button>
<button data-v-5a5e3060="" type="submit" class="btn btn--round">
<div class="btn__content">LOGIN!<i data-v-5a5e3060="" aria-hidden="true" class="icon icon--right material-icons">lock_open</i></div>
</button>
<span data-v-5a5e3060="">Link to Forgot password?</span>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
span {
float: right;
vertical-align: middle;
}
</style>
Just use flex on the container element of the buttons and span, for instance:
.action-container {
display: flex;
align-items: center;
}
Also if using Vuetify, have a look here, there are inbuilt flex directives, so you can apply them directly on the container element without writing any additional CSS. For example, there's an align-center prop you can use.
Try to apply the following CSS to the span tag:
span {
position: absolute;
right: 0;
top: 0;
height: 100%;
display: flex;
align-items: center;
}
If it doesn't work add position: relative to the container div
Here is html:
<div style="height: 100px">
<span style="vertical-align:top;">top</span>
<span style="vertical-align:bottom;">bottom</span>
</div>
http://jsfiddle.net/CaS5r/1/
Why vertical-align property does not work in this example? Do I use it incorrectly?
I'm unsure what you want to achieve.
See this fiddle: http://jsfiddle.net/CaS5r/4/
It does work, but it only aligns to it's siblings.
some debugging
span {
outline: 1px solid red;
}
div {
background: yellow;
height: 100px;
}
HTML
<div >
<span style="vertical-align:top;">top</span>
<span style="vertical-align:middle;">middle</span>
<span style="vertical-align:baseline;">baseline</span>
<span style="vertical-align:bottom;">bottom</span>
</div>
UPDATE
you can see it better if the font is bigger (e.g. 50px) http://jsfiddle.net/CaS5r/5/
UPDATE
You probably want to use display: table;
http://jsfiddle.net/CaS5r/7/
Then it does what you expect
I have a varying number of inline-block divs that I want to collectively take up 100% of their parent. Can this be done without JavaScript? The only way I can think of is with a table but it's of course bad practice to use a table solely for layout purposes.
|----------------------|
|{ div 1 }{ div 2 }|
or
|{div 1}{div 2}{div 3}|
|----------------------|
I have also tried { display:block; float:left; } but it doesn't seem to make a difference.
You can use display:table-cell on your inner divs to do this. For the browser to make the inner divs behave like table cells, it also needs two layers of containing elements: one to acts as the table, and another to act as the table-row.
For a structure like this:
<div class="outer">
<div class="middle">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
<div class="inner">Item 3</div>
<div class="inner">Item 4</div>
</div>
</div>
Use this CSS:
div.outer {display:table;}
div.middle {display:table-row;}
div.inner {display:table-cell;}
A nice structure to use is a UL wrapped in a DIV: the DIV acts as a table, the UL as a row, and the LI's as table-cells.
This technique is not well supported in older browsers - for anything older than IE8, you're out of luck entirely.
Let me know if you need more sample code than that!
You can utilize css3 benefits here. I was also facing this issue now i have fixed that using below example code
.parent-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
-webkit-justify-content: space-around;
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
}
.child-item {
margin: 5px;
text-align: center;
padding: 10px;
background-color: red;
color: #fff;
}
<ul class="parent-container">
<li class="child-item">1</li>
<li class="child-item">2</li>
<li class="child-item">3</li>
<li class="child-item">4</li>
<li class="child-item">5</li>
<li class="child-item">6</li>
<li class="child-item">7</li>
</ul>
Thanks & Regards,
Lingeshram
The accepted answer missed an important CSS property which is necessary to work:
table-layout: fixed;
This is the correct answer:
HTML:
<div class="outer">
<div class="middle">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
<div class="inner">Item 3</div>
<div class="inner">Item 4</div>
</div>
</div>
</div>
CSS:
div.outer {display:table; table-layout: fixed;}
div.middle {display:table-row;}
div.inner {display:table-cell;}
I'd like to expound on #lingeshram's answer. Flexboxes have come so far that I think it's really the way to do it now. If you have to support old browsers, be sure to check caniuse first.
.container {
display: flex; /* or inline-flex */
}
.col {
flex-grow: 1;
border: 1px solid #000;
}
.col2x {
flex-grow: 2;
border: 1px solid #000;
}
Evenly split three children
<div class='container'>
<span class='col'>Inner 1</span>
<span class='col'>Inner 2</span>
<span class='col'>Inner 3</span>
</div>
<br>
Evenly split two children
<div class='container'>
<span class='col'>Inner 1</span>
<span class='col'>Inner 2</span>
</div>
<br>
Split three children, but the middle is twice the size of the others
<div class='container'>
<span class='col'>Inner 1</span>
<span class='col2x'>Inner 2</span>
<span class='col'>Inner 3</span>
</div>
Here is a pretty good guide to the different ways you can use flexbox.