How can I align heading and button in same line? The button should be on the right side of the page, and the heading should be on the left side of the page.
Html:
<mat-card>
<h1>Simple card</h1>
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-fab>Basic</button>
</mat-card>
Demo
You can use the position:absolute by adding this HTML/CSS code
HTML
<mat-card>
<h1>Simple card</h1>
<div class="buttons">
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-fab>Basic</button>
</div>
</mat-card>
CSS
.mat-card{ position: relative }
h1{ margin-right: 120px; }
.buttons{
position: absolute;
top:50%;
right: 0;
width: 120px;
transform: translateY(-50%);
}
Using flexbox will align buttons and text as vertically center too.
Guide for flexbox
HTML
<mat-card>
<h1>Simple card</h1>
<div class="buttons">
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-fab>Basic</button>
</div>
</mat-card>
CSS
h1 {
margin: 0;
}
.mat-card {
display: flex;
align-items: center;
justify-content: space-between;
}
Demo
Related
I am trying to build a web form and the divs keep overlapping.
I am confused as to why.
I have separated all into separate divs and I'm trying to have them stack one after the other.
How can I get all the divs to be in separate rows such that it doesnt overlap.
This is the component.html file:
<div>
<!--Navbar-->
<mat-toolbar color="primary">
<div class="centerNavBar">
<a mat-button href="fa-dashboard">Back</a>
<span class="headSpacer">Damage Assessment Tool</span>
<a mat-button href="">Logout</a>
</div>
</mat-toolbar>
</div>
<div>
<mat-sidenav-container class="MainContainter">
<!--SideNav-->
<mat-sidenav mode="side" opened>
<div>
<a mat-button href="">Message Board</a>
</div>
</mat-sidenav>
<mat-sidenav-content class="MainContent">
<mat-card>
<mat-card-header class="sect">Create report:</mat-card-header>
<br><br>
<mat-card-content>
<!--Div for form-->
<div>
<mat-form-field>
<input
#MOCDateInput
matInput type= "Date"
required>
</mat-form-field>
<br>
<mat-form-field>
<mat-label>Comment</mat-label>
<input
#DescriptionInput
placeholder="--"
matInput type= "string"
required>
</mat-form-field>
<br>
<mat-form-field>
<mat-label>Facility In Question</mat-label>
<input
#MOCFacilityInput
placeholder="--"
matInput type= "string"
required>
</mat-form-field>
<br>
<br>
</div>
<div class="MOCMap">
<!--Div for Map-->
<div class="map-container">
<div class="map-frame">
<div id="map"></div>
</div>
</div>
</div>
<!--Div for buttons-->
<div>
<input
style="display: none;"
#ImageInput
type= "file"
(change)="onFileSelected($event)">
<br>
<br>
<button mat-raised-button type="button" (click)="ImageInput.click()">Upload An Image</button>
<button mat-raised-button
type="submit"
(click)="createMOCForm(MOCFacilityInput.value, DescriptionInput.value, MOCDateInput.value)" color="primary">Submit Report</button>
</div>
</mat-card-content>
</mat-card>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
The image shows the overlap
This is the global css file:
/* You can add global styles to this file, and also import other style files */
#import "~leaflet/dist/leaflet.css";
html, body {height: 100%}
body {
margin: 0;
font-family: Roboto;
background-color: ghostwhite;
}
.sect{
display: block;
margin-top: auto;
margin-left: auto;
margin-right: auto;
width: 850px;
background-color: white;
}
.centerNavBar {
margin: auto;
width: auto;
padding: auto;
}
.headSpacer{
margin-left: 100px;
margin-right: 100px;
}
/*map*/
.map-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 50px;
}
.map-frame {
border: 2px solid black;
height: 100%;
width: 50%;
}
#map {
height: 100%;
}
Any help would be appreciate, thank you in advance.
You want it to be laid out as
Form
Map
Buttons
Correct? It seems that only the map is a problem. Try removing the position: absolute and associated styles, your .map-container should look like this:
.map-container {
margin: 50px;
}
Setting position:absolute is causing the map to appear in the middle of the page, and disregard any layout. position:absolute puts the map some place relative to the nearest parent element with postition set to something.
I am creating a navigation bar, and i can't space the image and the button.
The Code file:
.mobile-navP4 {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="mobile-navP4">
<img class="logo-project-4" src="" alt="Logo Image" />
<button class="toggle-iconP4">
<i class="fas fa-bars fa-lg"></i>
</button>
</div>
I am new to angular and flex layout. My Page is pretty simple. Header with side navbar and router outlet.
I ran into the issue that my Page always shows a scrollbar.
If I remove fxFlexFill, scrollbar not showing. How can I fix this?
Here is stackblitz demo Stackblitz
Here is my template:
.fill-space {
flex: 1 1 auto;
}
.content {
flex: 1 1 auto;
padding: 15px;
position: relative;
overflow-y: auto;
}
.footer {
display: flex;
flex: 1 0 auto;
justify-content: center;
}
<div style="height: 100vh;">
<mat-toolbar color="primary" class="fixed-header">
<mat-toolbar-row>
<button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
<mat-icon>menu</mat-icon>
</button>
<span><button mat-button routerLink="/home"><h3>HOSPITALITY</h3></button></span>
<span class="fill-space"></span>
<div fxShow="true" fxHide.lt-md="true">
<button mat-button routerLink="/home">HOME</button>
<button mat-button routerLink="/account">MY ACCOUNT</button>
<button mat-button routerLink="/login">LOGOUT</button>
<a href="#" routerLink="/cart" mat-button>
<mat-icon>shopping_cart</mat-icon>
0
</a>
</div>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container fxFlexFill>
<mat-sidenav #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
<div fxLayout="column">
<button mat-button routerLink="/home">HOME</button>
<button mat-button routerLink="/account">MY ACCOUNT</button>
<button mat-button routerLink="/login">LOGOUT</button>
<a href="#" routerLink="/cart" mat-button>
<mat-icon>shopping_cart</mat-icon>
0
</a>
<a (click)="sidenav.toggle()" mat-list-item>
<mat-icon>close</mat-icon> Close
</a>
</div>
</mat-sidenav>
<mat-sidenav-content >
<div class="content">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
The main issue is that the side nav gets a height of 100vh via the fxFlexFill directive.
You need to take into account the height of mat-toolbar-row, for example, by CSS calc (there are other ways to achieve his effect, depends on how you struct page layout)
Additionally, the body has an 8px margin, from the browser default style.
Here is a fork of Stackblitz
I have some buttons on a row, two aligned on the left and one aligned on the right as follows:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* Vertically center the text there */
line-height: 60px;
background-color: #f5f5f5;
}
.fa-arrows-alt {
color: rgb(231, 81, 37);
cursor: pointer;
}
<script src="https://use.fontawesome.com/23ac9aaa92.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-12">
A div here
</div>
<div class="col-12 col-md-12">
<button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
<button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
<i class="fa fa-arrows-alt fa-2x float-right"></i>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
I would like the buttons to force them to be always on the bottom of the div, above the footer. I tried using bottom: 0 and position absolute, fixed but I received an unexpected result. Any suggestions are welcome.
use bootstrap 4 position-absolute predefined class and add bottom:0
.position-absolute {
bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid position-absolute">
<div class="row">
<div class="col-12 col-md-12 btn-row">
<button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
<button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
<button type="button" class="btn btn-outline-dark btn-sm float-right">Full Screen</button>
</div>
</div>
</div>
Use the flexbox classes that are built in to Bootstrap. You just need CSS to make sure the body is display:flex and full height...
https://www.codeply.com/go/lEaF85K1KU
CSS
body {
height:100vh;
display: flex;
flex-direction: column;
}
.flex-fill {
flex: 1 1 auto;
}
HTML
<main class="container-fluid d-flex flex-column flex-fill">
<div class="row flex-column flex-fill">
<div class="col-12 flex-fill">
A div here
</div>
<div class="col-12">
<button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
<button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
<i class="fa fa-arrows-alt fa-2x float-right"></i>
</div>
</div>
</main>
<footer class="container-fluid bg-light py-3">
Sticky Footer
</footer>
Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release. So after that release the extra CSS for flex-fill won't be needed.
To get something to stick to the bottom of the screen, do
<footer class="fixed-bottom">
To get buttons to go left and right give each button a class of “pull-left” or “pull-right”
I have to align two buttons at the bottom of the page, but I can not do it. One is the button "gallery" and the other is icon linkedin.
<div class="container fill">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item">
<div class="fill" style="background-image:url('http://www.mysite/images/category/image.jpg');background-position: center;">
<div class="container">
<div class="carousel-caption">
<h1>TITLE</h1>
<p class="lead">Description</p>
</div>
</div>
<div class="pull-right">
<a class="btn btn-large btn-primary" href="categories.php?id=17">View Gallery</a>
</div>
</div>
</div>
</div>
<div class="pull-left">
<div class="social-caption">
<button class="btn btn-large btn-linkedin">
<i class="icon-linkedin"></i><span><a style="color:white" vhref="http://www.linkedin.com/"> | Linkedin</span></button>
</div>
css for the two buttons:
.social-caption {
background-color: transparent;
position: relative;
max-width: 100%;
padding: 0 20px;
bottom: 45px;
left: 5px;
}
.gallery-button {
background-color: transparent;
position: relative;
max-width: 100%;
padding: 0 20px;
bottom: 45px;
right: 5px;
}
The two buttons do not appear aligned. This problem is seen especially with mobile devices
Solutions? Thanks
You could do something like THIS, for example. It uses position:absolute to locate the buttons at the bottom of the page's content (bottom:0) - or relative to their parents positioning (in this case the body. The alternative would be to use position:fixed which would ensure the buttons appear at the bottom of the viewport at all times.
See the difference between absolute positioning and fixed positioning.
HTML
<button>Button 1</button>
<button>Button 2</button>
CSS
body{
position:relative;
}
button{
position:absolute;
bottom:0;
}
button:last-child{
left:100px;
}
May be you could use this:
<input type='button' style='position:fixed; top:94%; left:82%; width:100px' value='
this means the button will appear at the right corner in the bottom of your page.
//hope so this code helps you.
.center{
justify-content: center;
display:flex;
align-item: center
}
.right{
justify-content: flex-end;
display:flex;
}
//for center align
<div class="center">
<button>First Button</button>
<button>Second Button</button>
</div>
//for right align
<div class="right">
<button>First Button</button>
<button>Second Button</button>
</div>