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!
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>
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.
In ionic with ios platform, i want the following view:
The header
A fixed bar button
A scrollable list
So i have tried to make:
<ion-view view-title="Account">
<div class="button-bar" style="margin-top:66px;">
<a class="button">Item 1</a>
<a class="button">Item 2</a>
<a class="button">Item 2</a>
</div>
...
When i make ionic emulate ios, in the iphone simulator i don't see the bar button (i think because it's behind the header bar)
So i have added a margin-top:
<div class="button-bar" style="margin-top:44px;">
Now i see but a portion of the header bar is always on top of the bar button. It's because of the status bar? Which is the height of the status bar + header bar on the ios device?
To make a scrollable list (only the scrollable list) i must add a after the button-bar div?
HTML
<div class="button-bar" style="margin-top:66px;">
<a class="button">Item 1</a>
<a class="button">Item 2</a>
<a class="button">Item 3</a>
</div>
CSS
.button-bar
{
float:left;
overflow-Y:scroll;
height:50px;
width:150px;
}
.button
{
float:left;
width:100%;
}
see this Fiddle and try to scroll your Items. :)
To make everything clear and visual do float:left; and display:block; of your every element
I am developing something in a Right-To-Left (RTL) language and I need the text in the collapsible to be positioned on the right as opposed to the default left.
Here is the code:
<div id="content_c1" data-role="collapsible" data-iconpos="right" align="right">
<h3>Right to Left Text</h3>
<p>Right to Left Content</p>
</div>
<div id="content_c2" data-role="collapsible">
<h3></h3>
<p></p>
</div>
The first collapsible is Right to Left. The data-iconpos="right" nicely movees the icon to the right and the align="right" moves the content in the <p> to the right. But the text shown in <h3> stays on the left.
Thanks for the help in advance.
This is working for me:
.ui-collapsible h3 .ui-btn-inner
{
text-align:right;
}
I'm sure there is a better way but you could try this.
.ui-btn-text{float:right}
Having the same problem...
This one solved it :
.ui-collapsible-heading .ui-btn {
text-align: right;
}
I need to add the button on the right hand side of the footer. I am adding it like this
<div data-role="footer" id="ftrMain" name="ftrMain" data-position="fixed">
<h4>Copyright 2011</h4>
<a class="ui-btn-right" data-theme="a" data-ajax="false" href="/login.php?mode=logout">Logout</a>
</div>
I am getting the button but it is coming at the start of the next line. If I change the role to header, the button positions perfectly. Even if I add class="ui-header" in footer div, it comes ok but then it simply doesn't get its position fixed. ('coz it has now both the style ui-footer and ui-header)
How can I put the button on footer on extreme right without sacrificing the data-position? (I need the data-position fixed also)
the footer has a right margin set to 90px by default. You need to override it and make the two controls float, like so:
<div data-role="footer" id="ftrMain" style="text-align:center" name="ftrMain"
data-position="fixed">
<h4 style="display: inline-block; margin-left: 65px; margin-right: 0">
Copyright 2011</h4>
<a class="ui-btn-right" style="margin: 0.4em; float: right" data-theme="a"
data-ajax="false" href="/login.php?mode=logout">
Logout</a>
</div>
P.S. From usability point of view, I would have placed the "Logout" button in the top-right corner of the page rather than in a footer.
I found Tsar's answer helpful, though it doesn't seem like most of that markup is necessary. I get the same effect with
<div data-theme="a" data-role="footer" data-position="fixed" data-id="footer">
<a class="ui-btn-right" href="/login.php?mode=logout">Logout</a>
<h3>Copyright 2011</h3>
</div>
(I have only tested this in my desktop browser so far.) Looks like the magic is in the ui-btn-right class. There is also a ui-btn-left.