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?
Related
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 need expansion panel to show header as columns. I wanted to use grid list component for that, but when I place it the header shows empty. Any way to achieve that?
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-grid-list cols="3">
<mat-grid-tile colspan="1">Column 1</mat-grid-tile>
<mat-grid-tile colspan="1">Column 2</mat-grid-tile>
<mat-grid-tile colspan="1">Column 3</mat-grid-tile>
</mat-grid-list>
</mat-expansion-panel-header>
<p>Some content</p>
</mat-expansion-panel>
The component mat-grid-list is actually there but it's invisible because the width is zero. So applying the styles as below to the component will work.
mat-grid-list {
width: 100%;
}
In Angular 6, I am using material side-nav & also using material-tree:
Parent:
<mat-sidenav-container class="sidenav-container" autosize>
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport="false"
[mode]="sidenavMode"
[opened]="sideNavOpen"
(closed)="sideNavOpen = false"
[ngClass]=" !sideNavOpen ? 'showToggle' : '' ">
<app-side-nav (toggledSidebarCollapse)="toggleSideBar()"></app-side-nav>
</mat-sidenav>
<mat-sidenav-content
autosize
fullscreen
[style.height.px]="windowHeight()"
[ngClass]=" !sideNavOpen ? 'body-conainer_collapse-view' : 'body-conainer_open-view' "
color="primary">
<mat-toolbar >
<span>HOME</span>
</mat-toolbar>
<ng-container *ngIf="iframeDisplay">
<iframe width="100%" height="100%" [src]="iframeUrl | safeUrl" scrolling="yes"></iframe>
</ng-container>
</mat-sidenav-content>
</mat-sidenav-container>
Child:
<div class="header" fxLayout="row" fxLayoutAlign="start center">
...
<div class="mat-tree_container">
<mat-nav-list>
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="tree">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<a class="mat-tree-node link-item">
<button class="side-bar-button" mat-icon-button>
<mat-icon class="mat-icon-rtl-mirror">
insert_drive_file
</mat-icon>
</button>
{{node.reportName}}
</a>
</mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
<li>
<div class="mat-tree-node">
<button class="side-bar-button" mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.reportName">
<mat-icon class="mat-icon-rtl-mirror">
{{nestedTreeControl.isExpanded(node) ? 'folder_open' : 'folder'}}
</mat-icon>
</button>
{{node.reportName}}
</div>
<ul [class.tree-invisible]="!nestedTreeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
</mat-nav-list>
</div>
The data I get back, however, is dynamic. It might be nested x amount deep. With the material-tree, that could extend past the width I have set (240px).
Material's mat-side-nav doesn't appear to support horizontal scrolling. If the folder structure passes the width, the sidenav just uses word-breaking and does not allow horizontal scrolling.
Just trying to enable horizontal scrolling inside of mat-side-nav...
Update:
Attempted using "white-space: nowrap" to the styling. Only affected anything if added to the top layer (mat-sidenav). Scrolling was then enabled -- but produced the following:
No amount of css appeared to expand the width to meet the overflow.
Most likely, this is the node component itself, not sidenav. Try adding white-space:no-wrap; to the mat-tree-node class. Depending on the content inside the sidenav drawer, you may need to add the no-wrap elsewhere or otherwise control the layout so that the horizontal scrollbar can be shown by the parent component.
Current working (but possibly not best) solution -- thanks to #gtranter 's response.
mat-sidenav {
...
white-space: nowrap;
display: flex;
}
...
// for the width of the header -- if not increased - does not fill the space
especially after the sidebar width increases when opening folders
.header {
...
width: calc(100% + 55px);
...
}
This allows horizontal scrolling AND adjusts to new sizes as you continue to open up new folders - no foreseeable limit. Fits the size of the sidenav regularly with closed folders without scroll - scroll enables when required.
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 container that is a row if screen size is greater than "sm" in angular material
<div layout="column" layout-gt-sm="row" layout-margin="20px" >
<div id="div1" flex="80">
</div>
<div id="div2" flex="20">
</div>
</div>
</div>
When it turns to a column, I need my div2 stacked onto top of div1 but as the natural order is, divs on the left are stacked over divs on right.
How can I change this and have the div on right on the top of div1 or any other div for that matter?
You can use flex-order and flex-order-gt-sm option to get the desired result.
http://codepen.io/next1/pen/EKXedG
For more info check the offical doc Material Layout