We have had a Kendo Angular implementation in place for several years now. We recently updated Kendo and Angular and we found that a click event we placed on a is now broken.
We have an outer div which contains our combobox and another div with an icon containing a click event that is broken. See the screenshot with the red arrow pointing to the broken div icon.
Below is the HTML and the css governing the div.
<div *ngIf="values.length < maxCardinality"
class="editor-row">
<kendo-combobox #selectBox
[data]="connectionCandidates$ | async"
[textField]="'_id'"
[valueField]="'name'"
[filterable]="true"
[placeholder]="'Search...'"
(selectionChange)="handleComboBoxValueChange($event)"
(filterChange)="handleFilter($event)"
class="reference-combobox">
<ng-template *ngIf="resultCount >= 50" kendoComboBoxNoDataTemplate>
<span i18n>50+ partial matches. Type more.</span>
</ng-template>
<ng-template *ngIf="resultCount == 0" kendoComboBoxNoDataTemplate>
<span i18n>No results found.</span>
</ng-template>
<ng-template kendoComboBoxItemTemplate let-dataItem>
<span class="row">
<div *ngIf="hasConnectionTo(dataItem)"
class="checkmark"></div>
<span class="item"
[ngClass]="{
connected: hasConnectionTo(dataItem)
}">
{{ dataItem.name }}
</span>
</span>
</ng-template>
</kendo-combobox>
<div
class="picker-button"
*ngIf="values.length < maxCardinality"
(click)="handleClickReferencePicker($event)"></div>
</div>
The Div at the end of this with the class "picker-button" is the broken click event.
CSS for the picker-button
.picker-button {
position: absolute;
top: 6px;
right: 32px;
cursor: pointer;
user-select: none;
outline: none;
display: flex;
flex: 0 0 auto;
align-content: center;
justify-content: center;
width: 24px;
height: 20px;
background-size: 20px 20px;
background: url($assets-dir + '/picker_multiple_blue.svg') 3px 2px no-repeat transparent;
&.disabled {
background: url($assets-dir + '/picker_multiple_grey.svg') 3px 2px no-repeat transparent;
}
}
I omitted the rest of the CSS file as I don't think its relevant.
I have moved the div outside of the div containing the combobox and I can get the click event to work. I have tinkered with removing some CSS elements as an experiment to no avail. Its worth nothing this is all within a kendo grid cell. Anyone that can toss any help would be great.
I was able to fix this by adding a z-index: 2; to the picker-button class. The Combobox updates added a z-index of 1 causing it to overwrite our click event.
I am a beginner to angular. What i have currently is a sidenav container with the content being a mat toolbar. Now my question is, as you can see, when it's viewed with a full sized desktop, the background colour of the toolbar stretched and filled the entire width, whereas when it's viewed with a phone, the background colour is not filled all the way leaving some gap that's not pleasant to look at.
I have tried setting mat sidenav content width to be 100% thinking that it would take up the entire space of the width
For further information, this is the html.
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer
class="sidenav"
fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="false">
<mat-toolbar>
<button mat-button
(click)="drawer.close()">
<mat-icon>close</mat-icon>
</button>
</mat-toolbar>
<mat-nav-list>
<a mat-list-item
routerLink="/"
(click)="drawer.close()">Home</a>
<a mat-list-item
routerLink="/products"
(click)="drawer.close()">Products</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar>
<button type="button"
aria-label="Toggle Sidenav"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle Icon">menu</mat-icon>
</button>
<span class="logo"
routerLink="/">
<img class="ww-logo"
src="assets/images/WWtrans.png" />
</span>
<div>
<button mat-button
class="button">
<mat-icon aria-label="Search for a product"
svgIcon="search"></mat-icon>
</button>
<button mat-button
class="button">
<mat-icon aria-label="Login if the user hasn't logged in yet"
svgIcon="login"></mat-icon>
</button>
<button mat-button
class="button">
<mat-icon aria-label="Show what's inside the cart"
svgIcon="shopping-cart"></mat-icon>
</button>
</div>
</mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>
and here is the css
.logo {
display: flex;
margin: auto auto;
outline: none;
align-self: center;
justify-content: center;
align-self: center;
min-width: 100px;
max-width: 100px;
.ww-logo {
width: 60%;
cursor: pointer;
}
}
.button {
border: 1px solid red;
width: 10px;
}
.sidenav-container {
height: 100%;
width: 100%;
}
mat-sidenav-content {
width: 100%;
}
Thank you for any help in advance
You seem to be running into an issue with your mat-toolbar elements overflowing their horizontal space. You may be able to make some adjustments to the space your logo is taking up.
Also, I see that in your .button class you have added width: 10px; however it looks like this is not being applied. One reason for this is that mat-button comes with a style that specifies min-width: 64px; that you may need to override if you would like your buttons to scale down in size.
If the above approach works, you may also want to adjust the padding of your buttons as well. The following may be helpful, but I was not able to actually test it:
.button {
border: 1px solid red;
min-width: 32px !important;
padding: 2px !important;
}
I have an odd bug that only occurs when the dropdown panel extends past the browser window. The background of the panel then becomes transparent. If the browser window is resized so that the dropdown panel can be completely visible upon clicking, the background is no longer transparent.
These are the custom styles affecting the ng-select dropdowns:
.prop-form {
...
&__row {
display: flex;
justify-content: space-between;
align-items: baseline;
}
&__col {
flex: 1;
}
&__dropdown {
display: flex;
align-items: baseline;
}
&__ng-select {
width: 100%;
margin: 0.75em 0.5em;
}
&__ng-select > .ng-value-container {
padding-bottom: 0;
}
}
And the markup:
<div class="prop-form__row">
...
<div class="prop-form__col">
<div class="prop-form__dropdown">
<ng-select class="prop-form__ng-select" name="time"
[items]="scheduleFormService.timeOptions" [markFirst]="true" [clearable]="false" [searchable]="false"
placeholder="Select time" formControlName="time">
<ng-template ng-option-tmp let-item="item">
<div>{{ item }}</div>
</ng-template>
</ng-select>
</div>
</div>
...
</div>
Solutions already attempted (but did not work):
Using ViewEncapsulation.None in the component and parent component
Overriding default styles with ::ng-deep in both the component and global styles
Bug occurs in Chrome and Safari.
My coworker was able to find the problem. The height of the dropdown container was set to auto. So when the height of the modal isn't enough to display all of the items, the height adjusts to a smaller value.
Solution:
.ng-dropdown-panel {
white-space: normal;
height: fit-content;
}
I am trying to get my material dialog to have an X button at the top right, but I am having problems with the positioning.
component.ts
this.d.open(loginComponent, {
width: '300px',
height: '',
panelClass: 'dialogC',
});
component.html
<mat-dialog-content>
<button mat-button class="close-icon" [mat-dialog-close]="true">
<mat-icon>close</mat-icon>
</button>
<h2 mat-dialog-title>Login</h2>
style.scss
.dialogC {
position: relative !important;
}
.close-icon {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
The X is just aligned to the left instead of top right. Suggestions?
Update, this is the problem I get after adding flex:
<button class="close" mat-button (click)="onNoClick()">X</button>
<h1 mat-dialog-title>Login</h1>
<div mat-dialog-content>
...
...
</div>
CSS: (Please give it in global (styles.css) or give ViewEncapsulation.NONE or else these styles wont affect.)
.cdk-overlay-pane.my-dialog {
position: relative!important;
}
.close.mat-button {
position: absolute;
top: 0;
right: 0;
padding: 5px;
line-height: 14px;
min-width: auto;
}
Note that in the CSS We now have a new class out of thin air .my-dialog
So, please mention that as panelClass in dialogRef like below,
this.dialog.open(DialogComponent, {
width: '250px',
panelClass: 'my-dialog',
..
..
This yields me the following result,
The easy way now is:
<div mat-dialog-title class="dialog-title">
<h2>Title</h2>
<button mat-icon-button aria-label="close dialog" mat-dialog-close>
<mat-icon>close</mat-icon>
</button>
</div>
And the dialog-title css is
.dialog-title {
display: flex;
justify-content: space-between;
align-items: center;
}
That's working on Angular 8.0.0
Using mat-icon-button it is necessary to add only the style below to the button.
.close-button{
float: right;
top:-24px;
right:-24px;
}
Functional example:
stackblitz
You can have the X at the title and display: flex ? Like this,
<div mat-dialog-title class="flex-container">
<h1>Login</h1>
<button mat-button class="close-icon" [mat-dialog-close]="true">
<mat-icon>close</mat-icon>
</button>
</div>
<div mat-dialog-content>
...
...
</div>
FlexBox to the rescue,
.flex-container { display: flex;}
SideNote: You can still use fxLayout instead of .flex-container
In your component HTML file add the following markup at the top of all elements.
<div mat-dialog-title style="float: right; font-weight: 700; cursor: pointer;" (click)="close()">X</div>
In your component TS file add the close function as follows.
close(): void {
this.dialogRef.close();
}
Don't forget to include the dialogRef inside the constructor as an argument
constructor(public dialogRef: MatDialogRef<YourDialogComponent>) {}
What I prefer is doing something like this -
.html file
<button class="close" mat-button mat-dialog-title (click)="closeDialog()">X</button>
By giving mat-dialog-title to the button I make sure it is in the top layer and then I give custom class to it, something like
.css file
.close.mat-button {
position: inherit;
top: 0;
right: 0;
padding: 2px;
line-height: 3px;
min-width: auto;
}
The button discussed above and my modal-content is in a parent div, which I display as flex and use as flex-direction: column
.dialog{
display: flex;
flex-direction: column;
}
.ts file
closeDialog() {
this.dialogRef.close();
}```
You can acheive this by applying some css styles to mat-icon, you can achieve this.
Mat-dialog looks as below.
<button mat-icon-button class="close-button" [mat-dialog-close]="true">
<mat-icon class="close-icon" color="warn">close</mat-icon>
</button>
<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
<p>Hello World!</p>
</div>
Add the following css rules
// if you want to change the color of the icon
.material-icons.color_white {color: #ffffff;}
.close-button{
float: right;
top:-24px;
right:-24px;
}
//if you want some css animation
.close-icon {
transition: 1s ease-in-out;
}
.close-icon:hover {
transform: rotate(180deg);
}
//To place the x mark outside of the container
::ng-deep .icon-outside .close-button{
float: right;
top:-52px;
right:-52px;
}
::ng-deep .icon-outside .mat-dialog-container {
overflow: unset
}
Your mat-dialog consuming componnet should look as below
constructor(public dialog: MatDialog) {}
openDialog(): void {
const dialogRef = this.dialog.open(DialogComponent, {
width: '250px',
panelClass:'icon-outside',
data: {name: 'your name'}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
Adding custom class icon-outside is important.
This will change your code as expected.
If you are seeking to change the color of the icon, Add these two classes to mat-icon material-icons & color_white
So your button will look as below:
<button mat-icon-button class="close-button icon-outside" [mat-dialog-close]="true">
<mat-icon class="close-icon material-icons color_white">close</mat-icon>
</button>
I just ran into the same problem. I've come up with an easier solution using floats. This also aligns the close X with the title, which I find more visually pleasing.
HTML file:
<div>
<h1 mat-dialog-title style="float: left">Dialog Title</h1>
<span style="float: right" [mat-dialog-close]>X</span>
</div>
<div mat-dialog-content style="clear: both">
...
</div>
On our project I did an implementation using flex and css.
.html file
<div fxLayout="column">
<div fxLayoutAlign="end">
<button mat-icon-button color="primary" (click)="close()"><mat-icon>close</mat-icon></button>
</div>
<mat-card class="pd-2">
...
</mat-card>
</div>
.ts file
openMinimumsModal( ) {
const dialogRef = this.matDialog.open(OrderMinimumsComponent, {
width: 'auto',
panelClass: 'dialog-no-padding',
data: { ... },
});
dialogRef.afterClosed().subscribe(() => {});
}
close(): void {
this.dialogRef.close();
}
.css file
.dialog-no-padding .mat-dialog-container {
padding: 0;
}
.pd-2 {
padding: 0 20px 20px 20px !important;
}
Possible duplicate: 49420069
Close functionality and button alignment without TypeScript.
HTML:
<button class="button-close" mat-button [mat-dialog-close]="true">X</button>
CSS:
.button-close {
justify-self: right;
font-size: 20px;
border: none;
height: 30px;
background-color: #FFFFFF;
outline: none;
color: #c04747;
&:hover {
cursor: pointer;
}
}
I want to change my icon to a button to use it as copy to clipboard method. But when I do it, the button moves to the right side. Only when I try a around the text it works but of course the formatting is broken.
<mat-list>
<h3 matSubheader>Persönliche Daten</h3>
<mat-list-item>
<button mat-icon-button ngxClipboard [cbContent]="firstname">
<mat-icon matListAvatar>account_box</mat-icon>
</button>
<h4 matLine>{{firstname}}</h4>
<p matLine>Vorname</p>
</mat-list-item>
<mat-divider [inset]="true"></mat-divider>
<mat-list-item>
<mat-icon matListAvatar>description</mat-icon>
<h4 matLine>{{lastname}}</h4>
<p matLine>Nachname</p>
</mat-list-item>
</mat-list>
My CSS:
mat-list-item mat-icon[matListAvatar], .mat-list-item-content mat-icon[matListAvatar] {
background-color: rgba(0,0,0,0.04);
}
mat-list-item mat-icon[matListAvatar], .mat-list-item-content mat-icon[matListAvatar] {
align-items: center;
align-content: center;
justify-content: center;
display: flex;
}
/deep/ .mat-list-item-content {
padding: 0!important;
}
/deep/ .mat-list-base .mat-subheader {
padding: 0!important;
}
p {
font-family: Lato;
color: rgba(0,0,0,.54);
}
Using the (click) property
You can just make the icon behave like a button.
Add a (click) property to it and call the function you want!
<mat-icon (click)="myFunction($event)" matListAvatar>account_box</mat-icon>
Then you can add some :hover css to it to make it feel like a button.
Using HTML/CSS
You can place any content next to the button in a wrapper, you can customize this one in the css to behave differently if needed (if you end up adding more data to display you might have to play around with the flex properties, margin... or you might need to have nested wrappers, etc...)
<button mat-icon-button >
<mat-icon matListAvatar>account_box</mat-icon>
</button>
<div class="test-wrapper">
<h4 matLine>{{firstname}}</h4>
<p matLine> Vorname</p>
</div>
with this css:
.test-wrapper{
padding-right: 0;
padding-left: 16px;
width: 100%;
display: flex;
flex-direction: column;
}
.test-wrapper > *{
margin: 0;
}