I have a box with items which have a display: inline-block. In the case that items in the box don't fill the whole line, I would need to align the content in the middle, but items to the left.
I have tried to set up the whole content in inline-block, but this works only if there is just one line of items, not two or more lines. Also, I need it to be responsive, so no fixed indent can be used.
Screen:
Code:
.booking-time{
font-size: 0;
line-height: 0;
border: 1px solid red;
padding: 5px;
text-align: center;
}
.inner{
display: inline-block;
text-align: left;
}
.btn{
width: 100px;
background: #3578d5;
color: #fff;
display: inline-block;
vertical-align: middle;
font-size: 14px;
line-height: 20px;
padding: 8px 16px;
font-weight: 500;
text-align: center;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
border: none;
border-radius: 2px;
overflow: hidden;
position: relative;
transition: box-shadow 0.3s, color 0.3s, background 0.3s;
margin: 0 5px 5px 0;
}
<div class="booking-time">
<div class="inner">
<button type="button" class="btn btn-flat">
8:00 AM
</button>
<button type="button" class="btn btn-flat">
8:15 AM
</button>
<button type="button" class="btn btn-flat">
8:30 AM
</button>
<button type="button" class="btn btn-flat">
8:45 AM
</button>
<button type="button" class="btn btn-flat">
9:00 AM
</button>
<button type="button" class="btn btn-flat">
9:15 AM
</button>
<button type="button" class="btn btn-flat">
9:30 AM
</button>
<button type="button" class="btn btn-flat">
9:45 AM
</button>
<button type="button" class="btn btn-flat">
10:00 AM
</button>
<button type="button" class="btn btn-flat">
10:15 AM
</button>
<button type="button" class="btn btn-flat">
10:30 AM
</button>
<button type="button" class="btn btn-flat">
10:45 AM
</button>
<button type="button" class="btn btn-flat">
11:00 AM
</button>
<button type="button" class="btn btn-flat">
11:15 AM
</button>
<button type="button" class="btn btn-flat">
11:30 AM
</button>
<button type="button" class="btn btn-flat">
11:45 AM
</button>
</div>
</div>
You can remove display:inline-block; from the parent container but keep it in the child elements.
For your other container you can go:
.inner{
display:block;
max-width:90%;
margin:0 auto;
text-align: left;
}
Set the max-width to whatever suits you.
EDIT: I'm aware that this is not a perfect solution to what you wanted, but as far as I'm concerned what you want is not possible without some scripts.
This snippet can also be found on jsFiddle
.booking-time{
font-size: 0;
line-height: 0;
border: 1px solid red;
padding: 5px;
text-align: center;
}
.inner{
display:block;
max-width:90%;
margin:0 auto;
text-align: left;
}
.btn{
width:100px;
background: #3578d5;
color: #fff;
display: inline-block;
vertical-align: middle;
font-size: 14px;
line-height: 20px;
padding: 8px 16px;
font-weight: 500;
text-align: center;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
border: none;
border-radius: 2px;
overflow: hidden;
position: relative;
transition: box-shadow 0.3s, color 0.3s, background 0.3s;
margin: 0 5px 5px 0;
}
<div class="booking-time">
<div class="inner">
<button type="button" class="btn btn-flat">
8:00 AM
</button>
<button type="button" class="btn btn-flat">
8:15 AM
</button>
<button type="button" class="btn btn-flat">
8:30 AM
</button>
<button type="button" class="btn btn-flat">
8:45 AM
</button>
<button type="button" class="btn btn-flat">
9:00 AM
</button>
<button type="button" class="btn btn-flat">
9:15 AM
</button>
<button type="button" class="btn btn-flat">
9:30 AM
</button>
<button type="button" class="btn btn-flat">
9:45 AM
</button>
<button type="button" class="btn btn-flat">
10:00 AM
</button>
<button type="button" class="btn btn-flat">
10:15 AM
</button>
<button type="button" class="btn btn-flat">
10:30 AM
</button>
<button type="button" class="btn btn-flat">
10:45 AM
</button>
<button type="button" class="btn btn-flat">
11:00 AM
</button>
<button type="button" class="btn btn-flat">
11:15 AM
</button>
<button type="button" class="btn btn-flat">
11:30 AM
</button>
<button type="button" class="btn btn-flat">
11:45 AM
</button>
</div>
</div>
Just add width to .inner
.inner{
width: 80%; /* ADD THIS to set width of container */
display: inline-block;
text-align: left;
}
As you can see by background-color (jsFiddle), it works, but sometimes your buttons just doesn't fit an empty space and wrap to next line.
To solve this you would need to use css media queries or bootstrap for example. Using bootstrap you can easily make your buttons to adjust their width to available space ( jsFiddle )
Related
I am trying to recreate Microsoft Windows 10 calculator (check it out for reference). I am unable to align all my buttons since the buttons contain different letters and symbols. I want my all buttons to be exactly the same size and be next to each other with no spaces in between them.
Also, while posting this I noticed that my display is sticking out to the right more. Any idea for a fix?
Link to HTML and CSS combined:
https://codepen.io/anon/pen/jpLOjP
HTML:
<body>
<form id="calculatorForm">
<input type="text" id="display">
<div class="row">
<!--percent-->
<button type="button" onclick="calculate()">%</button>
<!--sq root-->
<button type="button" onclick="calculate()">√</button>
<!--x^2-->
<button type="button" onclick="calculate()">x²</button>
<!--1/x-->
<button type="button" onclick="calculate()">¹⁄<sub>x</sub></button>
</div>
<div class="row">
<button type="button" onclick="calculate()">CE</button>
<button type="button" onclick="reset()">C</button>
<!-- remove -->
<button type="button" onclick="calculate()">⇍</button>
<button type="button" onclick="calculate()">÷</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">7</button>
<button type="button" onclick="calculate()">8</button>
<button type="button" onclick="calculate()">9</button>
<button type="button" onclick="calculate()">×</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">4</button>
<button type="button" onclick="calculate()">5</button>
<button type="button" onclick="calculate()">6</button>
<button type="button" onclick="calculate()">−</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">1</button>
<button type="button" onclick="calculate()">2</button>
<button type="button" onclick="calculate()">3</button>
<button type="button" onclick="calculate()">+</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">±</button>
<button type="button" onclick="calculate()">0</button>
<button type="button" onclick="calculate()">⋅</button>
<button type="button" onclick="calculate()">=</button>
</div>
</form>
</body>
CSS:
#display {
font-size: 90px;
width: 100%;
}
form {
background: #eee;
border: solid grey;
display: block;
margin: 0 auto;
width: 450px;
padding: 10px;
}
.row {
font-size: 0px;
text-align: center;
margin: 0 auto;
}
.row button {
width: 25%;
height: 60px;
font-size: 40px;
font-family: calibri;
}
You're looking for vertical-align.
.row button{
vertical-align: middle;
}
Hey I am trying to make the left middle right buttons from this source.
So I started with
npm install bootstrap#3
After that I installed jQuery because of the description of the demo page
npm install jquery
My code is exactly the same as from the demo page but all I get is this:
.btn-round-lg{
border-radius: 22.5px;
}
.btn-round{
border-radius: 17px;
}
.btn-round-sm{
border-radius: 15px;
}
.btn-round-xs{
border-radius: 11px;
padding-left: 10px;
padding-right: 10px;
}
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-round btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-round btn-default">Right</button>
</div>
</div>
Here you go with a solution https://jsfiddle.net/ppL8stkv/
.btn-round-lg{
border-radius: 22.5px;
}
.btn-round{
border-radius: 17px;
}
.btn-round-sm{
border-radius: 15px;
}
.btn-round-xs{
border-radius: 11px;
padding-left: 10px;
padding-right: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-round btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-round btn-default">Right</button>
</div>
</div>
</div>
</div>
You might have missed bootstrap library. Check the jsfiddle.
Hope this will help you.
When i float a few buttons to the right, the order of those buttons changes.
I uploaded picture so you can see what i mean.
Navbar image
this is the code i'm using.
.btn{
float: left;
padding: 1.7em;
text-align: center;
display: inline-block;
border: none;
cursor: pointer;
color: white;
}
.navbar{
float: left;
background-color: #47476b;
}
.btnff{
-webkit-transition-duration: 0.7s;
transition-delay: 0.1s;
}
.btnff:hover{
background-color: black;
}
.active{
background-color: limegreen;
}
.right{
float: right;
}
<div>
<button class="btn btnff navbar active" type="submit">Button 1</button>
<button class="btn btnff navbar" type="submit">Button 2</button>
<button class="btn btnff navbar" type="submit">Button 3</button>
<button class="btn btnff navbar" type="submit">Button 4</button>
<button class="btn btnff navbar" type="submit">Button 5</button>
<button class="btn btnff navbar" type="submit">Button 6</button>
<button class="btn btnff navbar" type="submit">Button 7</button>
<button class="btn btnff navbar right" type="submit">Button 8</button>
<button class="btn btnff navbar right" type="submit">Button 9</button>
</div>
how can i get button 9 and 8 in the correct order? and how can i make the color of the buttons stretch the whole width of the screen so i don't get the white space in between the left and right buttons?
You could make a container around the 2 buttons and let the container float to the right.
.btn{
float: left;
padding: 1.7em;
text-align: center;
display: inline-block;
border: none;
cursor: pointer;
color: white;
}
.navbar{
float: left;
background-color: #47476b;
}
.btnff{
-webkit-transition-duration: 0.7s;
transition-delay: 0.1s;
}
.btnff:hover{
background-color: black;
}
.active{
background-color: limegreen;
}
.float-container{
float: right;
}
<div>
<button class="btn btnff navbar active" type="submit">Button 1</button>
<button class="btn btnff navbar" type="submit">Button 2</button>
<button class="btn btnff navbar" type="submit">Button 3</button>
<button class="btn btnff navbar" type="submit">Button 4</button>
<button class="btn btnff navbar" type="submit">Button 5</button>
<button class="btn btnff navbar" type="submit">Button 6</button>
<button class="btn btnff navbar" type="submit">Button 7</button>
<div class="float-container">
<button class="btn btnff navbar" type="submit">Button 8</button>
<button class="btn btnff navbar" type="submit">Button 9</button>
</div>
</div>
you can use text-align and only float the one you want left aligned.
You'll have to deal with white-space. here in snippet below i use a comment to get rid of it.
.btn{
float: left;
padding: 1.7em;
text-align: center;
display: inline-block;
border: none;
cursor: pointer;
color: white;
}
.navbar{
float: left;
background-color: #47476b;
}
.btnff{
-webkit-transition-duration: 0.7s;
transition-delay: 0.1s;
}
.btnff:hover{
background-color: black;
}
.active{
background-color: limegreen;
}
.right{
float: none;
}
div {text-align:right;}
<div>
<button class="btn btnff navbar active" type="submit">Button 1</button>
<button class="btn btnff navbar" type="submit">Button 2</button>
<button class="btn btnff navbar" type="submit">Button 3</button>
<button class="btn btnff navbar" type="submit">Button 4</button>
<button class="btn btnff navbar" type="submit">Button 5</button>
<button class="btn btnff navbar" type="submit">Button 6</button>
<button class="btn btnff navbar" type="submit">Button 7</button>
<button class="btn btnff navbar right" type="submit">Button 8</button><!--
comment to kill white-space from code indentation
--><button class="btn btnff navbar right" type="submit">Button 9</button>
</div>
Change the order of the buttons floated right in the HTML. Add a class to the containing div and use overflow: auto so it doensn't collapse while containing floated child elements.
.buttons {
background: #000;
overflow: auto;
}
.btn{
float: left;
padding: 1.7em;
text-align: center;
display: inline-block;
border: none;
cursor: pointer;
color: white;
}
.navbar{
float: left;
background-color: #47476b;
}
.btnff{
-webkit-transition-duration: 0.7s;
transition-delay: 0.1s;
}
.btnff:hover{
background-color: black;
}
.active{
background-color: limegreen;
}
.right{
float: right;
}
<div class="buttons">
<button class="btn btnff navbar active" type="submit">Button 1</button>
<button class="btn btnff navbar" type="submit">Button 2</button>
<button class="btn btnff navbar" type="submit">Button 3</button>
<button class="btn btnff navbar" type="submit">Button 4</button>
<button class="btn btnff navbar" type="submit">Button 5</button>
<button class="btn btnff navbar" type="submit">Button 6</button>
<button class="btn btnff navbar" type="submit">Button 7</button>
<button class="btn btnff navbar right" type="submit">Button 9</button>
<button class="btn btnff navbar right" type="submit">Button 8</button>
</div>
This can be done very effectively with flexbox, without floats:
Define the DIV container as flex container (display: flex), erase float: right from buttons 8 and 9 and assign margin-left: auto to button 8 (this moves everything from there on to the right end). In the code below I did that via the added classes .x and .y
.btn{
float: left;
padding: 1.7em;
text-align: center;
display: inline-block;
border: none;
cursor: pointer;
color: white;
}
.navbar{
float: left;
background-color: #47476b;
}
.btnff{
-webkit-transition-duration: 0.7s;
transition-delay: 0.1s;
}
.btnff:hover{
background-color: black;
}
.active{
background-color: limegreen;
}
.x {
display: flex;
}
.y {
margin-left: auto;
}
<div class='x'>
<button class="btn btnff navbar active" type="submit">Button 1</button>
<button class="btn btnff navbar" type="submit">Button 2</button>
<button class="btn btnff navbar" type="submit">Button 3</button>
<button class="btn btnff navbar" type="submit">Button 4</button>
<button class="btn btnff navbar" type="submit">Button 5</button>
<button class="btn btnff navbar" type="submit">Button 6</button>
<button class="btn btnff navbar" type="submit">Button 7</button>
<button class="btn btnff navbar y" type="submit">Button 8</button>
<button class="btn btnff navbar" type="submit">Button 9</button>
</div>
Similar to the button toolbar, I'm trying to implement a colour coded likert scale in my view (I'm using ASP.net) with labels on either side.
"not dangerous" [1][2][3][4][5] "dangerous"
[dark green][light green][yellow][orange][red]
https://gyazo.com/da61f52bae9336c34a9f89d69db5f5d4
Any ideas? Thanks!
2 part answer:
Likert - use a disabled .btn-link either side
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled>Safe</a>
<button type="button" class="btn btn-default likert-1">1</button>
<button type="button" class="btn btn-default likert-2">2</button>
<button type="button" class="btn btn-default likert-3">3</button>
<button type="button" class="btn btn-default likert-4">4</button>
<button type="button" class="btn btn-default likert-5">5</button>
<a class="btn btn-link disabled" disabled>Dangerous</a>
</div>
</div>
Color - just override the '.btn' colouring:
.btn.likert-1 { background-color: darkgreen; color: yellow; }
.btn.likert-2 { background-color: lightgreen; color: brown; }
.btn.likert-3 { background-color: yellow; color: brown; }
.btn.likert-4 { background-color: orange; color: white; }
.btn.likert-5 { background-color: red; color: white; }
/* Choose better colors tho! */
See this JSFiddle for an example.
I have a bootstrap sidebar that contains a couple buttons. Unfortunately, it looks very ugly and I want each button to be the same size.
These buttons are contained in a sidebar and will be stack vertically. I want to avoid setting a pixel number for each button. Here is the jfiddle
https://jsfiddle.net/66bk2rfc/
HTML
<div id="reading-sidebar" class="col-xs-3 panel-default">
<div id="reading-sidebar-title" class="panel-heading">Options
<button type="button" class="btn btn-xs btn-default pull-right" id="reading-sidebar-hide-btn"><i class="glyphicon glyphicon-remove"></i></button>
</div>
<div id="reading-sidebar-contents" class="panel-body">
<ul class="sidebar-button-list">
<button type="button" id="pre-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Pre Readings</button><br>
<button type="button" id="passage-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Passage</button><br>
<button type="button" id="post-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Post Readings</button><br>
<button type="button" id="media-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Media</button><br>
<button type="button" id="question-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Questions</button>
</ul>
</div>
</div>
The "bootstrap" way to do this would be to use btn-block on your button elements. Like so:
<button type="button" class="btn btn-primary btn-lg btn-block">Full-width Button</button>
You can also just surround them with <div class="btn-group-lg btn-group-vertical">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="reading-container" class="col-xs-6">
<div id="reading-sidebar" class="col-xs-3 panel-default"></div>
<div id="reading-sidebar-contents" class="panel-body">
<div class="btn-group-lg btn-group-vertical">
<button type="button" id="pre-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Pre Readings</button>
<button type="button" id="passage-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Passage</button>
<button type="button" id="post-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Post Readings</button>
<button type="button" id="media-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Media</button>
<button type="button" id="question-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Questions</button>
</div>
</div>
</div>
If I get your question right. Do you mean this:
#reading-sidebar-contents .btn{
width:200px;
}
Here is fiddle: https://jsfiddle.net/66bk2rfc/6/
I changed your fiddle to match a solution. You can give your sidebar a width of 100%. Then you can just make your buttons 80% with one line of css and make them stay in the middle with the margin:0 auto. If you want to adjust your size of the buttons, you can easely change it with just the one line. You could also add the text-align:left, set a font-size for all the buttons,... for better styling to the buttons.
#reading-sidebar
{
width:80%;
margin:0 auto;
}
#reading-sidebar-contents button
{
width:100%;
margin:0 auto;
}
Link: https://jsfiddle.net/66bk2rfc/1/
I suggess You to do it like this:
.btn {
width: 100%;
height: 56px;
padding-left: 2% !important;
}
.btn i {
left: 10px;
width: 10%;
top: 25%;
height: 50%;
}
.btn.pull-left {
text-align: left;
}
Also if you just want only these affect to sidebar buttons, add
#reading-sidebar .btn { } ETC...
If you want it not 100% width and centered, You should do it like this,
.btn { width: 80%; margin-left: 10%; }
That will make it centered easily. :)