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.
Related
I use ngb-tabset in a component which is under a single div section. This div tag is displayed based on a condition to be true. When the condition is false, a different section is displayed.
<div *ngIf="showAllTabs">
<ngb-tabset>
<ngb-tab id="heading-1">
<ng-template ngbTabTitle>
<div>HEADING 1</div>
</ng-template>
</ngb-tab>
<ngb-tab id="heading-2">
<ng-template ngbTabTitle>
<div>HEADING 2</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
<div *ngIf="!showAllTabs">
<!-- Some other work -->
</div>
The issue is, if for instance,the active tab is "heading-2", and when the division tag is hidden and shown again, the active tab is set to the first tab (heading-1) automatically. How to not allow this?
The reason was because of the structural directive "ngIf". ngIf removes the elements from the DOM and so, when the ngIf turns out to be true, the elements are rendered newly which causes the default tab to be made visible. This can be solved by programming the tab selection by storing the id of the tab in a variable and enabling it each time the DOM elements are rendered back.
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.
I am trying to hide the scroll bar on my ion-scroll I have tried everything and can not get it to go away. Can someone please help me with this? I have tried all the attributes and i have also used css like ::-webkit-scrollbar and setting it to display: none;. That hides it in the browser just fine but when I look at it on an emulator or my physical iPhone it still shows. Here is my ion-scroll.
<ion-scroll scrollX="true" scrollbar-x="false" id="contests-filter">
<ion-row nowrap class="app-padding">
<div *ngFor="let name of filterNames;">
<ion-chip>
<ion-label>{{ name }}</ion-label>
</ion-chip>
</div>
</ion-row>
</ion-scroll>
Try adding [overflow-y: auto;] OR [overflow-x: hidden] in the CSS.
I have the following div and it shows a login button on a nav bar, but if the screen is small I want to hide this button. For some reason when I add the fxHide.gt-sm=true it doesn't hide when I make the screen smaller. How can I fix this?
<div fxHide.gt-sm="true">
<ng-template #login>
<button
mat-icon-button
[routerLink]="['/auth']"
[style.width]="'auto'"
[style.overflow]="'visible'"
matTooltip="Login or Register"
class="topbar-button-right">
<span>Login</span>
<mat-icon>exit_to_app</mat-icon>
</button>
</ng-template>
</div>
What you want:
Default behavior: shown
If lt-md (less than medium screen) => hide
With your current implementation you have:
Default behavior: shown
If gt-sm (greater than small screen) => hide
Now, what you want translates into:
<div fxShow fxHide.lt-md>
You could invert the logic into
<div fxHide fxShow.gt-sm>
That should do it.
fxHide.gt-sm means hide it when it's greater than small. Change it to fxShow.gt-sm if you only want it visible on larger screen.
Faced the same thing but after importing FlexLayoutModule it worked.
If the OP is having issues making the fxHide command work at all, this question may be a duplicate of Angular Material FlexLayout fxHide does not hide
You must ensure that FlexLayout is imported in all modules that wish to use it:
https://stackoverflow.com/a/62672981/4440629
I have ons-list as follows:
<ons-list-item modifier="tappable" class="list-item" ng-repeat="item in items" ng-click="onItemSelect(item);">
<ons-row>
<ons-col width="105px">
<img ng-src="{{item.thumb}}"></img>
</ons-col>
<ons-col>
<div class="item-title">
{{ item.name }}
</div>
</ons-col>
<ons-col>
<ons-button ng-click="onClick();">Add</ons-button>
</ons-col>
</ons-row>
</ons-list-item>
There is always an effect after tapping on the list and the same thing goes when tapping on Add button.
I wonder is there any way to remove the effect when tapping on Add button on the right-side of the list?
To remove the effect when tapping on the "Add" button you should use a modifier on that button like this:
<ons-button modifier="noeffect" ng-click="onClick();">Add</ons-button>
and apply your custom CSS for that button:
.button--noeffect:active{/*Keep the background color the same on tap*/
opacity:1;
}
Check this codepen.
If you want to remove the tap effect from your list items and you want only the "Add" button to work on tap then delete only:
modifier="tappable" from your list items.
OnsenUI has some standard modifiers that can be applied to buttons and list items, but you can also create your own like above.