I'm trying to align my mat-icon on the right side of the same line where "Betrag" is:
I tried settingfloat: right and display: inline-block but they don't work together;
could someone help me?
here's the HTML
<mat-accordion>
<mat-expansion-panel hideToggle *ngFor="let key of itemCategories">
<mat-expansion-panel-header *ngIf="items[key].length > 0">
<mat-panel-title>
{{key}}
</mat-panel-title>
<mat-panel-description>
{{items[key].length}}
</mat-panel-description>
</mat-expansion-panel-header>
<div *ngFor="let item of items[key]" (click)="openDialog(item)">
<mat-divider></mat-divider>
<p>
Name: {{item?.name}}<br>
Betrag: {{item?.price}}
<button mat-icon-button (click)="downloadPdf()">
<mat-icon color="primary">arrow_circle_down</mat-icon>
</button>
</p>
</div>
</mat-expansion-panel>
</mat-accordion>
my scss:
mat-panel-description {
align-items: center;
justify-content: flex-end;
}
p{
cursor: pointer;
}
.mat-icon-button{
float: right;
clear: both
}
I don't understand why it's on the lower edge/next line, and is there a better way to do it than using the float property?
any help is appreciated!!
did you try to make the container flexbox ?
mat-expansion-panel > div{
display:flex;
}
.mat-icon-button{
justify-self: end;
}
Related
Hi,
I want to fit the elements of the first group (the numbers) to look like the second group(noche, mañana...). Change sizes according to the outer element.
I set both the group and individual element width to 100%
The numbers go all the way to 22 but they are cut off.
I used the answer in this question: Angular-material constant width of button group
The elements are there but they overflow, is there any way to distribute the available width between the 24 buttons without it overflowing?
Thanks in advance.
EDIT: Stackblitz
My HTML:
<div class="row">
<div class="col-12">
<label>Horas</label>
<div>
<mat-button-toggle-group [formControl]="hoursCtrl" multiple>
<mat-button-toggle *ngFor="let hour of hours" [value]="hour">{{hour}}</mat-button-toggle>
</mat-button-toggle-group>
</div>
<mat-button-toggle-group [formControl]="dayMomentCtrl" multiple>
<mat-button-toggle *ngFor="let dMoment of dayMoments; let i = index" [value]="i">{{dMoment}}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>
My scss:
.mat-button-toggle-group {
height: 20px;
font-size: 11px;
align-items: center;
width: 100%;
}
.mat-button-toggle {
width: 100%;
}
You can enclosed all under a class wrapper
<div class="wrapper">
<mat-button-toggle-group class="min-width" [formControl]="hoursCtrl" multiple>
<mat-button-toggle *ngFor="let hour of hours" [value]="hour">{{
hour
}}</mat-button-toggle>
</mat-button-toggle-group>
<mat-button-toggle-group [formControl]="dayMomentCtrl" multiple>
<mat-button-toggle
*ngFor="let dMoment of dayMoments; let i = index"
[value]="i"
>{{ dMoment }}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
Then, in styles.css remove the "padding" of the groups-buttons
.wrapper .mat-button-toggle-appearance-standard .mat-button-toggle-label-content,
.wrapper .mat-button-toggle-label-content {
padding:0;
}
You can also add a min-width to the group
.wrapper .mat-button-toggle-group {
...
min-width:400px;
width:100%;
}
stackblitz
I am new in Angular. this is my main table(its wireframe)
when i click on pencil icon it should look like this:
but i am not getting the output like this. i have tried this
stackblitz url: https://stackblitz.com/edit/mat-table-custom-dtb5bv?file=index.html
problem facing:
dropdown going in right side of update button
Seems like the menu is having width: 100%;. Which makes the button move to the next line. So to have both in the same row try adding the following.
.mat-cell .mat-select {
width: auto;
min-width: 100px; /*adjust accordingly*/
}
Some adjustments to CSS and HTML were necessary. Further adjustments will be necessary, but it is an initial idea.
HTML
<span *ngIf="!element.isSelected; else editPlace">
{{element.value}}
</span>
<button mat-icon-button aria-label="Toggle star" *ngIf="i!==2 && !element.isSelected"
(click)="editSetting(element)"
style="color: blue">
<mat-icon class="material-icons">edit</mat-icon>
</button>
<ng-template #editPlace>
<div class="editPlace">
<mat-select>
<mat-option *ngFor="let value of dropDownValues">
{{value.name}}
</mat-option>
</mat-select>
<button mat-raised-button color="accent" class="submit-button" *ngIf="element.isSelected" (click)="update(element)">Update</button>
</div>
</ng-template>
<ng-container *ngIf="i===2">
<mat-slide-toggle></mat-slide-toggle>
</ng-container>
CSS
.editPlace {
display: flex;
}
.editPlace > * {
margin-right: 10px;
}
.mat-select {
border: 1px solid #666666;
border-radius: 5px;
width: 10em;
}
I want to have 2 angular material cards next to each other but I don't know how.
HTML
<mat-card id="moth-card">
<mat-card-title>Live Stats</mat-card-title>
<app-card></app-card>
<app-card></app-card>
</mat-card>
At the moment the second one is under the first one.
Try below CSS:
display: inline-block;
HTML Code:
<mat-card id="moth-card">
<mat-card-title>Live Stats</mat-card-title>
<mat-card class="inline-block">
Part 1
</mat-card>
<mat-card class="inline-block">
Part 2
</mat-card>
</mat-card>
CSS:
.inline-block {
display: inline-block;
}
Working_Demo
I have tried to create a chat UI. I’m having the trouble with the placement of chat bubbles. It is as
This is my HTML code
<ion-list no-lines class="msgbubble" *ngFor="let msg of messages">
<div class="innermsg left" *ngIf="userId != msg.id">
{{ msg.reply }}
</div>
<div class="innermsg right" *ngIf="userId == msg.id">
{{ msg.reply }}
</div>
</ion-list>
This is my scss code
.innermsg {
display: inline-block;
padding: 5px 10px;
margin: 5px;
font-weight: 500;
font-size: 16px;
border-radius: 15px;
margin-bottom: 5px;
}
.innermsg.left {
float: left;
background-color: #F1F0F0;
color: black;
}
.innermsg.right {
float: right;
//margin-right: 10%;
background-color: #0084FF;
color: white;
}
.msgbubble {
margin-bottom: 10px;
}
Can someone help me in displaying chat bubbles on after the another, but not in the same line as shown in above picture.
The HTML structure needs to change a bit, each chat bubble needs to take up a line and only the contents inside the line must have the formatting you have.
Like this:
<ion-list no-lines class="msgbubble" >
<ion-item *ngFor="let msg of messages">
<span [ngClass]="userId == msg.id ? 'innermsg right':'innermsg left'">{{ msg.reply }}</span>
</ion-item>
</ion-list>
Check the implementation here
Use flexbox, flex-direction: column, and give each person differing align-self values.
In Angular I think the syntax for the element would be:
<div [ngClass]="userId === msg.id ? 'me' : 'you'">{{msg.reply}}</div>
Here's an example with static elements:
.chat {
font-family: sans-serif;
display: flex;
flex-direction: column;
}
.message {
border-radius: 5px;
margin: 0.2em 0;
padding: 0.5em;
max-width: 50%;
}
.me {
align-self: flex-start;
background-color: blue;
color: white;
}
.you {
align-self: flex-end;
background-color: green;
color: white;
}
<div class="chat">
<div class="message me">Hello</div>
<div class="message you">Hello</div>
<div class="message me">How are you?</div>
<div class="message you">I'm fine</div>
<div class="message you">How about you?</div>
<div class="message me">I'm doing so amazingly you wouldn't believe all the things that are happening right now it would take up at least 50% of the width of the page to discuss all the things that I want to tell you.</div>
</div>
Here is my code for my chat app that I've been working on. You may be able to have some use from it.
<ion-list>
<div text-right *ngFor="let message of messages; let i = index; let first = first;">
<div *ngIf = "message.from == this.user">
<span *ngIf = "i==0" >
<ion-label stacked> {{message?.from}} </ion-label>
<p text-right> {{message?.msg}}</p>
</span>
<span *ngIf = "i>0 && message.from == messages[i-1].from" >
<p text-right> {{message?.msg}}</p>
</span>
<span *ngIf = "i>0 && message.from != messages[i-1].from" >
<ion-label stacked> {{message?.from}} </ion-label>
<p text-right> {{message?.msg}}</p>
</span>
</div>
<div *ngIf = "message.from != this.user">
<span *ngIf = "i==0" >
<ion-label stacked text-left> {{message?.from}} </ion-label>
<p text-left> {{message?.msg}}</p>
</span>
<span *ngIf = "i>0 && message.from == messages[i-1].from" >
<p text-left> {{message?.msg}}</p>
</span>
<span *ngIf = "i>0 && message.from != messages[i-1].from" >
<ion-label stacked text-left> {{message?.from}} </ion-label>
<p text-left> {{message?.msg}}</p>
</span>
</div>
</div>
</ion-list>
My css code for navigation drawer
:host{
display: flex;
background-color: #f0fff0;
flex-grow:1;
}
.body-style{
padding: 20px;
min-height: 100px;
flex-grow: 1;
}
HTML:
<mat-drawer-container >
<mat-drawer #drawer [mode]="over">I'm a drawer</mat-drawer>
<mat-drawer-content>
<button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
<div class="body-style">
<router-outlet>
</router-outlet>
</div>
</mat-drawer-content>
</mat-drawer-container>
I am obviously missing something in Flexbox concepts. The <mat-drawer-content>'s width is small.
Don't reinvent the wheel.
Angular team has already covered your need with Flex-Layout.
Once installed, it gives this :
<mat-drawer-container >
<mat-drawer #drawer [mode]="over">I'm a drawer</mat-drawer>
<mat-drawer-content fxLayout="row" fxLayoutAlign="start center">
<button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
<div class="body-style">
<router-outlet></router-outlet>
</div>
</mat-drawer-content>
</mat-drawer-container>
No CSS required.