I have angular app where I am using mat-tabs, I need to make inner element to occupy the entire available space.
<mat-tab-group dynamicHeight="true">
<mat-tab label="Test Tab 1">
<mat-tab-group dynamicHeight="true">
<mat-tab label="Test Child Tab 1">
<div class="h-full bg-yellow-400 text-center align-middle"> Split Container </div>
</mat-tab>
<mat-tab label="Test Child Tab 2"></mat-tab>
</mat-tab-group>
</mat-tab>
<mat-tab label="Test Tab 2">
</mat-tab>
</mat-tab-group>
I tried solution suggested in here However it did not work.
I am not using material layout. here is the link to stackblitz that shows the issue. I forked it out from aforementioned stackoveflow question and removed layout usage.
Any tips are appreciated.
<mat-tab-group mat-stretch-tabs>
<mat-tab label="One"> One </mat-tab>
<mat-tab label="Two"> Two </mat-tab>
</mat-tab-group>
Related
I need for some further CSS adjustments the height of the current mat-tab-body. To my understanding this is automagically injected by Angular Material. I need to restrict the height of a component within that mat-tab-body.
I tried something like
<mat-tab-group id="refSearchList">
<mat-tab>
<app-search-result-long-scrollable-list/>
</mat-tab>
...
as well as
<mat-tab-group >
<mat-tab id="refSearchList"> <!--- (`id` is not injected) -->
<app-search-result-long-scrollable-list/>
</mat-tab>
...
or
<mat-tab-group >
<mat-tab>
<div id="refSearchList">
<app-search-result-long-scrollable-list/>
</div>
</mat-tab>
...
When I try to get the measurements with document.getElementById("refSearchList").getBoundingClientRect() I get always the full height of the scrollable component - not that of the body. Is there a way to get the height of the mat-tab-body?
I have two different mat-tab section used in same component in my angular application.
How to override styles of mat-tab because i need to apply two different styles for both the tabs.
Say, I need to have mat-label as white color in one mat-tab and in the other one, I need to have black color.
<mat-tab-group [selectedIndex]="selectedIndex" (selectedTabChange)="onChange($event)">
<mat-tab label="Content 1">
</mat-tab>
<mat-tab label="Content 2">
</mat-tab>
</mat-tab-group>
<mat-tab-group [selectedIndex]="selectedIndex" (selectedTabChange)="onChange($event)">
<mat-tab label="Content 3">
</mat-tab>
<mat-tab label="Content 4">
</mat-tab>
</mat-tab-group>
I would suggest using:
::ng-deep mat-tab {
/*Your styles here*/
}
If this does not work, try using:
::ng-deep mat-tab {
/*Your styles here*/ !important;
}
Although I would not advise the use of !important unless you have a very specific case.
I used a #kolkov/angular-editor text module which should allow me to edit my texts and my wish is to use it on both parts.
Except that there is a problem that I cannot find a solution.
If you can help me find the solution.
<mat-card>
<div class="help-container">
<mat-tab-group mat-stretch-tabs class="bko-stretched-tabs mat-elevation-z4">
<mat-tab label="Tutorials">
<backoffice-tutorials></backoffice-tutorials>
tab1
</mat-tab>
<mat-tab label="Support">
<backoffice-support></backoffice-support>
tab2
</mat-tab>
</mat-tab-group>
</div>
</mat-card>
here we see that in tab2 nothing is even displayed the plain text tab2 in the html.
Use <ng-template> inside <mat-tab>, like this:
<mat-tab-group mat-stretch-tabs class="bko-stretched-tabs mat-elevation-z4">
<mat-tab label="Tutorials">
<ng-template matTabContent>
<backoffice-tutorials></backoffice-tutorials>
tab1
</ng-template>
</mat-tab>
<mat-tab label="Support">
<ng-template matTabContent>
<backoffice-support></backoffice-support>
tab2
</ng-template>
</mat-tab>
</mat-tab-group>
https://stackblitz.com/edit/angular-material2-issue-1vt6en?file=app/app.component.html
Please check tab two it is not expanded properly.
How to fix it.
Firstly, consider updating your Angular dependencies to 6.x.x, where Angular Material has support for lazy-loading of tab content.
From the docs for tabs:
By default, the tab contents are eagerly loaded. Eagerly loaded tabs will initalize the child components but not inject them into the DOM until the tab is activated.
If the tab contains several complex child components or the tab's contents rely on DOM calculations during initialization, it is advised to lazy load the tab's content.
Anyways, you can leverage on the matTabContent attribute with ng-template, where its contents will be lazily loaded.
<mat-tab-group>
<mat-tab label="Tab 1">
<ng-template matTabContent>
<p>Content goes here</p>
</ng-template>
</mat-tab>
<mat-tab label="Tab 2">
<ng-template matTabContent>
<p>Content goes here</p>
</ng-template>
</mat-tab>
</mat-tab-group>
Updated Stackblitz
I have a dynamic tab content and moving from from tab to another, the tab content got flickering.
<md-tabs md-dynamic-height class="md-primary">
<md-tab data-ui-sref="common.usermanagement.userclassmaintenance" md-active="$state.includes('common.usermanagement.userclassmaintenance')">
<md-tab-label>
User-class Maintenance
</md-tab-label>
<md-tab-body>
<md-content ng-cloak flex layout="column" class="md-padding">
<div data-ui-view="userclassmaintenance"></div>
</md-content>
</md-tab-body>
</md-tab>
<md-tab data-ui-sref="common.usermanagement.usermaintenance" md-active="$state.includes('common.usermanagement.usermaintenance')">
<md-tab-label>
User Maintenance
</md-tab-label>
<md-tab-body>
<md-content ng-cloak flex layout="column" class="md-padding">
<div data-ui-view="usermaintenance"></div>
</md-content>
</md-tab-body>
</md-tab>
</md-tabs>
And i also included the following portion of CSS which i have got it from some another article. But not working for me.
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
I was facing a similar situation with mat-tab.
I was using the following code:
<mat-tab-group dynamicHeight="true">
<mat-tab label="Pivot View">
<ng-template matTabContent>
<app-missing-data-pivot [requestBody]="dataSource"></app-missing-data-pivot>
</ng-template>
</mat-tab>
</mat-tab-group>
The dynamicHeight="true" was causing my elements inside the tab to flicker. I removed that, and everything was fine.
Make sure flickering is not caused by spinner & overlay that is showed for just a few miliseconds!