I'm having some problems with aligning the logo with the menu options on CSS/SCSS.
What it should look like:
How it is now:
CSS and HTML code:
nav {
background-color: black;
border: 1px solid black;
color: white;
}
.nav-wrapper {
display: flex;
}
.logo-app {
height: 60px;
width: 15em;
text-align: center;
padding-bottom: 1px;
padding-top: 3px;
}
.buttons {
position: relative;
}
<nav>
<img src="assets/images/logo.png" alt="brand-logo" class="logo-app">
<div class="buttons">
<button mat-button [matMenuTriggerFor]="aboveMenu">
<span>Sass</span>
</button>
<mat-menu #aboveMenu="matMenu" yPosition="above">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="aboveMenu"><span>Components</span></button>
<mat-menu #aboveMenu="matMenu" yPosition="above">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="aboveMenu"><span>JavaScript</span></button>
<mat-menu #aboveMenu="matMenu" yPosition="above">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
</div>
</nav>
You can make the nav element a flexbox container.
nav {
display: flex;
align-items: center;
background-color: black;
color: white;
}
.logo-app {
flex: none;
height: 60px;
margin: 1px;
}
.buttons {
flex: auto;
text-align: center;
}
<nav>
<img src="https://via.placeholder.com/60" alt="brand-logo" class="logo-app">
<div class="buttons">
<button mat-button [matMenuTriggerFor]="aboveMenu">
<span>Sass</span>
</button>
<mat-menu #aboveMenu="matMenu" yPosition="above">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="aboveMenu"><span>Components</span></button>
<mat-menu #aboveMenu="matMenu" yPosition="above">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<!-- hiding some buttons for better small demo
<button mat-button [matMenuTriggerFor]="aboveMenu"><span>JavaScript</span></button>
<mat-menu #aboveMenu="matMenu" yPosition="above">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
-->
</div>
</nav>
Here you go...
Just put <img src="assets/images/logo.png" alt="brand-logo" class="logo-app"> inside <div class="buttons">...</div>.
nav {
background-color: black;
border: 1px solid black;
color: white;
}
.nav-wrapper {
display: flex;
}
.logo-app {
height: 60px;
width: 15em;
text-align: center;
padding-bottom: 1px;
padding-top: 3px;
}
.buttons {
position: relative;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
</head>
<body>
<nav>
<div class="buttons">
<img src="assets/images/logo.png" alt="brand-logo" class="logo-app">
<button mat-button [matMenuTriggerFor]="aboveMenu">
<span>Sass</span>
</button>
<mat-menu #aboveMenu="matMenu" yPosition="above">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="aboveMenu"><span>Components</span></button>
<mat-menu #aboveMenu="matMenu" yPosition="above">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="aboveMenu"><span>JavaScript</span></button>
<mat-menu #aboveMenu="matMenu" yPosition="above">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
</div>
</nav>
</body>
</html>
Related
I have 11 buttons in 3 rows and since one is "alone" I want it on top and then two rows of buttons.
I tried all the flex-end and content align classes I know. But none seemed to do what I want. I tried these in all variations:
align-content: flex-end;
align-self: flex-end;
justify-content: flex-end;
flex-direction: row;
<div class="btn-group btn-group-toggle" data-toggle="buttons"
id="user_skill_level">
... the buttons
</div>
You might have to combine flex-direction: row-reverse; and flex-wrap: wrap-reverse; to get what you want.
Layout
In order to not to confuse with the default Bootstrap style, I created a custom class called .btn-group-custom.
<div class="btn-group btn-group-custom">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-primary">Button 2</button>
<button type="button" class="btn btn-primary">Button 3</button>
<button type="button" class="btn btn-primary">Button 4</button>
<button type="button" class="btn btn-primary">Button 5</button>
<button type="button" class="btn btn-primary">Button 6</button>
<button type="button" class="btn btn-primary">Button 7</button>
<button type="button" class="btn btn-primary">Button 8</button>
<button type="button" class="btn btn-primary">Button 9</button>
<button type="button" class="btn btn-primary">Button 10</button>
<button type="button" class="btn btn-primary">Button 11</button>
</div>
Styles
.btn-group-custom {
/*
* Wrap the overflow in the reverse order so that the "alone" would be on top
* instead of on the bottom
*/
flex-wrap: wrap-reverse;
/*
* You didn't mention where to put the "alone" button so I assumed you want it
* to be on the right side.
* Displaying the whole row in reverse order can achieve that!
*/
flex-direction: row-reverse;
}
.btn-group-custom > .btn {
/* Since you want 5 buttons in a row */
width: 20%;
}
.btn-group-custom > .btn:first-child,
.btn-group-custom > .btn:last-child {
border-radius: 0 !important;
}
/* Optional: to make rounded corner on the first and last child */
.btn-group-custom > .btn:first-child {
border-bottom-right-radius: .25rem !important;
}
.btn-group-custom > .btn:last-child {
border-top-left-radius: .25rem !important;
}
Result
demo: https://jsfiddle.net/davidliang2008/a3s7zno1/33/
I'm assuming that the "alone" button has to be in the center. Try this:
<div class="container">
<div class="row">
<button class="btn">Button 1</button>
</div>
<div class="row">
<button class="btn">Button 2</button>
<button class="btn">Button 3</button>
<button class="btn">Button 4</button>
<button class="btn">Button 5</button>
<button class="btn">Button 6</button>
</div>
<div class="row">
<button class="btn">Button 7</button>
<button class="btn">Button 8</button>
<button class="btn">Button 9</button>
<button class="btn">Button 10</button>
<button class="btn">Button 11</button>
</div>
</div>
and CSS
.container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.row {
margin: 0 auto;
}
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.
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 )
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>