I have 4 panels in my page. At a time (depending on certain conditions) either 1,2,3 or all 4 panels are displayed. I want the panels to re-align themselves so that there is no empty space for the panels which are not present.
How can I do this?
EDIT: If all panels are visible then it will look like this :
http://ibin.co/1zrkoFfExnRZ
If suppose Pannel 3 is hidden it will look like this :
http://ibin.co/1zrkcO4vTjHW
.container {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
justify-content: space-around;
padding: 0;
margin: 0;
list-style: none;
}
.rowitem {
background: #ff0000;
padding: 2px;
width: 50%;
height: 50px;
margin-top: 6px;
line-height: 50px;
text-align: center;
font-weight: bold;
border: 1px solid #fff;
}
<ul class="container">
<li class="rowitem">01</li>
<li class="rowitem">02</li>
<li class="rowitem">03</li>
<li class="rowitem">04</li>
</ul>
Related
I want to show a list of tags at the bottom of the screen and if they don't all fit, I want it to wrap so that it's the first line that is the shortest - not the last line.
Once the bottom line is full, I would prefer if the next item added would be what would then appear above instead of below. But if it's easier to make the first item move up that would be ok too.
This example should make it clear:
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
This can be achieved by adding flexbox styles to the parent container like so:
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
/* flexbox styles */
display: flex;
flex-wrap: wrap-reverse;
justify-content: flex-end;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
/* margin to separate tags */
margin: 0.1em;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
Try using display:flex, also use flex-wrap:wrap-reverse in order to wrap the elements the way you want.
div {
display: flex;
flex-wrap: wrap-reverse;
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
}
Using flex property to align like this,
div {
display: flex;
flex-wrap: wrap-reverse; // reverse the wrapping
flex-direction: row-reverse; // reverse the row
}
also add some margin to span
span{
margin:3px;
}
flex-wrap - The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
flex-direction: row-reverse - Work in a left-to-right language such as English. If you are working in a right-to-left language like Arabic then row would start on the right, row-reverse on the left.
Result:-
LIVE DEMO
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
margin:3px;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
I've been having trouble positioning and displaying dropdown menu below the navigation bar which is styled with flexbox, it appeas that the dropdown menu that overflows out of the flex container is hidden, even though it was given position: absolute and z-index. dropdown menu hidden vertically display please help me and take a look at my code.
<ul class="topNav" id="myTopNav" role="navigation">
<li>shopping bag</li>
<li>sign in</li>
<li class="all_categories">
<ul class="categories">
<li class="category-women">
women
<ul class="sub-category">
<li> New in!</li>
<li> Tops</li>
<li> Coats & Jackets</li>
</ul>
</li>
<li class="category-men">men</li>
<li class="category-home">home & gift</li>
</ul>
</li>
</ul>
The .topNav is the flex container is styled like this:
.topNav {
width: 100%;
padding-left: 2%;
padding-right: 2%;
padding-top: 0.6%;
padding-bottom: 0.6%;
border-bottom: #c9c8c7 0.02em solid;
position: sticky;
top: 0;
overflow: hidden;
display: flex;
flex-direction: row;
align-items: center;
}
The links inside navigation bar are displayed as block;
here's my code for the drop down menu:
.category-women{
border: 1px dotted red;
}
.sub-category {
display: none;
position: absolute;
background-color: green;
min-width: 100px;
z-index: 2;
border: 1px solid yellow;
}
.sub-category a {
font-size: 1em;
display: block;
padding: 0;
margin: 0 8px;
background-color: green;
}
.category-women:hover .sub-category {
display: flex;
flex-direction: column;
justify-content: space-between;
}
So the conditions that I would like to achieve is
Width of each tab is based on the label
All tabs are the same size as the longest tab (with longest label)
As such the tab group should not be fixed or take up 100% of parent. Should be based on longest tab.
The layout of the tabs are side by side.
This is my progress so far (not same width as largest): https://jsfiddle.net/cyhwx7z0/5/
I have tried this solution but the layout is not side by side. https://jsfiddle.net/alexkwa/L9oy6hbp/1/
HTML
<div class="wrapper">
<ul class="tab-group">
<li class="single-tab">Tab 1</li>
<li class="single-tab">Tab 2</li>
<li class="single-tab">Very Long Tab Name</li>
<li class="single-tab active">Tab 4</li>
<li class="single-tab">Tab 5</li>
</ul>
</div>
SCSS
$active-color: #262933;
$inactive-color: #B3B4B8;
$inactive-font-color: #8B8C8F;
$border-thickness: 1px;
$border-radius: 3px;
body {
background: #fff;
padding: 20px;
font-family: Helvetica;
}
.wrapper {
display: inline-block;
}
.tab-group {
display: flex;
flex-direction: column;
list-style: none;
}
.single-tab {
background-color: #fff;
border: $border-thickness solid $inactive-color;
border-right: 0;
border-sizing: border-box;
color: $inactive-font-color;
cursor: normal;
font-size: 14px;
padding: 9px 21px;
margin: 0;
margin-left: -6px;
user-select: none;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
.single-tab:first-child {
border-radius: $border-radius 0 0 $border-radius;
}
.single-tab:last-child {
border-radius: 0 $border-radius $border-radius 0;
border-right: $border-thickness solid $inactive-color;
}
.single-tab.active {
background-color: $active-color;
border: $border-thickness solid $active-color;
color: #fff;
}
.single-tab.active + .single-tab {
border-left: 0;
}
.single-tab:last-child.active {
border-left: 0;
}
Any ideas?
Try this
.tab-group {
display: flex; // instead of inline flex
... all other styles
}
.single-tab {
flex: 1; // makes your tabs of same width
... all other styles
}
Here's the working fiddle - https://jsfiddle.net/flexdinesh/xuc6amcu/2/
If you require the parent to not take up the full width, you have to define it manually, say 60%. Example fiddle - https://jsfiddle.net/flexdinesh/xuc6amcu/3/
I have the following simple html code for a simple template:
<!DOCTYPE html>
<html>
<head>
<title>My new website</title>
<meta name="description" content="Simple website styled using flex box layout">
<meta http-equiv="refresh" content="60">
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div class="mainContainer">
<nav class="mainMenu">
<ol>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact Us
</li>
</ol>
</nav>
<div class="mainArea">
<aside class="leftBar">
<h3>Navigation side bar</h3>
<p>Still need to think better what I will implement here.</p>
</aside>
<article class="mainContent">
<h1>Welcome!</h1>
<p>Nice to meet you...</p>
</article>
<aside class="rightBar">
<h3>News</h3>
<p>No news for now.</p>
</aside>
</div>
<footer class="mainFooter">
<p>Copyright ©
someone
</p>
</footer>
</div>
</body>
</html>
But the layout broke after I added <!DOCTYPE html> at the beginning of the html code. Now it looks like this:
But it should look like this:
Not only the margins broke, for example also the navigation bar is not exactly how it should be. I searched around for a solution, and there are some problems related, but I simply cannot understand why there this problem.
Here you have the CSS code:
html, body{
height: 100%;
width:auto;
font: 14px Arial;
color:white;
background: #444;
}
/* links */
a{
text-decoration: none;
color: #00aefb;
}
a:visited{
color:#008efb;
}
a:hover{
color: #999;
}
/* flex elements */
.mainContainer, .mainFooter, .mainArea, .mainMenu, .mainMenu ol{
display: flex;
display: -webkit-flex;
display: -moz-flex;
}
/* Main container */
.mainContainer{
font-family: Georgia;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
}
/* mainMenu and footer */
.mainMenu, .mainFooter{
background: #555;
border: 1px solid white;
border-radius: 2px;
padding: 10px;
}
/* Just footer */
.mainFooter {
text-align: center;
font: 15px Arial;
min-height: 60px;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
}
/* Main area of contents */
.mainArea{
color: white;
border: 1px solid white;
border-radius: 2px;
margin: 20 0 20 0;
min-height:800px;
}
/* Main area of the main area */
.mainContent{
background: #eee;
color: black;
padding:20px;
flex: 2 2 50%;
-webkit-flex: 2 2 50%;
-moz-flex: 2 2 50%;
}
/* Left and right side bars */
.leftBar, .rightBar{
padding: 10px;
flex: 1 1 15%;
-webkit-flex: 1 1 15%;
-moz-flex: 1 1 15%;
}
/* mainMenu bar at the top */
.mainMenu {
font: 16px Arial;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
padding: 0;
}
.mainMenu ol {
list-style: none;
padding: 0; /* Removes annoying indentation */
margin: 0;
text-align: center;
}
.mainMenu ol li{
display: inline;
padding: 20px;
margin: 0 30 0 30;
}
li:hover, li.active{
background: #222;
color: #999;
border-radius: 5px;
}
#media all and(max-width: 640px){
.mainArea{
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
}
.mainMenu {
font: 18px Arial;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
}
.mainMenu ol {
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
align-items:stretch;
-webkit-align-items:stretch;
-moz-align-items:stretch;
}
.mainMenu ol li {
margin: 0;
padding: 10px;
}
.mainContainer .mainArea {
border: 0;
border-radius: 0;
}
.mainContent{
order: -1;
-webkit-order: -1;
-moz-order: -1;
margin: 0 0 20 0;
border: 1px solid white;
border-radius: 2px;
}
.leftBar {
margin: 0 0 20 0;
border: 1px solid white;
border-radius: 2px;
}
.rightBar{
border: 1px solid white;
border-radius: 2px;
}
}
I wouldn't say that adding <!DOCTYPE html> breaks out the layout. The doctype tells the browser how to interpret the HTML and CSS, if you don't specify one, then the browser goes in quirk mode, and the display is different from a strict mode.
By adding the <!doctype html>, some of your CSS styles become incorrect and the browser does interpret them the best way that it can. For example, one of the issues that you have is that there are some non-zero numeric values without specifying the unit (e.g.: margin: 20 0 20 0;).
You are missing .mainMenu { margin-bottom: 10px; }
Or alternatively, if you want to use <!DOCTYPE html> then fix this .mainArea { margin: 20px 0 20px 0; }, you did not mention any units.
CSS Units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin,
padding, font-size, border-width, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
A whitespace cannot appear between the number and the unit. However,
if the value is 0, the unit can be omitted.
For some CSS properties, negative lengths are allowed.
There are two types of length units: relative and absolute.
Reference
I'm using the flexbox layout to style a list of past tasks. The task description and the time are always going to be of very variable lengths.
Everything looks great until a task description is entered which is long enough to wrap onto a second line and then the 'time' item (on the far right of the screen) is pushed slightly to the right - off the screen - hiding some of the content.
You can see the short description displays perfectly below, but the long one pushes what should be '00:08' off the screen AND the task description moves to the left as well!!
Here's a fiddle for the code (which is below as per Stackoverflow's rules).
If you resize the pane containing the result the '00:08' doesn't fall off the page but it does clearly move too far to the right.
The above screenshot is in Chrome or Safari (the two browsers I was using) when shrinking the width of the window until the description wraps onto a second line.
I would like everything to display as per the first (short description) line if possible! And also to understand why this is behaving as it currently is.
P.S. I have tried using floats and also using a table display layout but both of these techniques caused quite a few bugs, mostly because of the variable length content (so please don't suggest these as alternatives :)).
ul {
margin:0;
padding: 0;
}
#tasklist{
width: 100%;
}
.task-one-line{
display: flex;
flex-direction:row;
flex-wrap: nowrap;
justify-content: space-between;
align-item: baseline; /*flex-end*/
display: -webkit-flex;
-webkit-flex-direction:row;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;
-webkit-align-item: baseline;
border-bottom: 1px solid #d3d3d3;
width: 100%;
}
.task-one-line i{
width:1.5em;
padding: 0.5em 0.3em 0.5em 0.3em;
/*border: 1px solid green;*/
}
span.task-desc{
flex-grow: 5;
-webkit-flex-grow: 5;
text-align:left;
padding: 0.3em 0.4em 0.3em 0.4em;
/*border: 1px solid red;*/
}
span.task-time{
flex-grow: 1;
-webkit-flex-grow: 1;
flex-basis:4em;
-webkit-flex-basis:4em;
text-align:right;
padding: 0.3em 0.5em 0.3em 0.5em;
/*border: 1px solid blue ;*/
}
<ul id="tasklist">
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">And a short one</span>
<span class="task-time">00:01</span>
</li>
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">Here's a super long long long long long long description that might wrap onto another line</span>
<span class="task-time">00:08</span>
</li>
</ul>
I had a similar issue, I created a pen with the fix:
https://codepen.io/anon/pen/vRBMMm
.flex {
display: flex;
padding: 8px;
border: 1px solid;
}
.a {
margin-right: 16px;
}
.b {
flex: 1;
background: #ffbaba;
min-width: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.c {
flex-shrink: 0;
margin-left: 16px;
}
<div class="flex">
<div class="a">1st div</div>
<div class="b">HELLO2HELLO2 HELLO2HELLO2 2222 HELLO2HELLO 22222</div>
<div class="c">3rd div</div>
</div>
Really, you only want the text content to have a flexible width (the time and the icon should have a fixed width and not shrink). This could be pretty easily accomplished with tables, absolute positioning, or flexbox.
Here's the flexbox that you need to know:
.task-time: flex: 1 0 4em
.task-one-line i.fa { flex: 0 0 auto; }
ul {
margin:0;
padding: 0;
}
#tasklist{
width: 100%;
}
.task-one-line i.fa { flex: 0 0 auto; }
.task-one-line{
display: flex;
flex-direction:row;
flex-wrap: nowrap;
justify-content: space-between;
align-item: baseline; /*flex-end*/
display: -webkit-flex;
-webkit-flex-direction:row;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;
-webkit-align-item: baseline;
border-bottom: 1px solid #d3d3d3;
width: 100%;
}
.task-one-line i{
width:1.5em;
padding: 0.5em 0.3em 0.5em 0.3em;
/*border: 1px solid green;*/
}
span.task-desc{
flex-grow: 5;
-webkit-flex-grow: 5;
text-align:left;
padding: 0.3em 0.4em 0.3em 0.4em;
/*border: 1px solid red;*/
}
span.task-time{
flex: 1 0 4em;
-webkit-flex: 1 0 4em;
text-align:right;
padding: 0.3em 0.5em 0.3em 0.5em;
/*border: 1px solid blue ;*/
}
<ul id="tasklist">
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">And a short one</span>
<span class="task-time">00:01</span>
</li>
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">Here's a super long long long long long long description that might wrap onto another line long long long long long long description that might wrap onto another line</span>
<span class="task-time">00:08</span>
</li>
</ul>
My general rule for flex is flex the containers you want to flex and don't flex the ones you do not. I would do the following to the time container.
span.task-time {flex: none;}