I have a Virtual scroll feature on my website. Every item in virtual scroll is expansion panel with different count of lines within. When I implement <cdk-virtual-scroll-viewport> expansion panels are rendered fine, but when I click on current panel it not expand and only increase his height with maybe 5 px. I don't know how to do it, that expansion panel will expand properly.
I've tried to move expansion panel to <ng-container> but id didn't help.
<div class="container">
<mat-card>
<mat-card-title>
<span class="panelItem">Id</span>
<span class="secondPanelItem">Name</span>
<span class="lastPanelItem">Version</span>
</mat-card-title>
</mat-card>
<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
<mat-accordion>
<ng-container *cdkVirtualFor="let description of allDescriptions">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<span class="panelItem">{{description.id}}</span>
<span class="secondPanelItem">{{description.name}}</span>
<span class="lastPanelItem">{{description.version}}</span>
</mat-panel-title>
</mat-expansion-panel-header>
</mat-expansion-panel>
</ng-container>
</mat-accordion>
</cdk-virtual-scroll-viewport>
</div>
I finally found where was problem. I was setted in scss file height of expansion panel to 50 px so It can't expand more. When I removed this everything is OK.
Related
I have below code
<p-tabView #tabview *ngIf="mycondtion" class="page" [scrollable]="scrollable">
<ng-container *ngFor="let list of lists">
<p-contextMenu [target]="link" [model]="items"> </p-contextMenu>
<p-tabPanel [header]="list.listName" #link>
<app-data-module [List]="list"></app-data-module>
</p-tabPanel>
</ng-container>
on rightclick of tabpanel, it should show the context menu, but its not showing, i dont know what am i missing here? please help
You might be able to use header template (instead of a "header="). Something like this:
<p-tabView #tabview *ngIf="mycondtion" class="page" [scrollable]="scrollable">
<p-tabPanel *ngFor="let list of lists">
<ng-template pTemplate="header">
<!-- Here is where all the header content will go, including the context menu -->
<div #link>{{list.name}}</div>
<p-contextMenu [target]="link" [model]="items"</p-contextMenu>
</ng-template>
<!-- Here is where the content of the tab will go -->
<app-data-module [List]="list"></app-data-module>
</p-tabPanel>
</p-tabView>
The main flaw here is, the context menu only appears when right-clicking on the <div>; clicking anywhere else in the tab header still won't work. I've not found a way around that, but hopefully this will help get you in the right direction.
So I have this component that is a button, which when clicked, navigates to a certain route. However, I want to put a button inside this, which doesn't make it navigate and does something else.
How do I do this? It is the follow/unfollow button.
<button type="button" class="btn" (click)='navigate()' *ngIf="searchResult.username"><mat-card>
<mat-card-header>
<mat-card-title>{{searchResult|null:['firstname']}} {{searchResult|null:['lastname']}}</mat-card-title>
</mat-card-header>
<mat-card-content class="container">
<div>{{searchResult|null: ['username']}}</div>
<div>
<!-- option to follow -->
<div *ngIf="!result.followers.includes(this.selfUsername)" class="follow">
<button mat-raised-button (click)="onFollow()">
Follow
</button>
</div>
<!-- already following -->
<div *ngIf="result.followers.includes(this.selfUsername)" class="follow">
<button mat-raised-button (click)="onUnfollow()">
Unfollow
</button>
</div>
</div>
<div>
<!-- dunno why these dont work -->
<!-- <p *ngFor="let item of searchResult|null:['history']">{{item}}</p> -->
</div>
<div>
<!-- <p *ngFor="let item of searchResult|null:['whishlist']">{{item}}</p> -->
</div>
</mat-card-content>
</mat-card>
</button>
Use button tags only when making interaction like calling functions that do something.
In your case you want to "hyperlink" somewhere (in this case it's a mat-card) and inside of if you want to place any buttons...let's say.
For navigation you should always use anchor tags like <a ... href="" or routerLink="">...content </ a>
So, just change the root <button ...> to <a ...>.....
and that should be it.
Like gsa.interactive said, you have to use a link for redirection.
With this logic you cannot have a clickable child button if it is located in a clickable parent element. You can't position these child buttons above the parent with z-index.
A child's z-index is set to the same stacking index as its parent.
2 possibilities:
you don't overlay the clickable link with the buttons.
Either you overlay them in the following way:add position: relative to the parent with a z-index 0 and add position : absolute to the buttons with z-index 1 with a specific position
I am trying to display data on each and every tab, but the issue is the data I have is relatably large to fit in a single screen.
I am looking for a way to make tabs scrollable so that I can scroll on the data.
Is there any way to add buttons on the edges of the tabs or add a horizontal scrollbar to make it scrollable?
Something like this, which is responsive too.
Thanks
You can solve it through Angular material Tabs. Here, is the documentation of angular.
https://material.angular.io/components/tabs/examples
Remember, you have to import MatTabModule on your angular module, like below:
I have added it on my project and a sample image is like below:
Additionally, if you want to add a button instead of text, you can do it also. Here is a sample image for you:
Here, sample code for this is
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
First
</ng-template>
Content 1
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
Second
</ng-template>
Content 2
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
Third
</ng-template>
Content 3
</mat-tab>
</mat-tab-group>
You can use any mat-icon class here to change the button icon. You can use this link https://material.io/resources/icons/?style=baseline .
Hopefully, it will solve your problem.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I'm using angular materials and got struck while using mat-expansion. Whenever I click the buttons I've added on the expansion panel, it gets closed following the basic property of mat-panel.
Requirement - The panel should not contract on button click.
Use Case - In my case, I have multiple mat-expansion being stacked one on other and I'll be using the icon buttons to move the the expansion up/down in the stack. I've already written logic for move up/down but the issue is whenever I click the icon buttons, along with moving up/down, the expansion also perform the default behaviour of expansion/collision.
<mat-expansion-pannel>
<mat-expansion-panel-header>
<mat-panel-title class="title-align">
Image
</mat-panel-title>
<mat-panel-description>
<button mat-icon-button (click) ="moveUp(i)"><i class="material-icons md-18">arrow_upward</i></button>
<button mat-icon-button (click) ="moveDown(i)"><i class="material-icons md-18">arrow_downward</i></button>
<button mat-icon-button color="warn" (click) ="removeWidget(i)">
<i class="material-icons md-18">clear</i>
</button>
</mat-panel-description>
</mat-expansion-panel-header>
</mat-expansion-pannel>
As specified in the code, the panel should perform the move up and move down functionality. One way is we can disable any kind of button click on the panel, but since we need the functionality of buttons, I just want the buttons to work and don't want the panel to contract/expand unnecessarily.
I resolved this doubt as well , what we can do is pass $event in the button click function and then call stopPropogation() function .
<mat-expansion-panel class="mat-elevation-z8">
<mat-expansion-panel-header>
<mat-panel-description>
<button mat-icon-button (click)="moveUp($event,i)"><mat-icon>arrow_upward</mat-icon></button>
<button mat-icon-button (click)="moveDown($event,i)"><mat-icon>arrow_downward</mat-icon></button>
<button mat-icon-button (click)="removeWidget(i)" color="warn"><mat-icon>clear</mat-icon></button>
</mat-panel-description>
</mat-expansion-panel-header>
<div>
</div>
</mat-expansion-panel>
Also the function in typescript file :
moveUp(event : any, id : number) : void{
event.stopPropagation();
if(id > 0 ){
...
}
}
OK, I tried to suppress the expansion-contraction of the mat-expansion header, StackBlitz HERE.
I added [disabled]="clickButton" on each mat-expansion-panel and the action (click)="clickButton=false".
By default, clickButton: boolean = false; and when click on mat-expansion-panel, clickButton=false.
<mat-expansion-panel class="mat-elevation-z8" [disabled]="clickButton" (click)="clickButton=false">
<mat-expansion-panel-header>
<mat-panel-description>
<button mat-icon-button (click)="moveUp()"><mat-icon>arrow_upward</mat-icon></button>
<button mat-icon-button (click)="moveDown()"><mat-icon>arrow_downward</mat-icon></button>
<button mat-icon-button (click)="removeWidget()" color="warn"><mat-icon>clear</mat-icon></button>
</mat-panel-description>
</mat-expansion-panel-header>
<div>
<p>...</p>
</div>
</mat-expansion-panel>
It's in your functions that I added this.clickButton = true; thus allowing not to open the panel when clicking on one of the buttons.
moveUp(){
this.clickButton = true;
console.log("function()");
}
I hope this will help you.
DEMO:
I have a mat-data-table with mat-expansion-panel as a column. For some reason on some rows the mat-expansion-panel has a border around it, how do I get rid of that. When the user hovers the mouse the expansion panel expands and when the mouse leaves it collapses. The data that those rows have, they are just as same as the ones without borders. Here in this picture its the notes column that has the mat-expansion-panel inside the mat cell.
<mat-cell *matCellDef="let workOrder">
<mat-expansion-panel class="" _ngcontent-c0="" ng-reflect-hide-toggle="true" #panel *ngIf="workOrder.notes !== ''" hideToggle="true"
(mouseenter)="panel.open()" (mouseleave)="panel.close()">
<mat-expansion-panel-header>
<mat-panel-title style="justify-content: center">
<mat-icon style="color:#8fbbdf;">notes</mat-icon>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-panel-description>
{{ workOrder.notes }}
</mat-panel-description>
</mat-expansion-panel>
</mat-cell>
The issue seems to be on mat-expansion-panel tag. If i remove all classes of it, the border disappear so it might be an "issue" on some class of it or with the combination of more than one.
i changed from:
<mat-expansion-panel _ngcontent-c0="" class="mat-expansion-panel ng-tns-c3-1 ng-star-inserted" hidetoggle="true" ng-reflect-hide-toggle="true">
to:
<mat-expansion-panel _ngcontent-c0="" class="" hidetoggle="true" ng-reflect-hide-toggle="true">
on the first element and this is the result (the desired one, i think):
Working fine when expanded too:
Hope it helps you
override the mat-expansion-panel display property like: mat-expansion-panel style="display: unset;"
I had a similar issue as well and I solved it by setting the background-color on mat-expansion-panel to be the same background-color as the rest of the content. In my case I set it to white.
The reason you couldn't inspect this in the devtools is because it's not a real border element yet it gets an appearance as one due to its similar sizing.