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.
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 am Using Material UI version 4, I have a dialog box which is custom and being used all over the project.
codeSandBox LInk
Inside dialog there is a form with textFeilds, radio buttons and buttons in dialog actions. Buttons are flickering when radio buttons are present and diableTouchRipple={false}. flickering effect is on middle and right most button. if I have only single button or disableTouchRipple={true} on middle button then buttons are not flickeing. Flickering is only present in Google Chrome, it's not present in firefox, brave, or edge
I had the exact same problem. Here is the horrible hack I finally found:
In the dialog add a div with some value like 'test' and with the properties zIndex: 1, position: "absolute". You can also add an opacity: 0 to hide it though to get it to work in your sandbox I had to set the opacity to 0.0001.
Here is the forked sandbox with the change: https://codesandbox.io/s/dialog-actions-button-flicker-effect-in-chrome-forked-x1ntb
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
Is it possible to make the whole card a link in Angular material or is there another directive intended for this use case?
You can just put a ng-click on the card and perform your operation.Further you can style the card with hover effects to get the feel of a link.Like this :
HTML:
<md-card ng-click="cardSelected()" class="cardAsLink">
....
</md-card>
JS:
$scope.cardSelected=function(){
console.log("card Clicked");
}
CSS:
.cardAsLink{
cursor: pointer;
}
.cardAsLink:hover{
border : 1px solid blue;
}
Yes you can put an anchor tag around the card. I think it is the better solution because you have the hole functionality of the anchor tag. In Ramblers answer clicking would work fine and if you use the the router the historie would also be korrect, but thinks like clicking with the mouse wheel to open a new tap would not work. The same goes for right mouse click thinks and the navigation preview on the bottom of the browser would also be missing.
I've successfully created a responsive menu using Angular UI Bootstrap. The problem is:
When the responsive menu is open it can only be closed by re-clicking the toggle. Clicking anywhere else on the page keeps the menu open, which is undesirable for the site I'm building.
I'm looking for this functionality:
Clicking anywhere except the menu should close the menu, not toggle it.
How would one go about achieving this? I tried setting an ng-click on the html or body elements and seeing if that would work, but it didn't.
This actually fairly simple to solve with a little extra CSS and an added div.
Plunker Demo
The mechanics of this solution are pretty straightforward: Add an extra div to the navbar markup that serves as a clickable backdrop when the menu is expanded.
CSS:
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
z-index: -1;
}
To make sure that the backdrop covers the entire viewport, you'll use position: fixed and set the top, right, bottom and left properties to 0. Then you'll need to make sure that the backdrop doesn't cover the menu, rendering your menu items un-clickable. To do this, you need to set its z-index to -1. Finally, to make sure it's 'clickable' you need to give it a background. Setting the background-color to transparent makes sure that it doesn't obscure any of the navbar elements.
The next thing you need to do is ensure that the backdrop element is only displayed when the menu is expanded, otherwise it would cover your body content and make it impossible to interact with any of the content. The cool thing is that the ngClass directive makes this simple. You can use the isCollapsed scope variable to determine when to add the backdrop class by setting the expression to isCollapsed === false. Lastly, add an ng-click attribute to close the menu. So, the markup looks like the following:
MARKUP:
<div ng-class="{backdrop: isCollapsed === false}" ng-click="isCollapsed = !isCollapsed"></div>
When the backdrop class is not added, the div--which has no content--will naturally collapse to a height of 0, so there's actually no need to hide or show it.
Just remember that the backdrop div has to be added to the same element that is handled by your controller that manages the collapse state of the menu. If it can't access the isCollapsed scope variable, it won't display and the ng-click event will have no effect.
You can easily improve this by creating a simple custom directive, so that you don't have to add the div in your markup. Just set the scope property of the directive to true so that the directive has access to the parent isCollapsed variable.