Let i have a several number of buttons
<button ng-repeat="a in graphdata" class="inline">
I need to align all these buttons in a line, and all buttons should be visible, and it should adjust its width when new button is getting added.
Button should be attached to each other.
You can use flexbox
$('.new').click(function() {
$('.element').append('<button class="inline">Button</button>');
});
.element {
display: flex;
}
button {
flex: 1;
background: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="new">Add new Button</button>
<div class="element">
<button class="inline">Button</button>
</div>
You should wrap your buttons with flex container.
<style>
.wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap; /* if you want buttons in several lines */
}
button {
min-width: 50px;
}
</style>
<div class="wrapper">
<button ng-repeat="a in graphdata" class="inline"></button>
</div>
Related
I have 3 buttons nested within a parent container. The parent container has display:inline-flex, but the justify-content: space-between property isn't working. The buttons have a max-width defined (since justify-content can only work when there's empty space available). At this point, when I try different values for justify-content (space-between, space-around, center, etc) the grouping of buttons is moved around, but the individual buttons never separate. I've tinkered with this for a while, and read through a bunch of StackOverflow answers, but nothing has worked so far. Any help is appreciated! I have a codepen for testing things out. It's a simplified version of my angular code.
Just to fully document my issue here is the relevant code from production and a screenshot:
.loop-container {
display: inline-flex
flex-direction: row
justify-content: space-between
align-items: center
}
button {
height: 30px
flex: 1
}
.cancel {
background-color: red
}
.home {
background-color: blue
}
.small {
max-width: 75px
}
.large {
max-width: 140px
}
<ng-container class="button-container">
<div class='loop-container'>
<button class='cancel small'>Cancel</button>
<button class='home small'>Home</button>
<button class='cancel large'>Cancel Machine</button>
</div>
</ng-container>
Edited answer: Don't use display: inline-flex, but display: flex on the flex container. That way the flex container will be 100% wide by default.
Also, you wrote about justify-content: space-between not working, but in your code you have justify-content: center (?). I changed that to space-between in my snippet to show the effect.
.loop-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
button {
height: 30px flex: 1
}
.cancel {
background-color: red
}
.home {
background-color: blue
}
.small {
max-width: 75px
}
.large {
max-width: 140px
}
<ng-container class="button-container">
<div class='loop-container'>
<button class='cancel small'>Cancel</button>
<button class='home small'>Home</button>
<button class='cancel large'>Cancel Machine</button>
</div>
</ng-container>
You might also want to try space-around, which will leave some space at the far right and left too:
.loop-container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
button {
height: 30px flex: 1
}
.cancel {
background-color: red
}
.home {
background-color: blue
}
.small {
max-width: 75px
}
.large {
max-width: 140px
}
<ng-container class="button-container">
<div class='loop-container'>
<button class='cancel small'>Cancel</button>
<button class='home small'>Home</button>
<button class='cancel large'>Cancel Machine</button>
</div>
</ng-container>
If you're looking to have a gap between all the buttons then you'll have to add the margin, Justify content doesn't add a space between elements, it just moves the content based on your property values.
.loop-container {
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
button {
height: 30px;
flex: 1;
white-space: nowrap;
margin-right: 0.25rem;
}
button:last-child {
margin-right: 0;
}
.cancel {
background-color: red;
}
.home {
background-color: blue;
}
.small {
max-width: 75px;
}
.large {
max-width: 140px;
}
<ng-container class="button-container">
<div class='loop-container'>
<button class='cancel small'>Cancel</button>
<button class='home small'>Home</button>
<button class='cancel large'>Cancel Machine</button>
</div>
</ng-container>
I have a simple HTML code which contains three button inside a flex div as bellow;
When a user click on any of the buttons, that button will have the active class.
.box {
width: 100%;
background-color: red;
text-align: center;
}
.flexbox {
width: 100%;
justify-content: center;
}
.active {
background-color: yellow;
}
<div class="box">
<h4>HELLO</h4>
<div class="flexbox">
<button class="active">ONE</button>
<button>TWO</button>
<button>THREE</button>
</div>
</div>
What I need to achieve here is the button contain the active class should always be centre aligned in side the flex box.
According to the above, the button ONE has the active class and it should be centre aligned in side the flexbox and other two buttons should go right.
You can get the idea from the image below
NOTE: Preferred to solve this with use CSS only.
If it's only 3 buttons here is an idea using CSS grid:
.box {
background-color: red;
text-align: center; /* center the grid */
}
.flexbox {
display: inline-grid;
grid-template-columns: repeat(5, 1fr); /* 5 columns */
justify-content: center; /* center the columns */
gap: 5px;
}
.active {
grid-column: 3; /* active always on the middle */
}
/* we need a "hacky" code for the second case */
.active:nth-child(2) {
grid-area:1/1;
transform:translate(calc(200% + 10px)); /* 10px = 2xgap */
}
.active:nth-child(2) ~ :last-child {
grid-column:4;
}
<div class="box">
<h4>HELLO</h4>
<div class="flexbox">
<button class="active">ONE</button>
<button>TWO</button>
<button>THREE</button>
</div>
</div>
<div class="box">
<h4>HELLO</h4>
<div class="flexbox">
<button >ONE</button>
<button class="active">TWO</button>
<button>THREE</button>
</div>
</div>
<div class="box">
<h4>HELLO</h4>
<div class="flexbox">
<button >ONE</button>
<button >TWO</button>
<button class="active">THREE</button>
</div>
</div>
I am trying to display the <h1> on it's own line as well as the <h3> and all the buttons on 1 line together. I am using flex and I know how to do this normally, what I tried to do was display: block; on the buttons and h3 to have them on their own lines, this didn't work and I tried googling my way and finding some kind of flexbox guide to figure it out myself.
body {
margin: 0%;
background-color: #6987D5;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container h1 {}
.container button {
border: 0px;
background-color: #315dcc;
padding: 1%;
color: white;
}
<div class="container">
<h1>Stopwatch</h1>
<h3>00:00</h3>
<button type="button">Start</button>
<button type="button">Stop</button>
<button type="button">Reset</button>
</div>
You have to add a <div> around the buttons to combine them.
body {
margin: 0%;
background-color: #6987D5;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.container h1 {}
.buttons {
display: flex;
}
.container button {
border: 0px;
background-color: #315dcc;
padding: 1%;
color: white;
}
<div class="container">
<h1>Stopwatch</h1>
<h3>00:00</h3>
<div class="buttons">
<button type="button">Start</button>
<button type="button">Stop</button>
<button type="button">Reset</button>
</div>
</div>
If you want the tree buttons in a row, they need their own flex container. To display items in a column, you don't need flex since that is the default behaviour.
HTML
.container {
display:flex;
}
<div>
<h1>Stopwatch</h1>
<h3>00:00</h3>
<div class="container">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
</div>
CSS
.container {
display:flex;
}
You can wrap buttons and text within separate container divs like this.
<div class="container">
<h1>Stopwatch</h1>
<h3>00:00</h3>
</div>
<div class="container">
<button type="button">Start</button>
<button type="button">Stop</button>
<button type="button">Reset</button>
</div>
Your .container is flexed which is why you have everything flowing from left to right. You can set flex-direction: column; but that will just be complicating what is there by default.
All h element is blocked element which means they will fill up any available space. So remove display: flex; from the .container class selector and wrap your buttons in grid or flex container.
.button-group {
display:grid;
grid-template-colums: repeat(3, 1frm);
gap:1rem;
}
or
.button-group button{
gap: 1rem; //May not work on all browsers
display:flex;
flex-wrap:wrap;
}
and
<div class='button-group'>
<button>Start</button>
<button>Stop</button>
<button>End</button>
</div>
In theory you can just add:
flex-direction: column;
to the .container css
but it will make also start and stop buttons in column, is this what you wanted?
I am really struggling to understand how flex works, my aim in this pen
https://codepen.io/Esperteyu/pen/WMExEj
is to align the "Click Me Outside of the IFrame" button to the right limit of the iframe but in the "next line".
I can align it to it but just when I don't center the iframe container, if that makes sense. And ideally I would like the iframe centered and the button aligned to its right.
The html is:
<div class="container">
<div class="container-center ">
<div class="center ">
<iframe srcdoc="<html><body><h2 style='text-align:center'>This is the iframe</h2><input type='button' value='Click Me Inside the iframe' style='float: right;'></body></html>">
</iframe>
</div>
</div>
<div class="container-right">
<div class="right">
<div>
<input type="button" value="Click Me Outside of the iframe">
</div>
</div>
</div>
</div>
The css is:
.container {
background:red;
}
.container-center {
display:flex;
justify-content: center;
flex-direction: row;
width:100%;
}
.container-right {
display:flex;
justify-content: flex-end;
flex-direction: row;
}
.center {
display: flex;
background: lightblue;
}
.center iframe{
width: 100%;
}
Any help?
Thanks
To have the container-center centered in its parent, and as Flexbox doesn't have a property of its own to accomplish that, you could to take some help of e.g. a pseudo, to match the right element, combined with making the container a flex container.
.container {
background:red;
display:flex;
justify-content: center;
}
.container-right,
.container::before {
content: '';
flex: 1;
}
With the flex: 1, the pseudo and the container-right will take equal of the space left, and push the container-center to the middle, and with the align-items on the container-right you control the vertical alignment of its children.
If you check this codepen, where I added a border on the pseudo/right element, you'll see what is going on more clear.
Updated codepen
Stack snippet
.container {
background:red;
display:flex;
justify-content: center;
}
.container-right,
.container::before {
content: '';
flex: 1;
}
.container-center {
}
.container-right {
display:flex;
align-items: flex-end; /* align children vertically */
overflow: hidden;
}
.center {
display: flex;
background: lightblue;
}
.center iframe{
width: 100%;
}
<div class="container">
<div class="container-center ">
<div class="center ">
<iframe srcdoc="<html><body><h2 style='text-align:center'>This is the iframe</h2><input type='button' value='Click Me Inside the iframe' style='float: right;'></body></html>">
</iframe>
</div>
</div>
<div class="container-right">
<div class="right">
<div>
<input type="button" value="Click Me Outside of the iframe">
</div>
</div>
</div>
</div>
Updated based on a comment.
If you mean that the button outside the frame should right align on a row of its own, you need an extra wrapper to accomplish that.
Updated codepen
Stack snippet
.container {
background:red;
display:flex;
justify-content: center;
}
.container-right {
display:flex;
justify-content: flex-end;
}
.center {
display: flex;
background: lightblue;
}
.center iframe{
width: 100%;
}
<div class="container">
<div class="wrapper">
<div class="container-center ">
<div class="center ">
<iframe srcdoc="<html><body><h2 style='text-align:center'>This is the iframe</h2><input type='button' value='Click Me Inside the iframe' style='float: right;'></body></html>">
</iframe>
</div>
</div>
<div class="container-right">
<div class="right">
<div>
<input type="button" value="Click Me Outside of the iframe">
</div>
</div>
</div>
</div>
</div>
As a note, the last sample's code could be simplified, to this:
https://codepen.io/anon/pen/ddzNgy
I have the following html:
<div class="grommetux-box grommetux-box--direction-row grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-none grommetux-box--wrap second-header">
<div class="grommetux-box grommetux-box--direction-row grommetux-box--responsive grommetux-box--pad-none school-info">
<header class="grommetux-box grommetux-box--direction-row grommetux-box--align-center grommetux-box--pad-horizontal-none grommetux-box--pad-vertical-none grommetux-box--pad-between-small grommetux-header school-name">
<!-- react-text: 74 --><!-- /react-text -->
</header>
<header class="grommetux-box grommetux-box--direction-row grommetux-box--align-center grommetux-box--pad-horizontal-none grommetux-box--pad-vertical-none grommetux-box--pad-between-small grommetux-header grommetux-header--small school-code">
<!-- react-text: 76 -->School Code: <!-- /react-text -->
</header>
</div>
<div class="grommetux-box grommetux-box--direction-row grommetux-box--responsive grommetux-box--pad-none search-box">
</div>
</div>
My CSS
.grommetux-box {
display: -ms-flexbox;
display: flex;
background-position: 50%;
background-size: cover;
background-repeat: no-repeat;
}
.grommetux-box--direction-row {
-ms-flex-direction: row;
flex-direction: row;
}
.search-box {
text-decoration: none;
justify-content: flex-end;
}
.school-info {
text-indent: inherit;
flex-direction: inherit;
justify-content: flex-start;
display: flex;
}
Sorry this code doesn't show the whole picture but basically my issue is when I delete the first inner div, the second inner div replaces it by taking its place (moving left). How can I design my flex so that if I delete one, it doesn't effect the position of the other?
In case, there are multiple items inside a flex-container and we remove one or more items, browser will recalculate and update the position of rest of the items automatically.
There is one possibility though i.e instead of removing items from the DOM we just hide them from the view with visibility: hidden. This css property hides the elements from view but keep them in DOM. As a result elements with such style will be hidden but keep the space in view.
A quick demo is in below snippet:
.container {
min-height: 200px;
display: flex;
}
.item {
background: blue;
margin: 10px;
width: 15%;
}
.item.hidden {
visibility: hidden;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item hidden"></div>
<div class="item"></div>
</div>
Here's another trick that might be helpful in some cases. In case you want to keep certain flexbox items in their place while you add/remove others, you can use the visibility and height properties, such that you set the height of the 'hidden' item to 0 and only adjust it's visibility property to show/hide.
I do not know why this works exactly, but it does. Maybe someone more knowledgeable can shed light on this as well as its limitations. Upside is it does not use absolute positioning; it displays immediately after other flexbox items.
A useful use case would be to show an error message text without disrupting the flow of existing flexbox items.
document.querySelector('#btn').addEventListener('click', function() {
let additional_item = document.querySelector('.additional-item')
if (additional_item.style['visibility'] == 'visible') {
document.querySelector('.additional-item').style['visibility'] = 'hidden'
} else {
document.querySelector('.additional-item').style['visibility'] = 'visible'
}
})
.container {
height: 150px;
width: 250px;
background-color: lightgreen;
margin-bottom: 15px;
gap: 15px;
display: flex;
justify-content: center;
flex-direction: column;
}
.flex-item {
border: 1px solid black;
text-align: center;
}
.additional-item {
visibility: hidden;
height: 0px;
text-align: center;
}
#btn {
width: 250px;
}
<div class="container">
<div class="flex-item">Two flexbox items</div>
<div class="flex-item">perfectly positioned in the center</div>
<div class="additional-item">Item that does not move other items</div>
</div>
<button id="btn">Click to show/hide additional item</button>