Resizable angular material popup with ang-grid-angular table - html

I am using angular material dialog. Inside that ag-grid-angular table is there.Resizable is working but ag-grid angular table stay as it is.I want to make material popup resizable.n if we increase popup width and height accordingly table should be changed.
<mat-icon class="close-icon" color="gray">close</mat-icon>
</button>
<div [class]="headLine">TittleName</div>
<div class="agTable">
<ag-grid-angular
class="zebra"
singleClickEdit="true"
[columnDefs]="columnConfig"
[rowData]="rowData"
[defaultColDef]="defaultColumnDefs"
[getRowHeight]="getRowHeight"
(gridReady)="gridReady($event)"
(gridSizeChanged)="setColumnWidth($event)"
[suppressContextMenu]="true"
[enableCellTextSelection]="true">
</ag-grid-angular>
</div>
<mat-dialog-actions align="end" class="buttonAllign">
<button mat-button mat-dialog-close class="closeButton">close</button>
</mat-dialog-actions>```
css------------->
::ng-deep .mat-dialog-container {
resize:both;
}

Related

Change Font Color for Angular Material - Tree when on Active

How to change font color when on Active and Focused in Angular Material Tree.
I am trying to change font color when it's active and focused. I have attached the
angular material tree code.
<mat-tree class="example-tree">
<mat-tree-node>
{{node.name}}
</mat-tree-node>
<mat-nested-tree-node>
<div class="mat-tree-node">
<button>
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.name}}
</div>
<div>
<ng-container></ng-container>
</div>
</mat-nested-tree-node>
</mat-tree>
.mat-nested-tree-node, .mat-tree-node {
color: #4a4a4a;
}

How to set state of an element in div based on the state of other element using css

<div class="ms-OverflowSet commandMenu root-236" role="menubar">
<div class="ms-OverflowSet-item item-237">
<button type="button" class="ms-Button ms-Button--commandBar commandMenu-item root-239" data-is-focusable="true" tabindex="-1">
<div class="ms-Button-flexContainer flexContainer-119">
<i data-icon-name="Edit" class="ms-Button-icon icon-241" role="presentation" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="ms-OverflowSet-overflowButton overflowButton-238">
<button type="button" class="ms-Button ms-Button--commandBar commandMenu-overflowitem root-239" aria-label="More" data-is-focusable="true" aria-expanded="false" aria-haspopup="true" tabindex="-1">
<div class="ms-Button-flexContainer flexContainer-119">
<i data-icon-name="MoreVertical" class="ms-Button-menuIcon menuIcon-242" role="presentation" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
By default "ms-Button ms-Button--commandBar commandMenu-item root-239" and are hidden "ms-Button ms-Button--commandBar commandMenu-overflowitem root-239"
I want to set state of both of them to visible if .commandMenu-overflowitem aria-expanded value is true "true"
.commandMenu-overflowitem[aria-expanded="true"]{
visibility: visible;
display: flex
}
Above is working to set state of commandMenu-overflowitem
Similarly, I tried to set state of commandMenu-item as below, but it doesn't work
.commandMenu-overflowitem[aria-expanded="true"] .commandMenu-item{
visibility: visible;
display: flex
}
You can't do that with css only. You need JS. This question came up on the REACT questions list. Is related to REACT?
If is ReactJs, you will set a value in the state based on the first div and check for this state in the second div. Depending on the value you can show a different class. The way you are describing the problem is a bit confusing. Setting the state of a div..I assume is changing the class of a div based on an another div class..or whatever value you will save in state.

how can i apply custom class next to cdk-overlay-pane for material menu in angular 7

i have requirement where i want to create mega menu using angular material menu. now i want apply some style to cdk-overlay-pane using own custom class
for that i used class and panelClass attribute but doesn't work for me.
i tried to apply custom class on using class and panelClass attribute. please check below code
<mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass='CustomClass'>
<mat-menu #menu="matMenu" [overlapTrigger]="false" class='CustomClass'>
none of above code is working for me.
it should be apply custom class next to cdk panel class when angular material open menu cdk overlay
Try this in your css... the hierarchy is quite unique and complex when you open up the inspect element:
::ng-deep .cdk-overlay-pane .mat-menu-panel .mat-menu-content { background: lightblue }
::ng-deep .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item {color: blue;}
Update:
if you'd like to use your own class, then refer to the correct panel using your class
relevant css:
::ng-deep .customClass .mat-menu-content {border:1px solid red; background:lightblue}
::ng-deep .customClass .mat-menu-content .mat-menu-item {color:blue;}
relevant HTML:
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" class='customClass' >
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
you can see a working example here

Angular - Primeng's confirmDialog is shown behind the ng-bootstrap's modal

I'm using the primeng and ng-bootstrap components to make a website with angular.
To capture information I use a form within an ng-bootstrap modal. When clicking on the "save" button of that modal The primeng confirmDialog should appear. The problem is that it appears behind the modal.
How can I fix it?
Here's some of my HTML:
<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle" width="425" appendTo="body"></p-confirmDialog>
<ng-template #modalFormOrder let-c="close" let-d="dismiss" id="modalFormOrder">
<div class="modal-header">
...
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" (click)="c('Close click')">Close</button>
<button type="button" class="btn m-btn--pill m-btn--air btn-success" (click)="SaveEditLoadOrder()">Save</button>
</div>
</ng-template>
I'm somehow sure that both dialogs use z-index CSS property
Override the z-index CSS property with a bigger number for the element that you want to appears first, example z-index: 1001;
If you want to override Css for PrimeNG I suggest you write it on /src/styles.css . Following Example is overriding calendar CSS
.ui-calendar {
width: 100%;
height: 100%;
}
On PrimeNG documentation you can find the CSS classes to override for each component

"cursor: pointer" just not working at all

This is my angular template code:
<!-- Modal -->
<ng-template #levelsmodal let-c="close" let-d="dismiss">
<div class="modal-header">
Select the levels you want to show in the table and chart
</div>
<div id="segments-modal" class="modal-body">
<div class="row margin" *ngFor="let level of config?.data?.groups; let i = index" (click)="selectLevel(level)">
<div class="colorspan" [style.backgroundColor]="level.active ? colors[i] : 'gray'" class="colorspan">
</div>
<span class="level-labels pointer-cursor" [innerHTML]="getLabel(level)" ></span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" (click)="c()">Close</button>
</div>
</ng-template>
The class "pointer-cursor" is plain simple:
.pointer-cursor{
cursor: pointer !important;
z-index: 500;
}
The z-index was only added for trying if it could make some difference, but it doesn't. I also tried applying this class to other parts like the wrapper div and so, but it's just not working. I keep seeing the normal "text cursor" instead of the pointer one...
Does anybody know why this happens?
Try that
::ng-deep .pointer-cursor{
cursor: pointer !important;
z-index: 500;
}
Edit
The ::ng-deep combinator (https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep) ensures that the defined style applies to all child elements of the component, not only elements directly created by the component.
Since the element you want to style in inside a ng-template tag (so it does not belong directly to the component), you need to use this to style its elements