This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 2 years ago.
I am trying to display a circle inside a flex container, but the content is squashed.
If the list has fewer items it displays correctly. How can I fix this?
.container {
max-height: 100px;
overflow: auto;
display: flex;
flex-direction: column;
border: 5px solid black;
}
.circle {
display: block;
margin-left: auto;
margin-right: auto;
border: 5px solid #555;
border-radius: 50%;
width: 25px;
height: 25px;
}
<body>
<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<div class="circle"></div>
</div>
I tried add flex: 1 0 auto; to the container but didn't work.
Add flex-shrink: 0 to .circle
.container {
max-height: 100px;
overflow: auto;
display: flex;
flex-direction: column;
border: 5px solid black;
}
.circle {
display: block;
margin-left: auto;
margin-right: auto;
border: 5px solid #555;
border-radius: 50%;
width: 25px;
height: 25px;
flex-shrink: 0
}
<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<div class="circle"></div>
</div>
Related
I have a list and one of the items of my list will be the active item. When the item has the active class I would like it to be underlined.
The problem I am running into is that because my item has a background color and padding to give it height, my underline is right under the block. I would like a space between the item and its underline like demonstrated below but I need the underline to be controlled via the active class not just slapped under the block the way I have in the example below.
ul {
display: flex;
justify-content: space-between;
}
li {
list-style-type: none;
width: 18%;
background-color: red;
display: flex;
justify-content: center;
padding: 2em 0;
color: white
}
li.active {
border-bottom: 4px solid blue;
}
.underline {
width: 17%;
background-color: blue;
height: 4px;
margin-left: 40px;
}
<h2>What I have</h2>
<ul>
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<h2>What I want</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<div class="underline"></div>
I am open to any suggestions including changing the way I have the list items set up. Thank you in advance!
You can use a pseudo element but here is another idea using outline and clip-path:
ul {
display: flex;
justify-content: space-between;
}
li {
list-style-type: none;
width: 18%;
background-color: red;
display: flex;
justify-content: center;
padding: 2em 0;
color: white
}
li.active {
outline: 4px solid blue; /* the border configuration */
outline-offset: 15px; /* the offset */
clip-path: inset(0 0 -40px); /* a big negative value (at least bigger than the offset) */
}
<h2>What I have</h2>
<ul>
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
you can use pseudo element:
ul {
display: flex;
justify-content: space-between;
}
li {
list-style-type: none;
width: 18%;
background-color: red;
display: flex;
justify-content: center;
padding: 2em 0;
color: white;
margin-bottom: 16px;
}
li.active {
position: relative;
}
li.active:after {
content: "";
position: absolute;
width: 100%;
height: 4px;
background: blue;
bottom: -16px;
left: 0;
}
<h2>What you want:</h2>
<ul>
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
This question already has an answer here:
Break unordered list items across columns with flexbox
(1 answer)
Closed 4 years ago.
I try to make 2 column list and vertical order using flexbox
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
see image for the example
Here's a simple wrapping column layout in flexbox.
Each li element takes up 6em height (5em height + .5em margin * 2), so we set the parent container to 30em height to fit five elements.
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
height: 30em;
}
li {
background: gray;
width: 5em;
height: 5em;
margin: .5em;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
The HTML is straight-forward:
<div class="items">
<div class="item">Heriberto Nickel</div>
<div class="item">Brittaney Haliburton</div>
<div class="item">Maritza Winkler</div>
<div class="item">Carmon Rigg</div>
<div class="item">Alice Marmon</div>
<div class="item">Lyman Steakley</div>
<div class="item">Zenia Correa</div>
</div>
<div class="items">
<div class="item">Heriberto Nickel</div>
<div class="item">Brittaney Haliburton</div>
<div class="item">Maritza Winkler</div>
<div class="item">Carmon Rigg</div>
<div class="item">Alice Marmon</div>
<div class="item">Lyman Steakley</div>
<div class="item">Zenia Correa</div>
</div>
Using floats, the CSS for this would be:
.items {
overflow: hidden; /* simple clearfix */
}
.items .item {
float: left;
width: 25%;
}
.items {
overflow: hidden; /* simple clearfix */
}
.items .item {
float: left;
width: 25%;
}
This gives us four columns that wrap. We can also add a little bit of style to give it a more pleasing look:
.items .item {
float: left;
width: 25%;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
.items .item {
float: left;
width: 25%;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
Hope this helps.
.list-one {
display: inline-block;
float: left;
list-style-type: none;
}
.list-two {
display: inline-block;
float: left;
list-style-type: none;
}
li {
margin-top: 10px;
}
.line-item {
background-color: grey;
height: 50px;
display: block;
color: #fff;
width: 50px;
padding: 30px 20px 0px 20px;
text-align: center
}
<ul class="list-one">
<li><span class="line-item">1</span></li>
<li><span class="line-item">2</span></li>
<li><span class="line-item">3</span></li>
<li><span class="line-item">4</span></li>
<li><span class="line-item">5</span></li>
</ul>
<ul class="list-two">
<li><span class="line-item">6</span></li>
<li><span class="line-item">7</span></li>
<li><span class="line-item">8</span></li>
<li><span class="line-item">9</span></li>
<li><span class="line-item">10</span></li>
</ul>
This question already has an answer here:
Break unordered list items across columns with flexbox
(1 answer)
Closed 4 years ago.
I try to make 2 column list and vertical order using flexbox
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
see image for the example
Here's a simple wrapping column layout in flexbox.
Each li element takes up 6em height (5em height + .5em margin * 2), so we set the parent container to 30em height to fit five elements.
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
height: 30em;
}
li {
background: gray;
width: 5em;
height: 5em;
margin: .5em;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
The HTML is straight-forward:
<div class="items">
<div class="item">Heriberto Nickel</div>
<div class="item">Brittaney Haliburton</div>
<div class="item">Maritza Winkler</div>
<div class="item">Carmon Rigg</div>
<div class="item">Alice Marmon</div>
<div class="item">Lyman Steakley</div>
<div class="item">Zenia Correa</div>
</div>
<div class="items">
<div class="item">Heriberto Nickel</div>
<div class="item">Brittaney Haliburton</div>
<div class="item">Maritza Winkler</div>
<div class="item">Carmon Rigg</div>
<div class="item">Alice Marmon</div>
<div class="item">Lyman Steakley</div>
<div class="item">Zenia Correa</div>
</div>
Using floats, the CSS for this would be:
.items {
overflow: hidden; /* simple clearfix */
}
.items .item {
float: left;
width: 25%;
}
.items {
overflow: hidden; /* simple clearfix */
}
.items .item {
float: left;
width: 25%;
}
This gives us four columns that wrap. We can also add a little bit of style to give it a more pleasing look:
.items .item {
float: left;
width: 25%;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
.items .item {
float: left;
width: 25%;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
Hope this helps.
.list-one {
display: inline-block;
float: left;
list-style-type: none;
}
.list-two {
display: inline-block;
float: left;
list-style-type: none;
}
li {
margin-top: 10px;
}
.line-item {
background-color: grey;
height: 50px;
display: block;
color: #fff;
width: 50px;
padding: 30px 20px 0px 20px;
text-align: center
}
<ul class="list-one">
<li><span class="line-item">1</span></li>
<li><span class="line-item">2</span></li>
<li><span class="line-item">3</span></li>
<li><span class="line-item">4</span></li>
<li><span class="line-item">5</span></li>
</ul>
<ul class="list-two">
<li><span class="line-item">6</span></li>
<li><span class="line-item">7</span></li>
<li><span class="line-item">8</span></li>
<li><span class="line-item">9</span></li>
<li><span class="line-item">10</span></li>
</ul>
I have 2 drop down ol next to each other, but when the first one is clicked, it brings the second one down with it instead of leaving it at the top.
I can't use position: absolute with either of them as there will be content at the bottom that needs to be pushed down when the drop down is active.
This is the code I have
HTML
<div id="lists">
<div id="list_one">
<a>List One</a>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ol>
</div>
<div id="list_two">
<a>List Two</a>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ol>
</div>
</div>
CSS
#lists {
border: 2px solid blue;
position: relative;
width: 300px;
}
#list_one {
width: 100px;
border: 2px solid red;
}
#list_one ol {
display: none;
}
#list_two {
width: 100px;
border: 2px solid green;
position: relative;
top: -25px;
left: 200px;
}
#list_two ol {
display: none;
}
jQuery
$('#list_one a').click(function(){
$('#list_one ol').toggle();
});
$('#list_two a').click(function(){
$('#list_two ol').toggle();
});
jsfiddle: https://jsfiddle.net/e3tctuzp/
Float the two lists left and right within the container, and then set the display of the container to inline-block.
So the CSS for the lists would be:
#lists {
border: 2px solid blue;
position: relative;
width: 300px;
display:inline-block
}
#list_one {
width: 100px;
border: 2px solid red;
float:left;
}
#list_two {
width: 100px;
border: 2px solid green;
position: relative;
float:right;
}
See jsfiddle
Instead of setting the list positions as relative, you could make them float. For that to work you need to set overflow: auto in your #lists, though. You can then float list one to the left and list two to the right. It would look something like this:
#list_one {
...
float: left;
}
#list_two {
...
float: right;
}
#lists {
overflow: auto;
}
Here is your edited fiddle: https://jsfiddle.net/e3tctuzp/2/
http://jsfiddle.net/Dmb7v/ :
<body>
<div class="Shell">
<div class="Main">
<div class="Header">
<p>Name Surname</p>
<p>G123456789</p>
</div>
<div class="Content">
<p>VIEW NAVIGATION</p>
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>Menu Item 6</li>
<li>Menu Item 7</li>
<li>Menu Item 8</li>
<li>Menu Item 9</li>
<li>Menu Item 10</li>
</ul>
</div>
</div>
<div class="Pane">
<div>
<img src="http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/beer.png" height="48px" width="48px">
</div>
<div>
<span class="PaneText">My Team's Requests / Managed by my direct reports / Processes Completed / Processes Completed / Processes Completed / Processes Completed</span>
</div>
</div>
</div>
</body>
And CSS:
* {
padding: 0;
margin : 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.Shell {
height: 100%;
}
.Main {
width: 332px;
height: 100%;
background-color: #ffcccc;
border: 2px solid red;
float: left;
}
.Header {
width: 332px;
height: 56px;
background-color: #ccccff;
border: 2px solid blue;
}
.Content {
width: 332px;
background-color: #ccffcc;
border: 2px solid green;
}
.Pane {
height: 100%;
width: 48px;
background-color: #ffffcc;
border: 2px solid yellow;
overflow: visible;
float: left;
}
.PaneText {
-webkit-transform: rotate(90deg);
font-size: 30px;
white-space: nowrap;
display: block;
height: 100%;
width: 48px;
}
I've built a very basic menu on the left side of the screen. I will have text vertically run down the right side of the menu. The text is rendered in full but the DIV it's inside will not.
What am I doing wrong? I've found all sorts of suggestions but none work. Suggestions such as this:
html, body {
min-height:100%;
height:auto;
height:100%;
}
None of them worked. What am I doing wrong?