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

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

Related

Resizable angular material popup with ang-grid-angular table

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;
}

Disable div onclick when I click on button

I have the following code:
<div id="question" onclick="location.href='{% url 'read_question' question.id %}';" style="cursor:pointer;">
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
The result:
When I click on the div #question I go to an other page.
But when I click on the button I also go to the other page.
However my button is disabled...
I would like not to go to another page when I click on the button.
In Firefox when I click on the button nothing happens (This what I want).
But in Chrome I go to the other page...
Someone could help me to permanently disable the button?
I use HTML5 and Bootstrap 4
you have the button inside the div so when you click on the button you are also clicking on the div. You can also do it your way and just check to see if the event.taget is a button. if it is don't go to the url, if it isn't then go.
<div id="question" onclick="location.href='{% url 'read_question' question.id %}';" style="cursor:pointer;">xxx
</div>
<div>
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
Try moving the onclick to the <button> itself rather than the surrounding <div>. The disabled attribute of the button will not be able to disable the onclick applied to its parent element.
In the two examples below I have styled it so you can see the difference between the surrounding div (In blue) and the button. Notice that the alert will only fire in the top example when clicking the div.
I am assuming that your styling means you can not see the difference between the div and button and it is left for Chrome and Firefox to decide whether you are clicking the disabled button or the div.
div {
background: blue;
padding: 1em
}
<div onclick="alert('test')">
<button disabled>my text</button>
</div>
div {
background: blue;
padding: 1em
}
<div>
<button disabled onclick="alert('test')">my text</button>
</div>
function myFunction(){
console.log(event.target.innerHTML);
if(event.target.innerHTML=='div')window.location.href='{% url ' + 'read_question' + 'question.id %}';
}
<div id="question" onclick='myFunction()' style="cursor:pointer;">
<button class="btn btn-primary" >div</button>
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
If you want to keep the button in the div, you should use event.stopPropagation();. Try the following code.
<body>
<div id="question" onclick="goLink();" style="cursor:pointer;">
<button class="btn btn-primary" onclick="noLink(event);">
<p>my text</p>
</button>
</div>
<script>
function goLink(){
window.location.assign("{% url 'read_question' question.id %}");
}
function noLink(){
window.alert("I didn't go anywhere.");
event.stopPropagation();
}
</script>
</body>
There is also a event.stopImmediatePropagation(); method. I hope this helps you out.
The button is disabled and that works exactly as it should (prevents the default action of the button).
However, by default, click events are bubbling. Which effectively means any such event on any elements in your page does not only get triggered on that particular element, but on every one of its parents until document or until one of the elements in the chain stop the bubbling.
To stop a click event (or any other bubbling event) from bubbling you have to call stopPropagation() method on it.
In your case:
document.querySelector('#question btn').addEventListener('click', function(e) {
e.stopPropagation();
})
...or, in jQuery:
$('#question btn').on('click', e => { e.stopPropagation() });
Now your button will not pass the click event to the div. If it's enabled it will do what you want it to, if not, it won't. The <div> won't have a clue in either case.
If you only want to cancel the bubbling when the button is disabled, change the selector from #question btn to #question btn[disabled]

Why is inline styling OK with bootstrap?

I am doing an online course on frontend, I have just started getting to know bootstrap 4 and flexbox. As far as I understand, to do inline styling is something that is considered bad practice. What I mean is this:
<button style="color: white; border: 5px solid red;"> Press me! </button>
And I like that the good practice is to not do this, mainly because of readability. What I don't understand is why the button above is not a good practice but the code here is considered good practice
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
Just to clarify I do understand that the style that I used in the example doesn't do the same thing as the one using bootstrap. I am just interested in why one is OK and the other one is not.
The only thing that I have come up with is that since bootstrap is using class="" it's probably not inline styling.
The first instance is inline styling:
<button style="color: white; border: 5px solid red;"> Press me! </button>
and the second has several classes that are styled in a separate css file:
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
One of the main reasons that it is bad practice to use inline styles is because they can override the styles that exist in the separate CSS file and become hard to track once your CSS becomes more complex. Also, your code becomes more difficult to maintain when you use inline styles. For example, if you had several buttons in your HTML that were each individually styled with inline styles and you decided to change one of the styles you would then have to change the style for each individual button, whereas if you gave them all the same class and styled that class in a separate CSS file, then you can change the color once and it will update all of your buttons.
For example (bad practice):
HTML
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
vs (good practice):
HTML
<button id="btn-one" class="button">Click here</button>
<button id="btn-two" class="button">Click here</button>
<button id="btn-three" class="button">Click here</button>
<button id="btn-four" class="button">Click here</button>
CSS
.button {
background-color: dodgerblue;
}
You can read more about CSS styling here.

"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

Cannot seem to change the color of a button

I want to change the color of my 'check out' button to orange in my cart page.
I have tried the following:
<button type="submit" style="width: 100%" name="checkout" class="btn"
style="background-color:#FFA500">{{ 'cart.general.checkout' | t }}</button>
However, the color remains blue (which is the overal color theme of my website).
Does anyone see an error in the above html code or would have a clue why the above color code is overriden?
BTW, I have managed to change other buttons on other pages of my website using the abovec code.
Many thanks.
Best regads,
You can define style attribute only once in your html and add as many CSS properties in that style attribute as you want
<button type="submit" style="width: 100%; background-color:#FFA500"
name="checkout" class="btn">{{ 'cart.general.checkout' | t }}
</button>
You should not put all the styles in several attributes.
Put all the css properties of element into one style tag separated by ";":
style="width: 100%; background-color:#FFA500"
Of course would not recommend to do it inline (inside html tag), but to assign CSS properties to a id (unique) or class (same type of elements) in .css file which should be included in head tag
HTML:
<button type="submit" style="width: 100%;background-color:#FFA500" name="checkout" class="btn checkout">{{ 'cart.general.checkout' | t }}</button>
CSS (styles.css) :
.checkout{
width: 100%;
background-color:#FFA500;
}