I have the following Angular Material List
<mat-list
role="list"
class="diag-list"
>
<mat-list-item
role="listitem"
*ngFor="let obj of objects"
(dblclick)="removeObj(obj)"
class="diag-list-item"
[title]="obj.text"
>
<span class="list-selected-objects">
<ng-container *ngIf="obj.ps !== ''">
{{ obj.ps }} :
</ng-container>
{{ obj.text }}
</span>
<i
class="fas fa-times delete-diag-icon"
(click)="removeObj(obj)"
style="color: red; float: right"
title="Delete object"
></i>
</mat-list-item>
</mat-list>
With following CSS classes
.diag-list {
max-height: 200px;
overflow-y: auto;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.list-selected-objects {
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
width: 100%;
font-size: 1rem;
}
.diag-list-item {
font-size: 0.75rem;
height: auto;
padding-bottom: 0.4rem;
padding-top: 0.4rem;
white-space: nowrap;
}
.diag-list-item:hover {
background-color: lightgray;
}
.delete-diag-icon {
font-size: 1.25rem;
}
.delete-diag-icon:hover {
cursor: pointer;
}
I can remove an object using (dblclick)="removeObj(obj) but not using a click listener in the <i></i>. I think the span overlaps the icon because not the title of the icon Delete object is shown but the title obj.text when I hover over the icon. So, clicking on the icon does not work. I wanted to ask why and what can I do to register clicks on that icon?
You can replace i tag with button like this:
<mat-list-item le="listitem" *ngFor="let obj of objects"
(dblclick)="removeObj(obj)" class="diag-list-item" [title]="obj.text">
<span class="list-selected-objects">
<ng-container *ngIf="obj.ps !== ''">
{{ obj.ps }} :
</ng-container>
{{ obj.text }}
</span>
<button class="delete-diag-icon" mat-icon-button (click)="removeObj(obj)" title="Delete object">
<mat-icon>delete</mat-icon>
</button> <--- this replaced for i tag
</mat-list-item>
Example: https://stackblitz.com/edit/angular-lxjpyu
Hope this help!
Related
I have a mat-select inside my site's main navbar. It contains a list of currencies and is positioned at the right of the navbar. Since I strictly want to display the currency abbreviation (ex: USD) in my navbar, but want to display a flag icon, currency name, and abbreviation inside the panel, I decided to resize the panel to be larger than the select. This leads to a problem where the panel overflows the screen and is not displayed entirely. I was wondering if there was a simple way to make sure the panel stays inside the browser, in other words, make sure the panel position does not go past the end position of the select.
Current Behavior:
Desired Behavior:
HTML:
<header>
<mat-toolbar class="navbar">
<button mat-icon-button aria-label="Menu Icon">
<mat-icon>menu</mat-icon>
</button>
<span>My Website</span>
<div class="navbar-currency">
<mat-form-field class="currency-select">
<mat-select name="currency" panelClass="currency-panel" [(value)]="selectedCurrency">
<mat-select-trigger>{{selectedCurrency}}</mat-select-trigger>
<mat-option *ngFor="let currency of currencyArr" [value]="currency.key">
<span class="fi fi-{{currency.icon}}"></span> {{currency.key }} - {{ currency.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</mat-toolbar>
</header>
CSS:
.navbar {
background: #ffffff;
display: flex;
padding-left: 2rem;
padding-right: 2rem;
}
.navbar-currency{
margin-left: auto;
margin-top: 1.3rem;
}
.currency-select{
font-size: 0.85rem;
width: 80px;
}
.currency-panel.mat-mdc-select-panel {
font-size: 0.85rem;
min-width: calc(100% + 120px)
}
.currency-panel.mat-mdc-select-panel .fi{
margin-right: 0.1rem;
}
.currency-panel.mat-mdc-select-panel .mat-mdc-option{
min-height: 36px;
}
Simple Solution
If your Currency Mat-Select is always on the right side of the screen then you could solve this with some css. Set the container position to absolute and the right to zero:
.currency-panel.mat-mdc-select-panel {
font-size: 0.85rem;
min-width: calc(100% + 120px);
position: absolute !important;
right: 0;
}
Mat-Menu Solution
Use Mat-Menu instead, which has a built in handling for the menu positioning. Mat-Select consider the width of your select element as the width of the dropdown select options and that does not require handling the left/right overflow.
You will just need to rewrite your css and you are good to go.
Component Template:
<button mat-button [matMenuTriggerFor]="menu" class="currency-select">
<span>{{ selectedCurrency }}</span>
<mat-icon
fontIcon="arrow_drop_down"
style="vertical-align: bottom"
></mat-icon>
</button>
<mat-menu #menu="matMenu" panelClass="currency-panel">
<button
*ngFor="let currency of currencyArr"
mat-menu-item
(click)="selectedCurrency = currency.key"
>
<span class="fi fi-{{ currency.icon }}"></span>{{ currency.key }} -
{{ currency.name }}
</button>
</mat-menu>
Component CSS:
.navbar-currency {
margin-left: auto;
}
.currency-select {
font-size: 0.85rem;
}
.mat-mdc-menu-panel .fi {
margin-right: 0.2rem;
}
.currency-panel .mat-mdc-menu-item {
min-height: 36px;
}
Checkout my stackblitz example
If your Mat-Select will be used on both corners, then you should write your own position handler for the Mat-Select.
I am using Kendo Grid to display Grid view of data. I have a column with button that, when clicked, shows a list of options on top of the page and left to the button.
I am not using Kendo Popup or context menu, but just using ng-template with structural directive logic.
What i look for?
What i get?
This is my Kendo grid column:
<div style="position: relative">
<kendo-grid>
...
<kendo-grid-column title="SAMPLE">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<div class="context-dropdown-menu" *ngIf="showIndex === rowIndex && showDialog" style="position: absolute;">
<ul>
<li> <i class="fa fa-envelope"></i> Item2.1 </li>
<li> <i class="fa fa-envelope"></i> Item2.2 </li>
<li> <i class="fa fa-envelope"></i> Item2.3 </li>
</ul>
<div>
<button type="button" (click)="clicked(rowIndex)"> Click </button>
</ng-template>
</kendo-grid-column>
...
</kendo-grid>
</div>
Thanks in advance!
Replace below style in your stackblitz example it will work fine.
.context-dropdown-menu {
margin: 0 -10.75rem;
padding: 0px;
width: 170px;
z-index: 999999;
}
.context-dropdown-menu ul {
margin: 0px;
padding: 0px;
list-style: none;
background: #e4e4e4
}
.context-dropdown-menu ul li {
font-size: 13px;
padding: 7px 10px;
border-bottom: 1px solid #efefef;
color: #617189;
cursor: pointer;
}
.context-dropdown-menu ul li:hover {
background: #f5f5f5;
}
I created a custom styled chips list with mat-basic-chip (Unstyled chips) as per official docs
My Chips look like
Now, I want to add close buttons to my chips as default mat-chips have
Here is the template of mat-basic-chip
<mat-basic-chip *ngFor="let signal of signals">
<div matLine class="text-center">{{signal .name}}</div>
<div matLine class="mt-sm-n1 text-center"><small>(Default)</small></div>
</mat-basic-chip>
As per the official docs receives the mat-basic-chip CSS class in addition to the mat-chip class.
So, here is the CSS of .mat-basic-chip to style my custom chips:
.mat-basic-chip {
display: inline-block;
clear: right;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 1vh;
padding: .7vh 0vh .7vh .7vh;
margin-right: 2vh;
margin-top:1vh;
min-width: 15vh;
}
You can click the view source button in the offial docs to se how they have done it.
They add a mat-icon in the chip like this:
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (removed)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
You don't need to reinvent the wheel here and write your own icon for the remove button, it's already been done.
Take a closer look in the offical docs and press the view source button.
Good luck!
How to add a remove button to the mat-basic chip
You can use the normal chip mat-chip with all your customizations like in the picture without changing any css.
I took the basic example of the mat-chip fruits. There is changed it to the following:
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(fruit)">
<div>
<div matLine>{{fruit}}</div>
<div matLine><small>(Default)</small></div>
</div>
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
Modified example: https://stackblitz.com/angular/mjygopomxvq
Customize your mat-chip
This method is officially supported and recommended. For more information look at
https://material.angular.io/guide/theming and
https://material.angular.io/guide/theming-your-components
Using that you can add the color property to make customizations for different states. For that modify the .mat-chip.mat-custom class whereas the mat-custom can be anything. Just the mat-... has to be the same.
SCSS
.mat-chip.mat-primary {
background-color: blue;
color: white;
}
.mat-chip.mat-accent {
background-color: yellow;
color: black;
}
/* Your implementation from the description */
.mat-chip.mat-anything {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 1vh;
padding: .7vh 0vh .7vh .7vh;
margin-right: 2vh;
margin-top:1vh;
}
HTML
<mat-chip-list>
<mat-chip color="primary" selected>Primary</mat-chip>
<mat-chip color="accent" selected>Accent</mat-chip>
<mat-chip color="anything" selected>
<div>
<div matLine>Anything</div>
<div matLine><small>(Default)</small></div>
</div>
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
DEMO for your reference: https://stackblitz.com/edit/angular-v5xq8y
Feel free to leave some feedback.
You can easily achieve this, I got this solution last week where i
need this same thing in mat-chips
SCSS
.mat-chip-list-wrapper {
margin: 1px 0 !important;
.mat-standard-chip {
padding: 0 $space-5 !important;
display: flex;
.mat-icon {
font-size: 17px;
}
}
}
HTML
<mat-chip-list class="mat-chip-list-wrapper" aria-label="Selected list">
<mat-chip>Hello
<mat-icon matChipRemove >cancel</mat-icon>
</mat-chip>
</mat-chip-list>
one of solutions is to use flexbox.
should be something like this:
.flex-container {
display: flex;
white-space: nowrap;
}
.content {
text-align: center;
}
.cancel-button {
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 5px;
}
mat-basic-chip {
display: inline-block;
clear: right;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 1vh;
padding: .7vh 0vh .7vh .7vh;
margin-right: 2vh;
margin-top:1vh;
min-width: 15vh;
}
<mat-basic-chip *ngFor="let signal of signals">
<div class="flex-container">
<div class="content">
<div matLine class="text-center">{{signal.name}}</div>
<div matLine class="mt-sm-n1 text-center"><small>(Default)</small></div>
</div>
<div class="cancel-button">
<mat-icon matChipRemove *ngIf="removable">X</mat-icon>
</div>
</div>
</mat-basic-chip>
css is more illustative and could be modified for your criteries and used framework specifications, the main idea is in template layout.
Here you have an example:
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (removed)="remove(fruit)">
{{ fruit.type }}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
I've been struggling for a correct alignemt between two icons and a small text but I cant manage to properly align them:
I need the text to be align with both icons, can someone give me a help; i've checked a very similar post but I couldn't make it work.
.icon-company-title {
margin-top: 30px;
}
.material-icons.md-18 {
color: $primary;
font-size: 40px;
line-height: 0!important;
}
.material-icons.edit {
color: $primary;
vertical-align: middle;
}
.business-icon {
display: inline-block;
vertical-align: bottom;
}
<div class="icon-company-title">
<div class="business-icon">
<i class="material-icons md-18">business</i>
</div>
<span class="company-card-title">{{ entity.name }}</span>
<button class="" mat-icon-button [matMenuTriggerFor]="menu">
<i class="material-icons edit">mode_edit</i>
</button>
</div>
I want to get the style like this:
With my code I achieved like this:
Here is my code:
<div>
<a class="appointments" data-ng-click="showPrev(index)">
<i class="icon-double-angle-left"></i>
</a>{{date}}
<a data-ng-click="showNext(index)">
<i class="icon-double-angle-right"></i>
</a>
<div>
<span class="appointments" data-ng-repeat="time in times"><br>
<span data-ng-click="showModal()">{{time}}</span></span>
</div>
</div>
Can anyone please suggest me help. Thanks!
hope this help you to go in right direction...
Check the CSS
.time > span {
background-color: #F2F2F2;
color: #2AAAC7;
display: block;
width: 100px;
padding: 5px 25px;
margin: -5px;
text-align: center;
}
.date > i {
color: #2AAAC7;
}
<div>
<a class="appointments date" data-ng-click="showPrev(index)">
<i class="icon-double-angle-left"></i>
</a>
2017-06-29
<a data-ng-click="showNext(index)">
<i class="icon-double-angle-right"></i>
</a>
<div>
<span class="appointments time" data-ng-repeat="time in times"><br>
<span data-ng-click="showModal()">8:00 AM</span>
</span>
<span class="appointments time" data-ng-repeat="time in times"><br>
<span data-ng-click="showModal()">9:50 AM</span>
</span>
<span class="appointments time" data-ng-repeat="time in times"><br>
<span data-ng-click="showModal()">10:00 AM</span>
</span>
</div>
</div>
Use padding for the problem padding-top
using css then you can solve your problem.
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
</style>
[1] [https://www.w3schools.com/css/tryit.asp?filename=trycss_table_striped]
[1]: refer for more informtion