I have a flexbox container where the items on each row overflow, and go onto the next line. Each item is aligned to a baseline; hence, the rows can be of varying sizes depending on which items are on which row and how they align to their baseline.
The items are pictured below being centered at a baseline:
I was wondering if there was a way to dynamically get the row height? Or get the distance from each item's baseline to the top/bottom of the row?
I would like to do this so i can set a hover state around the items that allow the hover to stretch over the item and have the height go all the way to the top of each row, hence the hover for each items will look as follows:
my attempt:
codepen
/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
border: 1px solid darkred;
}
/* so item doesn't move when not hovering */
.flex-item {
border: 1px solid lightblue;
}
.flex-container {
overflow: hidden; position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 350px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
}
.inner-wrapper {
display: inline-block;
text-align: center;
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-body-more {
float: left;
clear: left;
width: 100%;
}
.flex-img {
justify-content: center;
align-items: center;
}
<div class="flex-container">
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text more text more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
</div>
I was able to make the hover effect same height on all items by changing
.flex-container {
align-items: baseline
}
to
.flex-container {
align-items: strech
}
then I added the following lines to make items align vertically:
.flex-item {
display: flex;
align-items: center;
}
However, your original code is aligning these items "baseline" instead of "center".. I didn't figure out how to do that.
Hope this helps.
codepen: https://codepen.io/bottlecap/pen/pEgbNx
Try plugging this into codepen.
html
<div class="flex-container">
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text more text more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
</div>
css
/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
border: 1px solid darkred;
}
/* so item doesn't move when not hovering */
.flex-item {
border: 1px solid lightblue;
outline:1px solid red;
height:62vh;
}
.flex-container {
overflow: hidden; position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 400px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
flex-direction:column;
}
.inner-wrapper {
display: inline-block;
text-align: center;
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-body-more {
float: left;
clear: left;
width: 100%;
}
.flex-img {
justify-content: center;
align-items: center;
}
Related
I have some html div's and simple css style, something like this:
.wrap{
display: flex;
flex-direction:row;
justify-content: space-around;
align-items: center;
}
.child{
width: 45px;
height: 45px;
border-radius: 50%;
background-color: lightBlue;
display:flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
<div class='wrap'>
<div class='child'>
0
</div>
<div class='child'>
1
</div>
<div class='child'>
2
</div>
<div class='child'>
3
</div>
<div class='child'>
4
</div>
<div class='child'>
5
</div>
<div class='child'>
6
</div>
<div class='child'>
7
</div>
<div class='child'>
8
</div>
<div class='child'>
9
</div>
<div class='child'>
10
</div>
</div>
I would like to change position of this element on mobile device to something like this:
enter image description here
How can I do this? I was thinking first of all about flex-wrap and order?
You can do it like below:
.wrap {
display: flex;
flex-direction: row;
flex-wrap:wrap; /* enable the wrap*/
justify-content:center; /* center everything */
}
/* create a hidden element taking full width
used to seperate our elements
*/
.wrap:before {
content:"";
flex-basis:100%;
order:1
}
/* put all even elements after the seperation to have a new row*/
.child:nth-child(even) {
order:2;
}
.child {
width: 45px;
height: 45px;
margin:5px;
border-radius: 50%;
background-color: lightBlue;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
<div class='wrap'>
<div class='child'>
0
</div>
<div class='child'>
1
</div>
<div class='child'>
2
</div>
<div class='child'>
3
</div>
<div class='child'>
4
</div>
<div class='child'>
5
</div>
<div class='child'>
6
</div>
<div class='child'>
7
</div>
<div class='child'>
8
</div>
<div class='child'>
9
</div>
<div class='child'>
10
</div>
</div>
remove display: flex from .wrap and give .child display: inline-flex
CSS will be like that_
.wrap{
text-align: center;
}
.child{
width: 45px;
height: 45px;
border-radius: 50%;
background-color: lightBlue;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
How can I make "This text" to be on 2 lines, and center it next to the circle, also put the arrow between first and second circle
https://i.stack.imgur.com/2wfVy.png
<div className="steps">
<div className="circle">
<div className="step-number">{number}</div>
</div>
<div className="step-text">This text</div>
<div>{ shouldRenderArrow && <Icon className="arrow" name="ArrowDownward" /> }</div>
</div>
Some change require in your div and some styling need then you got.
.steps{
display: flex;
}
.circle {
border: 1px solid red;
border-radius: 50px;
float: left;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.step-text {
align-self: self-start;
justify-self: start;
flex-direction: column;
margin-left: 6px;
padding-top: 6px;
}
.arrow{
border: 1px solid;
width: 11px;
display: flex;
align-self: center;
justify-self: flex-end;
height:25px
}
.circle-arrow {
display: flex;
flex-direction: column;
}
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">1</div>
</div>
<Icon class="arrow" name="ArrowDownward" />
</div>
<div class="step-text">This text</div>
</div>
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">2</div>
</div>
<Icon class="arrow" name="ArrowDownward" />
</div>
<div class="step-text">This text</div>
</div>
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">3</div>
</div>
</div>
<div class="step-text">This text</div>
</div>
I'm using this html below to display a flex view on my website. But changing the text (length of the text) from a div will lead to the crazy-looking autoresizing.
How can I avoid this resizing in relation to this special div element below? How to keep the same layout when the click button is clicked?
Edit: I would like that neither the size nor the position of any element changes. (No matter how much text is inside!)
<div style="position: fixed; width:100%; height: 30%; left:0%; top: 0%; background: black; display: flex; justify-content: space-around; text-align: center; color: white">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">
.wrapper{
width:100%;
background: black;
display: flex;
justify-content: space-around;
text-align: center;
color: white;
}
.wrapper > div{
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
}
<div class="wrapper">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">
Here's the solution:
document.addEventListener("click", function(e){
if(e.target.id == "button")
document.getElementById('text').innerHTML+='.';
});
#navigation {
position: fixed;
width: 100%;
height: 30%;
left: 0%;
top: 0%;
background: black;
display: flex;
justify-content: space-around;
text-align: center;
color: white;
flex-basis: 1 1 100%;
}
#navigation > div {
flex-direction: column;
overflow: hidden;
width: 100%;
}
#button {
position: relative;
}
<div id="navigation">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<button id="button">click</button>
Edit: To lock the tekst as well. I would do it with align it left and than adding a padding to it:
#navigation > div > div:nth-child(2) {
padding-left: 10%;
text-align: left;
}
Add flex: 1 0 33%; to the elements you don't want to resize. This is equivalent to:
flex-grow: 1;
flex-shrink: 0;
flex-basis: 33%;
<div style="position: fixed; width:100%; height: 30%; left:0%; top: 0%; background: black; display: flex; justify-content: space-around; text-align: center; color: white">
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">
Here's an example of using max-width with your code. The first block will never be wider than 150px and text which which will overflow will be hidden.
.wrapper{
width:100%; background: black; display: flex; justify-content: space-around; text-align: center; color: white;
}
.wrapper > div{
flex: 1;
text-overflow:ellipsis;
overflow:hidden;
}
<div class="wrapper">
<div style="max-width: 150px">
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">
I try to add/remove -Class with on click event through data-attribute to another div.
When I click to TExt 2 the first FLAF 1 display none; And DOT should change the background. The TExt should be bind with FLAG and DOT elements above.
I've already the selected and active classes.
//plans secetor
var familyTariffSelected = '.boxy';
var builderCheckoutSteP = '.container .box';
var familyTariffSelectedData = $('.builder-tariff-family.selected').attr('data-selected');
var builderCheckoutStePData = $('.builder-checkout-steps .step.active').attr('data-selected');
$(familyTariffSelected).on('click', function() {
$(familyTariffSelected).removeClass('selected');
$(this).addClass('selected');
});
.container{
border: 2px black dotted;
display: flex;
justify-content: space-between;
}
.event-box{
display:flex;
margin: 20px 0;
background-color: gray;
justify-content: space-between;
}
.container .box .flag{
display:none;
}
.container .box .dot{
border: 1px solid green;
color:black;
}
.container .box.active .flag{
display: block;
background-color: green;
color:white;
}
.container .box.active .dot {
background-color: green;
color:white;
}
.boxy {
background-color: yellow;
cursor:pointer;
}
.boxy.selected {
background-color: #64B246;
}
<div class="container">
<div class="box active" data-selected="dalib-1"><p class="flag">FLAG 1</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-2"><p class="flag">FLAG 2</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-3"><p class="flag">FLAG 3</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-4"><p class="flag">FLAG 4</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-5"><p class="flag">FLAG 5</p> <span class=" dot">DOT</span></div>
</div>
<div class="event-box">
<div class="boxy" data-selected="dalib-1">TExt 1</div>
<div class="boxy" data-selected="dalib-2">TExt 2</div>
<div class="boxy" data-selected="dalib-3">Text 3</div>
<div class="boxy" data-selected="dalib-4">Text 4</div>
<div class="boxy" data-selected="dalib-5">TExt 5</div>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
It's a lot easier when you don't complicate it?
You have to get the data attribute inside the event handler, and then just target the .box with the same data attribute
$('.boxy').on('click', function() {
$('.boxy').removeClass('selected');
$(this).addClass('selected');
$('.box').removeClass('active')
.filter('[data-selected="' + $(this).data('selected') + '"]')
.addClass('active');
});
.container {
border: 2px black dotted;
display: flex;
justify-content: space-between;
}
.event-box {
display: flex;
margin: 20px 0;
background-color: gray;
justify-content: space-between;
}
.container .box .flag {
display: none;
}
.container .box .dot {
border: 1px solid green;
color: black;
}
.container .box.active .flag {
display: block;
background-color: green;
color: white;
}
.container .box.active .dot {
background-color: green;
color: white;
}
.boxy {
background-color: yellow;
cursor: pointer;
}
.boxy.selected {
background-color: #64B246;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box active" data-selected="dalib-1">
<p class="flag">FLAG 1</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-2">
<p class="flag">FLAG 2</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-3">
<p class="flag">FLAG 3</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-4">
<p class="flag">FLAG 4</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-5">
<p class="flag">FLAG 5</p> <span class=" dot">DOT</span></div>
</div>
<div class="event-box">
<div class="boxy" data-selected="dalib-1">TExt 1</div>
<div class="boxy" data-selected="dalib-2">TExt 2</div>
<div class="boxy" data-selected="dalib-3">Text 3</div>
<div class="boxy" data-selected="dalib-4">Text 4</div>
<div class="boxy" data-selected="dalib-5">TExt 5</div>
</div>
I want to make so that each 3 elements (top, middle and bottom) of my polygon changes color when you hover over it. I would normally do it with css: xxx:hover but since it involves 3 different elements that need to change at the same time, I can only assume that I need take a different approach. I assume some sort of javascript? Ideas?
CODEPEN: http://codepen.io/anon/pen/shfge
HTML
<div class="hex-row even">
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
<div class="hex-row">
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
CSS:
.hex {
float: left;
margin-left: 3px;
margin-bottom: -26px;
}
.hex:hover {
cursor: pointer;
}
.hex .top {
width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex .middle {
width: 104px;
height: 60px;
background: #6C6;
}
.hex .bottom {
width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex-row {
clear: left;
}
.hex-row.even {
margin-left: 53px;
}
Not too hard, just target the .hex container and it's children like so:
.hex:hover .top {
border-bottom-color: red;
}
.hex:hover .middle {
background: Red;
}
.hex:hover .bottom {
border-top-color: red;
}
http://codepen.io/anon/pen/GboDw