I want add two div's in a single div one is to right and other is to left.
<html>
<div>
<div><button class="mat-button menu-button">
<mat-icon color="primary"> remove </mat-icon>
Add Site
</button>
</div>
<div *ngIf="showButtons">
<button>edit</button>
<button >Save</button>
</div>
</div>
</html>
use float css property to align div left and right
.left {
float: left;
}
.right {
float: right;
}
<div>
<div class='left'><button class="mat-button menu-button">
<mat-icon color="primary"> remove </mat-icon>
Add Site
</button>
</div>
<div *ngIf="showButtons" class='right'>
<button>edit</button>
<button>Save</button>
</div>
</div>
you can use ng-container instead of div for button one is to right and other is to left.
<div>
<button class="mat-button menu-button">
<mat-icon color="primary"> remove </mat-icon>
Add Site
</button>
<ng-container *ngIf="showButtons">
<button>edit</button>
<button>Save</button>
</ng-container>
</div>
You could set the display to flex, the default direction is row :
<div style="display:flex;">
<div><button class="mat-button menu-button">
<mat-icon color="primary"> remove </mat-icon>
Add Site
</button>
</div>
<div *ngIf="showButtons">
<button>edit</button>
<button >Save</button>
</div>
</div>
.firstCol{
float : left;
}
<html>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="firstCol"><button class="mat-button menu-button">
<mat-icon color="primary"> remove </mat-icon>
Add Site
</button>
</div>
<div *ngIf="showButtons">
<button>edit</button>
<button >Save</button>
</div>
</div>
</div>
</div>
</html>
You did it well, just add a class name or an Id on the div and you can do what you want with CSS with for exemple the float property.
Related
I am using *ngFor for displaying multiple buttons, it can have many buttons. Currently I am getting all the buttons in one column, means one below one.
But I want to display only 2 buttons in a row, means, in above case these green buttons should be in one line, and 2 red buttons should be in next line just below of it. How can I do this?
This is I tried:
<div class="row mt-3">
<div class="col-sm-5"></div>
<div class="col-sm-7">
<div *ngFor="let actionButton of actionButtonData">
<div *ngIf="actionButton.Direction === 1">
<button type="button" class="btn actionButton btn-success">
{{ actionButton.Name }}
</button>
</div>
<div *ngIf="actionButton.Direction === 2">
<button type="button" class="btn actionButton btn-danger">
{{ actionButton.Name }}
</button>
</div>
</div>
</div>
</div>
css
.actionButton {
width: 200px;
display: inline-block;
overflow: hidden !important;
white-space: nowrap;
text-overflow: ellipsis
}
<div class='row'>
<div class='col'>
<div class='row'>
<button >
button1
</button>
<button >
button2
</button>
</div>
<div class='row'>
<button >
button1
</button>
<button >
button2
</button>
</div>
</div>
</div>
try this row col method
you could group buttons in bootstrap. for your purpose, add btn-group class to ngIf div. it's bootstrap feature and you don't need any custom css.
<div class="row mt-3">
<div class="col-sm-5"></div>
<div class="col-sm-7">
<div *ngFor="let actionButton of actionButtonData">
<div *ngIf="actionButton.Direction === 1" class="btn-group">
<button type="button" class="btn actionButton btn-success">
{{ actionButton.Name }}
</button>
</div>
<div *ngIf="actionButton.Direction === 2" class="btn-group">
<button type="button" class="btn actionButton btn-danger">
{{ actionButton.Name }}
</button>
</div>
</div>
</div>
</div>
You could make it by using normal bootstrap, add class row to parent div and add class col-sm-6 to every child will make only 2 children in that row
<div *ngFor="let actionButton of actionButtonData" class="row"> <!--here-->
<div *ngIf="actionButton.Direction === 1" class="col-sm-6"> <!--here-->
<button type="button" class="btn actionButton btn-success">
{{ actionButton.Name }}
</button>
</div>
<div *ngIf="actionButton.Direction === 2" class="col-sm-6"> <!--here-->
<button type="button" class="btn actionButton btn-danger">
{{ actionButton.Name }}
</button>
</div>
</div>
Hi i am Learning Angular
I just Made an angular Panel But I want It To Be Rtl But I do not Know How To do That
This Is My Panel
this Is My Html Code
<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-icon-button >
<mat-icon>menu</mat-icon>
</button>
<span> Admin Panel </span>
<div fxFlex fxLayout="row" fxLayoutAlign="flex-end">
<ul fxLayout="row" fxLayoutGap="20px">
<li>
<button mat-icon-button>
<mat-icon>settings</mat-icon>
</button>
</li>
<li>
<button mat-icon-button>
<mat-icon>help_outline</mat-icon>
</button>
</li>
</ul>
</div>
</mat-toolbar-row>
</mat-toolbar>
This Is My css
ul li{
list-style: none;
}
Do you mean something like that?
Code:
<mat-toolbar color="primary">
<mat-toolbar-row fxLayout="row-reverse">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<span> Admin Panel </span>
<span fxFlex="1 1"></span>
<button mat-icon-button>
<mat-icon>settings</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>help_outline</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav position="end">
Sidenav content
</mat-sidenav>
<mat-sidenav-content>
Sidenav content
</mat-sidenav-content>
</mat-sidenav-container>
Using the fxLayout="row-reverse"-property in your <mat-toolbar-row>
Here is a stackblitz: https://stackblitz.com/angular/kgnvebakmpj
fyi if you only have one toolbar row, you can leave out the <mat-toolbar-row>.
I am using angular 4 with its respective Material . My app.component.html looks like this :
<!--The whole content below can be removed with the new code.-->
<md-toolbar color="primary" >
<button md-button (click)="sidenav.toggle()"><md-icon class="md-18|md-
24|md-36|md-48">menu</md-icon></button>
<span>Material 2</span>
<span class="example-spacer"></span>
</md-toolbar>
<md-sidenav-container layout="column" flex style="background: plum;">
<md-sidenav #sidenav side="left" class="example-sidenav" flex layout="column" style="background: plum;">
<md-list>
<div class="row">
<md-list-item><md-icon>explore</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>map</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>home</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>android</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>done</md-icon> <span>item</span></md-list-item>
</div>
</md-list>
</md-sidenav>
<md-grid-list cols="4" rowHeight="100px" layout="column" flex>
</md-grid-list>
</md-sidenav-container>
`
How to make the md-sidenav-container take up all of the space left vertically?
Plunkr : https://plnkr.co/edit/Mvm6zSifW0EpeKtmuSEA?p=preview
Note: I don't want a CSS min-height, height: 100% fix. Only a clean class/directive based solution for Angular Material 2/4.
Move your <md-toolbar> inside the container and add the fullscreen attribute to the <md-sidenav-container>:
<md-sidenav-container layout="column" flex style="background: plum;" fullscreen>
<md-toolbar color="primary" >
<button md-button (click)="sidenav.toggle()"><md-icon class="md-18|md-24|md-36|md-48">menu</md-icon></button>
<span>Hems IRCA</span>
<span class="example-spacer"></span>
</md-toolbar>
...
See this answer for more details
Updated plunker
<ion-view class="ion" view-title="Browse">
<ion-content class="content" >
<div class="list landing-div">
<img class="landing-image" src="img/slpash_logo.png" >
<div class="row sub-div">
<div class="col">
<button class="button icon-left ion-person button-full landing-button-left" type="submit">LOGIN</button>
</div>
<div class="col">
<button class="button icon-right ion-android-list button-full landing-button-right" ui-sref="#/app/register" type="submit">SIGNUP</button>
</div>
</div>
</div>
</ion-content>
</ion-view>
In the div two button and on image now how to set div in vertically center.
<ion-view class="ion" view-title="Browse">
<ion-content class="content" >
<div class="list landing-div">
<img class="landing-image" src="img/slpash_logo.png" >
div{
vertical-align: text-top;
}
<div class="row sub-div">
<div class="col">
<button class="button icon-left ion-person button-full landing-button-left" type="submit">LOGIN</button>
</div>
<div class="col">
<button class="button icon-right ion-android-list button-full landing-button-right" ui-sref="#/app/register" type="submit">SIGNUP</button>
</div>
</div>
</div>
</ion-content>
</ion-view>
On an app with Ionic and AngularJs, I try to create a new template with a header. Unfortunately some content is hidden by the header.
Here is my code:
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"/>
<div class="bar bar-header bar-stable">
<h1 class="title">XXX</h1>
</div>
<ion-content class="has-header">
<div class="padding-horizontal">
<h4 class="center">Sign in</h4>
<button class="button button-block button-positive">Sign In</button>
</div>
<hr>
<div class="padding-horizontal">
<h4 class="center">Don't have an account?</h4>
<button class="button button-block button-positive">Sign Up</button>
</div>
</ion-content>
Or JsFiddle: http://jsfiddle.net/cyef9sxs/1/
Thank you!
Well you need to specify the position absolute and width for the ionic element.
.has-header {
top: 44px;
position:absolute;
width: 100%;
}