I want to align Tab in right in mat-tab using angular 12. There is one tab which is default in left side. is this is possible? if Anyone know please help me.
<mat-tab-group>
<mat-tab label="First" class="left-default-tab">Content 1</mat-tab>
<mat-tab label="Second" class="center">Content 2</mat-tab>
<mat-tab label="Third" class="right">Content 3</mat-tab>
</mat-tab-group>`
Try this
<mat-tab-group>
<mat-tab label="First" class="left-default-tab">Content 1</mat-tab>
<mat-tab label="Second" class="center">Content 2</mat-tab>
<mat-tab label="Third" class="right">Content 3</mat-tab>
</mat-tab-group>`
.mat-tab-labels {
display: flex;
justify-content: space-between;
}
Related
Angular Material Tabs - can we align just the "Third" tab to the right?
Here is a stackbliz:
https://stackblitz.com/edit/angular-3keysh-czzstn?file=app%2Ftab-group-align-example.html
https://stackblitz.com/edit/angular-3keysh-vflzyz?file=app%2Ftab-group-align-example.html,app%2Ftab-group-align-example.css,app%2Ftab-group-align-example.ts
::ng-deep .mat-tab-header .mat-tab-label:last-child {
margin-left: auto;
}
I have an Angular Material (5.2.2) button which displays an SVG icon. When I mouse over the button, the name of the SVG Icon is displayed like a tooltip. Can I disable this at all please?
<button mat-mini-fab
color="accent"
*ngIf="toggleR1 == 1"
(click)="onClickR1Toggle($event)"
style="position: absolute;"
[style.left.px]="mapOffsetX + (1378.80 * mapScale) - 20"
[style.top.px]="mapOffsetY + (257 *mapScale) - 20">
<mat-icon svgIcon="points-l-up" role="img" aria-hidden="true"></mat-icon>
</button>
I thought that if I set the aria-hidden property to true this would do it, but evidently not.
Thanks
I have a footer toolbar on my ionic2 app that has a center-aligned text, but the text only seems to take the center 50% or so of the width of the toolbar and then cuts off with an ellipses (see image). The width seems to correspond to the same width of the text allowed for the header toolbar (which I've grayed out in the image). Is there a way to override this and make the text take up the full space? So far I've only noticed this issue on an iPhone 6, although I haven't tried that many devices.
<ion-content class="no-scroll">
<ion-tabs [selectedIndex]="mySelectedIndex">
tabs omitted..
</ion-tabs>
</ion-content>
<ion-footer>
<ion-toolbar color="{{threatLevelColor}}">
<ion-title *ngIf="threatLevel" text-center>
Security Threat Level: {{threatLevel.level}}
</ion-title>
</ion-toolbar>
</ion-footer>
You can apply below SCSS change only for iOS platform.
.scss
.ios,
{
your-page {
.padding-0 {
padding-left: 0;
padding-right: 0;
}
}
}
.html
<ion-footer>
<ion-toolbar color="{{threatLevelColor}}">
<ion-title *ngIf="threatLevel" text-center class="padding-0">
Security Threat Level: {{threatLevel.level}}
</ion-title>
</ion-toolbar>
</ion-footer>
I am using materials Md-button's in a md-side-nav and this button is offset when it it 4 characters long. I inspected the css of these two button and the only thing that is different is the origin transform
Codepen: click toggle right nav to see the effect.
http://codepen.io/anon/pen/oXpdae
<md-button ng-click="close()" class="md-primary">
123456
</md-button><br>
<md-button ng-click="close()" class="md-primary">
123456789
</md-button>
Solution was to add this to the menu, as when wrapping the button with an the text is centered
a {
text-align: left;
}
please check this link. All div are closed properly and could not understand whats wrong with footer width where as home page is correct.
thanks a lot. u saved my time
It's because you have class
#footer
{
width:640px;
clear:both;
color:#999999;
text-align:center;
width:640px;
padding-bottom: 15px;
font-size: 85%;
}
where you set footer width to 640px (two times). For ex. remove width declaration.