I have a button in angular 4 material table cell that I'd like to appear only when hover on table row:
<md-cell *cdkCellDef="let row" contenteditable='false' >
<div *ngIf="!row.editorEnabled" >{{row.goalStatusName}}
<button md-icon-button><md-icon (click)="row.editorEnabled=true;" mdTooltip="Edit">mode_edit</md-icon></button>
</div>
</md-cell>
How do I achieve this?
Update:
Entire code:
<md-cell *cdkCellDef="let row" contenteditable='false' >
<div *ngIf="!row.editorEnabled" >{{row.goalStatusName}}
<button md-icon-button><md-icon (click)="row.editorEnabled=true;" class="editButton" mdTooltip="Edit">mode_edit</md-icon></button>
</div>
<div *ngIf="row.editorEnabled" >
<md-input-container><input mdInput [(ngModel)]="row.goalStatusName" #goalName></md-input-container>
<button md-icon-button>
<md-icon (click)="modifyGoal(row.goalStatusId,row.goalStatusName)" mdTooltip="Save" style="color:green;font:bold;" >done</md-icon>
</button>
<button md-icon-button>
<md-icon (click)="row.editorEnabled=false" mdTooltip="Cancel" style="color:red;font:bold;" >clear</md-icon>
</button>
</div>
</md-cell>
button{ display:none}
md-cell:hover{
button{
display:block
}
}
.editButton{ visibility: hidden}
md-cell:hover .editButton{
visibility: visible;
}
This worked!
Related
I am generating a dialog box on a private Angular 6 app and based on how the designer wants, it sits too low unless of course my screen height is reduced, it's responsive and creates a cdk-overlay that has
style="justify-content: center; align-items: center;"
The documentation for angular 6 dialog here: https://v6.material.angular.io/components/dialog/overview
Unfortunately I don't see a config option or parameters that can set a max distance from the top, for example I never want the box further than say 200px from top. Any thought's or ideas on accomplishing this? Here is the general code driving all of this:
.ts code:
this.blahDialog.open(this.dialogTemplate, 'test', {
maxWidth: '300px',
data: {announceHeader: this.announceHeader, announceTitle: this.announceTitle, announceBody: this.announceBody}
});
this.announce = false;
pre html template:
<ng-template #dialogTemplate>
<div class="customer-notification">
<div class="customer-notification-header">
<p><img src="../../../images/blah.svg" alt="Blah"> {{ announceHeader }}</p>
</div>
<div class="customer-notification-body">
<h3 mat-dialog-title class="customer-notification-title">{{ announceTitle }}</h3>
<p mat-dialog-content class="customer-notification-content">{{ announceBody }}</p>
<div class="spacer-12"></div>
<div mat-dialog-actions class="dialog-buttons" layout="row">
<button ng-disabled="false" mat-raised-button id="got-it" class="outline-btn-prtl" color="primary" (click)="blahDialog.close('test', true)">GOT IT</button>
</div>
</div>
</div>
</ng-template>
The generated code is:
<div class="cdk-global-overlay-wrapper" dir="ltr" style="justify-content: center; align-items: center;"><div id="cdk-overlay-2" class="cdk-overlay-pane" style="max-width: 300px; pointer-events: auto; position: static;"><div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor"></div><mat-dialog-container aria-modal="true" class="mat-dialog-container ng-tns-c40-45 ng-trigger ng-trigger-slideDialog ng-star-inserted" tabindex="-1" id="mat-dialog-0" role="dialog" style="transform:none;opacity:1;0:transform;1:opacity;opacity:1;transform:none;webkit-opacity:1;webkit-transform:none;"><!----><div _ngcontent-c37="" class="customer-notification ng-star-inserted" style=""><div _ngcontent-c37="" class="customer-notification-header"><p _ngcontent-c37=""><img _ngcontent-c37="" alt="AbacusNext" src="./blah"> Announcement</p></div><div _ngcontent-c37="" class="customer-notification-body"><h3 _ngcontent-c37="" class="customer-notification-title" mat-dialog-title="">24/7 Support Tier</h3><p _ngcontent-c37="" class="customer-notification-content" mat-dialog-content="">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><div _ngcontent-c37="" class="spacer-12"></div><div _ngcontent-c37="" class="dialog-buttons" layout="row" mat-dialog-actions=""><button _ngcontent-c37="" class="outline-btn-prtl mat-raised-button mat-primary" color="primary" id="got-it" mat-raised-button="" ng-disabled="false"><span class="mat-button-wrapper">GOT IT</span><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button></div></div></div></mat-dialog-container><div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor"></div></div></div>
Looks like the dialog-config.d.ts accepts an object with top, bottom, left or right and the position. So in my request for help, it looks like this is all I needed to add:
position: {top: '200px'}
or
this.blahDialog.open(this.dialogTemplate, 'test', {
maxWidth: '300px',
position: {top: '200px'},
data: {announceHeader: this.announceHeader, announceTitle: this.announceTitle, announceBody: this.announceBody}
});
this.announce = false;
Simple enough but instead of deleting someone else might run into the same problem.
I created a css modification to change the modal width to 50% against 100% of the view. But the class modal-content is duplicated against modificated.
CSS
.modal-content{
width: 50%;
}
HTML
<ng-template #content>
<div class="modal-content">
<div class="modal-header">
<i class="fa fa-heart"></i> A
</div>
<div class="modal-footer">
<i class="fa fa-heart"></i> B
</div>
</div>
</ng-template>
I also faced the same issue in my development and i found the solution with help of windowClass in ng-bootstrap
const modalRef = this.modalService.open(UserPasswordComponent, {
windowClass: 'custom-modal-width' // add a custom class here where you open the modal
});
In your style.css control the width
.custom-modal-width .modal-content {
width: 50%;
}
make sure to remove your model-content class in your template
I use mat-menu of Angular Material with different mat-menu-item and I would like the list of menu items to be the same size as the button.
That's what I have:
And what I wish:
I tried to change the size of the menu with the css, but it does not work properly.
CSS:
.cdk-overlay-pane {width: 100%;}
.mat-menu-panel {width: 100%;}
HTML:
<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue">
<div fxLayout="row" fxLayoutAlign="center center">
<mat-icon>more_vert</mat-icon>
<span fxFlex>OPTION</span>
</div>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-icon>unarchive</mat-icon>
<span>First</span>
</button>
<button mat-menu-item>
<mat-icon>file_copy</mat-icon>
<span>Second</span>
</button>
</mat-menu>
I did a StackBlitz HERE for my mat-menu.
Thank you in advance!
EDIT : I changed my code because I'm using a responsive button with the bootstrap class "btn-block".
Use ::ng-deep to style .mat-menu-panel
::ng-deep .mat-menu-panel {
padding: 0 10px!important;
width: 100%!important;
}
See working code
I found a solution really not clean, but here it is: StackBlitz HERE
If someone would have a CSS solution, I'm interested.
HTML:
<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue" id="button">
<div fxLayout="row" fxLayoutAlign="center center">
<mat-icon>more_vert</mat-icon>
<span fxFlex>OPTION</span>
</div>
</button>
TS:
export class AppComponent implements DoCheck{
ngDoCheck(){
var widthButton=document.getElementById("button").offsetWidth;
var elems = document.getElementsByClassName('mat-menu-panel');
for(var i = 0; i < elems.length; i++) {
elems[i].style.width = widthButton+"px";
}
}
}
CSS:
.cdk-overlay-pane {width: 100%!important;}
.mat-menu-panel {max-width: 100%!important; min-width: 64px!important;}
DEMO:
Use menuOpened event for matMenuTriggerFor and add width runtime
HTML:
<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue" (menuOpened)="onMenuOpened()" id="button">
<div fxLayout="row" fxLayoutAlign="center center">
<mat-icon>more_vert</mat-icon>
<span fxFlex>OPTION</span>
</div>
</button>
TS:
onMenuOpened() {
const btn = document.getElementById('revisitSection');
if (btn) {
const elems = document.getElementsByClassName('button') as any;
// for (let i = 0; i < elems.length; i++) {
// elems[i].style.width = `${btn.offsetWidth}px`;
// }
for (const item of elems) {
item.style.width = `${btn.offsetWidth}px`;
}
}
}
I don't recommend to use ngDoCheck. it has more performance issue.
For those searching this in the future your can set this in your
.mat-menu-panel {
min-width: fit-content !important;
padding: 0px 0px !important;
}
.cdk-overlay-pane {
min-width: fit-content;
}
To make the mat-menu dynamic then you can apply with and styling in the component css of ts file through [ngClass]="getClassWithWidthandHieght()".Through css set the class of the in side div to the class like this the apply the styling set you styles.
.example-panel{
min-width: 500px;
}
In case somebody still needs this. Here is my solution
The idea is to read matMenuTriggerFor clientWidth, pass it to the menu itself as matMenuTriggerData, and bind it to the wrapper width
Since ::ng-deep is going to be deprecated,
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
another trick is to create margin around text span (mx-4 is bootstrap class for margin left and right
<button mat-menu-item>
<mat-icon>file_copy</mat-icon>
<span class="mx-4">Second</span>
</button>
I have created a form that adds input dynamically with an add and remove button. I would place them on the right
I can't click on remove button exept the lastet one
HTML file:
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Constituez votre équipe</ng-template>
<div formArrayName="pers" *ngFor="let control of secondFormGroup.controls.pers.controls; let i= index">
<mat-form-field>
<input matInput placeholder="Nom collaborateur #{{i+1}}" [formControl]="control.controls.name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Poste" [formControl]="control.controls.poste" required>
</mat-form-field>
<button *ngIf="secondFormGroup.controls.pers.controls.length > 1" (click)="deleteItem()" mat-mini-fab color="warn" class="rightButton"><mat-icon >remove</mat-icon>
</button>
</div>
<div>{{secondFormGroup.value | json}}</div>
<button (click)="addItem()" mat-mini-fab color="primary" class="rightButton"><mat-icon >add</mat-icon>
</button>
</form>
</mat-step>
CSS file :
.rightButton {
position: relative;
float: right;
}
When I disable rightButton class on the remove button , I could click on all of the buttons without a problem but they are not right positioned as I want.
Try this
.rightButton {
position: relative;
z-index: 99;
float: right;
}
This will make the button to be on top of all the HTML elements on the form. The z-index property only works on positioned elements (absolute, relative, fixed, and sticky)
For me z-index didnt work.
There was something in front of that button that is not visible. Making the button as a separate row helped.
In Bootstrap 4 this is how I made it a separate row:
<div class="row block-section">
<a data-placement="top" class="btn btn-sm btn-danger"
href="#" onclick="deleteClicked('video1');return false;">Delete </a>
</div>
Then it started working on mobile device even with
float: right
I want to hide overflow text in a DataTable cell primeNg, but nothing seems to work.
I didn't find anything on their documentation that could help me.
<p-dataTable #dataTable
tableStyleClass="defaultDataTable"
[value]="rows | async"
resizableColumns="false"
reorderableColumns="true"
responsive="true"
[rowHover]="true"
[(selection)]="selectedRows"
[rowStyleClass]="getRowClass"
[loading] = "loading"
(onRowClick)="onSelect($event)"
(onRowSelect)="onSelect($event)"
(onRowUnselect)="onSelect($event)"
(onRowDblclick)="onRowDblclick($event)"
(onHeaderCheckboxToggle)="checkAll($event)">
<p-footer class="table-footer p-text-muted" *ngIf="showFooter">
<ng-container i18n> {{footerText}}: {{dataTable?.dataToRender?.length || 0}} </ng-container>
</p-footer>
<p-column *ngIf="hasCheckboxColumn == true" [field]="IsSelected" [header]="" selectionMode="multiple"
onclick="checkAll($event)" [sortable]="false" ></p-column>
<p-column *ngFor="let column of columns" [field]="column.prop" [style] = "{width: '20%'}" [header]="column.name" [hidden]="!column.visible" [sortable]="isLockColumn(column.name) == false" >
<ng-template let-col let-row="rowData" pTemplate="body">
<div *ngIf="isValueBoolean(row[col.field]); else renderValue" align="center" title=" ">
<md-checkbox [(ngModel)]="row[col.field]" (change)="lockColumnChecked($event, row)" style = "width:20%;text-overflow: ellipsis;" [disabled]="true"></md-checkbox>
</div>
<ng-template #renderValue style = "width:20%;text-overflow: ellipsis;"><span style = "width:20%;text-overflow: ellipsis;" [mdTooltip]="getTooltip(row, column)" mdTooltipPosition="before">{{row[col.field]}}</span></ng-template>
</ng-template>
<ng-template *ngIf="isLockColumn(column.name)" pTemplate="header">
<div class="lock-header">
<md-checkbox [(ngModel)]="headerSelectClicked" (click)="changeStateOfRows(headerSelectClicked, rows, 'IsLocked')" class="lock-header-checkbox"></md-checkbox>
<i class="fa fa-lock fa-1x" aria-hidden="true"></i>
</div>
</ng-template>
</p-column>
.ui-datatable-data> tr> td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
this is the final solution...Thank you guys !
Just add the style for white-space in p-column. that worked for me.