I have a question. I didnt find any familiar question on stack so i asking here, is it possible to make <mat-selection-list> scrollable (Angular 7)? I want to display scroll-bar on the right when items are too many to fit a window.
<mat-card fxFlex="33%">
<mat-selection-list>
<mat-list-item
*ngFor="let product of products"
[class.selected]="product === selectedproduct"
(click)="onSelect(product)"
>
</mat-list-item>
</mat-selection-list>
Simple CSS
mat-selection-list {
max-height: 400px;
overflow: auto;
}
StackBlitz Demo
By setting custom CSS properties?
CSS for fancy scroll bar which only supports Chrome browsers:
.custom-scroll-bar{
height:70vh;
overflow-y:scroll;
overflow-x: hidden;
}
.custom-scroll-bar::-webkit-scrollbar{
width: 5px;
}
.custom-scroll-bar::-webkit-scrollbar-thumb{
background: rgba(0,0,0,.26);
}
For Firefox and Internet explorer just simply use:
.custom-scroll-bar{
height:70vh;
overflow-y:scroll;
}
HTML:
<mat-selection-list #shoes class="custom-scroll-bar">
<mat-list-option *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
</mat-selection-list>
StackBlitz Example
You can try with:
<mat-card fxFlex="33%">
<mat-selection-list [style.overflow]="'auto'" [style.height.px]="'300'">
<mat-list-item
*ngFor="let product of products"
[class.selected]="product === selectedproduct"
(click)="onSelect(product)">
</mat-list-item>
</mat-selection-list>
Related
I have a mat drawer to the right of the screen and I am trying to stick a button to it, so the overall design is clear.
Example
How can I manage to do this action? So far I have tried adding the button inside of the drawer and giving it a negative left: -10px in order to overlay the drawer.
<mat-drawer-container class="example-container" [hasBackdrop]="false">
<mat-drawer style="width: 600px;" position="end" #drawer2 [mode]="over">
<button style="left: -10px; z-index: 1000;" mat-raised-button (click)="drawer2.toggle()">Side Nav</button> HERE
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon> layers</mat-icon>
<span>Componenti</span>
</ng-template>
<components [itemCategoryAreas]="itemCategoryAreas"></components>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>wallpaper</mat-icon>
<span>Disegno</span>
</ng-template>
Content 1
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>list</mat-icon>
<span>Checklist</span>
</ng-template>
Content 1
</mat-tab>
</mat-tab-group>
</mat-drawer>
🚂 Might help! Try something like this:
.app-toolbar {
position: sticky;
position: -webkit-sticky; /* For macOS/iOS Safari */
top: 0; /* Sets the sticky toolbar to be on top */
z-index: 1000; /*app's content doesn't overlap the toolbar */
}
don't forget to change the classname though, Hope it helps :)
Then,
If you want your button to stick permanent to its position, you should use
position: fixed;
instead of
position: sticky;
I am trying to add a button to a mat-list-item. This is my current HTML template code:
<mat-selection-list
[multiple]="false"
[class.selected]="currentItem"
formControlName="itemListControl"
>
<mat-list-option
*ngFor="let item of items"
[value]="item.id"
>
<div style="display: flex; justify-content: space-between; align-items: center">
<div style="display: flex; align-items: center">
{{ item.name }}
</div>
<button mat-icon-button>
<mat-icon>edit</mat-icon>
</button>
</div>
</mat-list-option>
</mat-selection-list>
When I inspect the site in my browser, I can see that there is a 16px padding which moves the button to the left inside the list item:
I already tried removing it by adding this to my scss file for the component:
.mat-list-item {
padding-right: 0 !important;
}
For some reason, this does not have any effect. It seems like this is not even applied at all to the element. What am I doing wrong and how can I get rid of this padding (without causing any potentially bad side effects)?
Please use like below. It would work.
.mat-list-text {
padding-right: 0 !important;
}
Thanks!
Use the whole selector(instead of just .mat-list-text, copy all the selector part of the css highlighted in the image above) to remove the the padding, angular material is very hard to modify. Dont forget to add the !important aswell. I had to do this previously. I hope it will work for you aswell.
I have a list of elements. Every element is displayed on a row. How can I display four elements on a row?
My code is:
<div class="form" id="skillsList">
<mat-label>Choose skills</mat-label>
<mat-selection-list #skills>
<mat-list-option *ngFor="let skill of listOfSkills">
{{skill}}
</mat-list-option>
</mat-selection-list>
</div>
It looks like mat-list-option has display: block. So you can override that to get them to display however you want. For example:
<mat-list-option ngFor="let skill of listOfSkills"
style="display:inline-block; text-align:center;">
{{skill}}
</mat-list-option>
or using CSS:
mat-list-option {
display:inline-block !important;
text-align: center;
}
This is what you're going to want to do if you want exactly 4 per line as you had originally stated.
<div class="form" id="skillsList">
<mat-label>Choose skills</mat-label>
<mat-selection-list style="display: flex; flex-wrap: wrap" #skills>
<mat-list-option *ngFor="let skill of listOfSkills; let i = index" [attr.data-index]="i">
{{skill}}
<div *ngIf="i%4" style="flex-basis:100%;"></div>
</mat-list-option>
</mat-selection-list>
</div>
All you're doing is adding a modulo operator that triggers after every fourth item to break the line. The flex-wrap and display flex are to allow you to put flex basis on the div with the *ngIf
I am using Angular 8 and want to show Angular Grid inside Angular Material Tab in following manner:-
<mat-tab-group>
<mat-tab label="Request Flow">
<div class="div-main">
<ag-grid-angular class="ag-theme-balham grid-dimensions" [pagination]="true"
[gridOptions]="reqDetailGridOptions" [rowData]="reqDetailRowData" [columnDefs]="reqDetailColDef"
[getRowHeight]="getRowHeight" [paginationPageSize]=50 (gridReady)="onGridReady($event)">
</ag-grid-angular>
<br />
<button class="button-internal">Add Subrequest</button>
</div>
</mat-tab>
</mat-tab-group>
The issue is that even if data present in Angular Grid then also Angular Material Tab is not expanding to make Angular Grid visible. It is showing like below:-
However when I put Angular Grid outside Angular Material Tab then the grid is showing its full data.
I tried to use "dynamicHeight" property of "mat-tab-group" but it is of no use.
Please help here.
Below steps worked for me:-
Added [dynamicHeight] = "true" to mat-tab-group.
Added following CSS:-
.mat-tab-group{
height: 100%;
}
.mat-tab-body-wrapper {
flex-grow: 1;
}
.mat-tab-body {
display: flex !important;
flex-direction: column;
}
This worked for me:
::ng-deep.mat-tab-body-wrapper {
flex-grow: 1;
}
you have to override mat-tab-body-wrapper style with ::ng-deep
Under my App , i ve a mat-select widget, it's a list of options which i'm used to scroll within the list to see all the options:
I want to add a header on the top of the the options list , thus , it keeps always appearent while scrolling
<mat-select placeholder="Selectionner la boutique"
id="libelleShop"
#inputSelectShop
[(value)]="selectedlibelleShopoValue"
ngDefaultControl
formControlName="libelleShop"
(selectionChange)="onShopSelectionChanged($event)">
/* THIS IS MY HEADER DIV */
<div id="myHeader" class="m-2">
<span class="myHeaderClass"></span>
</div>
<mat-option *ngFor="let shop of bad3ShopsListSortedByName"
[value]="shop.edoId">
{{shop.storeName}}
</mat-option>
</mat-select>
How may i fix this div to be always on the top , and prevent it to diseppear while scrolling to the bottom of the list
Suggestions ?
add the following to your css (you are missing the top: xxx px value) as this determines where to stick to exactly.
.m-2 {
position: sticky;
top: 0px;
z-index:1000;
margin-bottom: <whatever you need>px;
}