I'm using PrimeNG color picker overlay inside a dialog.
<p-colorPicker [(ngModel)]="activity.color" name="color" appendTo="body"></p-colorPicker>
The problem is that picker is not showing and expands the dialog body adding the scrollbars. I want the colorpicker to overlay over the dialog.
Setting appendTo="body" works for calendar widget, but not color picker. Based on docs I experimented with various options like e.g. specifying template variable in dialog <p-dialog #activityDialog ... and referencing it in appendTo of colorpicker, but this is not working.
Update:
<p-dialog [contentStyle]="{'overflow':'visible'}">
</p-dialog>
this does it all and is documented already: here
I got it to work by setting:
:host /deep/.ui-dialog .ui-dialog-content {
overflow: visible;
}
in the css of the component containing the dialog.
Though :host /deep/ is deprecated by Angular
Related
How to make a modal window scroll in Elementor? As it is shown in the screenshots:
Go to your customizer and on the custom css write:
.popup-container-class{
overlay-y:scroll: !important;
}
Then inspect the scroll lines to find it's specific class in order to change respective color and sizes.
I want to change the Material-UI form dialog box background color but in doing so the text-field color is also changing...what should I do?
You can override the style of the component, here are a few links to the MUI docs for reference.
Here's the link to React Dialogue's override CSS documentation. Here is a second link to overriding/ styling the component, and a third.
I'm trying to show the full tooltip in a div that have overflow-y: auto
the tool tip is hidden under the div.
how can I make the tooltip shown above the div?
Thank you
If you are using custom tooltip make sure your tooltip style has position:fixed
position:fixed;
left:auto;
top:auto;
For better tooltip UI you should use bootstrap tooltip its very easy to intergrate.
Please check link for the same :
https://getbootstrap.com/docs/4.1/components/tooltips/
I have a modal window that is draggable. I want to disable the backdrop completely. I know that the uibModal has a backdrop property that I can set true/false or static - but that is not enough for me, I want the html content from the background still be clickable for example Google Sheet Help modal window - you can open it, drag it and still work in the background.
How can I disable the backdrop completely and make the content from the background clickable with the modal open? Is this possible with the uibModal or should I just create a modal window in plain javascript/iframe?
I can make the background clickable with this CSS:
.modal {
pointer-events: none;}
.modal-backdrop {
display: none;}
The problem with this is that it kills the draggable functionality because you can no longer click on the modal(only background is clickable).
I resolved my problem with jQuery UI
$(document).ready(function(){
$("#div-name").draggable({ containment: "body", scroll: false, handle:'#header' });
})
As you guys can see I set my ID for the div that I want to be draggable and I also set a containment for the body of the page so people can't move my div out of the view(body) and turned off scrolling. After that I set a handle - this is where you set the draggable part of your div(if you want the whole div to be draggable just remove the handle option) - I set the #header as my handle(top menu bar) - this way people can click inside the draggable div without accidentally moving it. If you want this to work for you, all you need is jQuery and jQueryUI.
This works like a charm and I am very happy!
In addition to CSS mentioned in the question, add pointer-events: all; to modal's content container. Worked for my uibModal.
I'm trying to set a downshift component inside a dialog body component, playing with zIndex doesn't work, and suggestion always appears underneath.
Is there a way to show downshift suggestion on top while using with a dialog ?
Here's a dialog with a downshift component inside (taping "a" inside "search a country" show the hidden suggestion) as an example of this issue :
https://codesandbox.io/s/q3lllwr08j
I also faced a similar problem. Hope this is what you are looking for: codeSandboxLink
I just added a class and added it to Dialog and DialogContent. The class name is dialogPaper. Look for the class in styles.
The class is:
dialogPaper: {
overflow: "visible"
}
Find an easy way to fix by just setting dropdown css by position: fixed
I guess the problem is not with the Z-Index. It's just not enough space to show the content of the dialog. I tried this solution with wrapping the content of the dialog with Paper element and set the height and width