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
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 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>
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>
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!
I'm trying to learn jquery mobile and have been playing around with it for the past few days and things are going alright, but I'm not so sure if I'm taking the proper approach.
I tried making a site with a similar UI as the facebook app. On the top right and left corners of the page's header are buttons that causes the page to slide out like a drawer.
The top left button will slide the page out to the right to reveal a menu, while the top right button will slide out to the left to reveal a form to fill out.
What I did was create divs outside the page and used javascript to slide out the active page, to reveal the menu or form depending on which button is pressed:
<body>
<div id="my-menu">
<ul>
<li>Menu Item 1</li>
</ul>
</div> <!-- end of my-menu -->
<div id="my-form">
<form method="post" action="form-action.php">
<!-- form elements -->
</form>
</div> <!-- end of my-form -->
<div data-role="page" id="home">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div> <!-- end of home -->
</body>
I used my own CSS to style the menu, but I also noticed my theme wasn't applied to "my-form", but everything in the page "home" had all elements properly styled.
I can't put the form inside the page "home" because I will not be able to do sliding drawer effect that I've done with the menu.
Am I suppose to have my own styling applied to the form outside the page or is there a way to apply the jquery mobile theme to elements outside the page?
Would this be the best approach to implement this kind of user interface or is there a better way using what's available in jquery mobile?
Since this will be my UI for the application does that mean I will just copy the same code to all the pages? Or is there a better way to do this?
I'd like to use the best practice for this use case so please offer any advice!
Thanks in advance for the help!
BTW I did the slide menu based on this blog post:
http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/
Solution 1:
As I told you in comments, jQM style can not be applied outside of page container but that should not prevent you from using its css.
If you are using firefox, use firebug plugin and take a look at every jQM page element, copy its structure and css. Use it to create styling outside page container.
One more thing, new elements are going to be styled but they will not have functionality, you will need to redo it by yourself.
Solution2:
Have your content inside a data-role="page" div at page-load, let jQuery Mobile style the page, and then move your content div out of the data-role="page" div to be a child of the body tag.