Bug:
Z-Index NOT working on Material Dialog
What is the expected behavior?
Z-Index should work on Material Dialog or Dialog should be on top of everything else.
What is the current behavior?
Material Dialog gets covered by select's options that are below.
What are the steps to reproduce?
https://stackblitz.com/edit/angular-gsa8kr-rkss7t?file=app/dialog-overview-example.html
Type text.
Select dropdown.
Screenshots: https://postimg.cc/gallery/2i3tc2sbc/
Is there anything else we should know?
Tried CSS fixes:
.modal__content,dialog-layout,mat-dialog-container,.mat-dialog-container,#cdk-overlay-0,.cdk-overlay-pane {
z-index: 9999 !important;
}
NONE of that worked.
The class holding the matdialog overlay is cdk-overlay-container
Add this code to your style.css
.cdk-overlay-container {
z-index: 9999 !important;
}
That should solve the issue.
The <select> element is an interactive content element in HTML. It and behaves like a right click context menu and is rendered above all document elements.
In your case, when you click on select after entering your name in the field, the following things happen in sequence:
Blur event on the textbox is called and dialog opens.
Select menu opens.
So, according the sequence, what is happening is correct i.e. the dialog is opening first and then the select, so the select is above dialog which is correct.
But of course the interface does not seems good when this happens so there is a workaround, i.e. hide the select when the dialog opens and then show it again after lets say 0.1 seconds. As the select hides, its menu will hide with it.
I have implemented it for you. Please have a look at this Stackblitz: Select closing on dialog open
Hope it helps.
Related
I need to prevent the check of a checkbox by clicking on its label.
I use the angular material checkbox.
I partially manage to do it using the preventDefault() method but the checkbox still shows focus style if I click on the label.
What I need is: if I click on the label, nothing should happen to the checkbox (not checked, not focused on).
Please take a look at this stackblitz link to better understand my issue: https://stackblitz.com/edit/angular-2zyvdp?file=src%2Fapp%2Fcheckbox-overview-example.html
If you don't want to change ripple behavior or CSS, try this:
<span (mousedown)="$event.stopPropagation()" (click)="check($event)">
Check me!
</span>
The ripple effect is triggered from the mousedown event (hence why you don't see them when using the space bar), and you need to use stopPropagation(), as preventDefault() isn't enough here.
StackBlitz link here
Add below css in style.css & check
span.mat-ripple.mat-checkbox-ripple.mat-focus-indicator {background: none !important;opacity: 0 !important;}
I can't understand how to make something like in this site: __smashingmagazine.com
If u resize the window, the search will be with a button. So... try to click on this search icon... the new div will appear with search input. and pay attention to the behavior of it: no matter what u gonna do next this div won't hide it self, but only if you click on 'x' that appear instead of search icon... and this is pure css, right?! how this possible...
I found this article:
Click here
but the behavior is very, very different... and i don't like it at all.
Any idea how to make it work like in the site above? anything would may help!
Thanks!
The example from Smashing Magazine uses the :target psuedo class to change the CSS of the elements when an anchor is clicked. Here's a simplified breakdown of how they've achieved that behaviour.
The anchor is configured to set a fragment identifier in the URL, in the case of Smashing Magazine this is #ms. The have an anchor like this:
Search
When clicked the fragment identifier is set to #ms, they then use this to make the search appear using the :target psuedo class.
#ms {
display: none;
}
#ms:target {
display: block;
}
When the fragment identifier is set to #ms, the :target styles are activated, displaying the search.
Here's a simple example: http://jsfiddle.net/we76L66h/
They are using :target with children (#ms:target + div.example) to also change the styling of children within the targeted element. This is how they make the button change to a "close" button when the #ms fragment identifier is set.
I have a CSS menu that when you hover over a li it shows a sub menu, example ui: http://www.screencast.com/t/JIa2NvbreF8V
I added code that on a model device is would 'focus' the element when you click/tap it, like: $($event.target).focus();
problem is, when I tap a <a href="\blah"> link inside my page navigates fine but my menu stays open. I tried retriggering the body to be the focus but no luck. Anyone got a good idea on how to accomplish this?
What I would do is add a class to control the "focused" state, so that when you click on a link you can easily remove it.
Shouldn't be complicated but i would need to look at the code :O
Try the below code
$("a").focusout(function(){
$(this).css("display","none");
});
Regards
maha
inside that jquery selector have it so when you click the target it also changes the style for the parent li:hover
I have an issue I cannot resolve by myself.
There's a web page with a check box on it. See scr1.png attached.
The check box is some sort of a decoration ( I don't know what this technology is). I cannot click on it, and Webdriver doesn't see it. Real check box is hidden. It is hidden in CSS file (see right corner of a scr1.png)
Now when I change it manually in FireBug from visibility: none to visibility: yes, then real check box is shown on the page (see screen shot 2).
ISSUE
I'm trying to click on this check box like this:
#driver.find_element(:id,"MainContent_chkAuthorize").click
But then I'm getting Selenium::WebDriver::Error::ElementNotVisibleError: because element is hidden and cannot be found by Webdriver.
Is there any way to overcome this issue?
How can I change the visibility with Webdriver?
How can I click this element at last?
To make checkbox visible you should change its display property.
input.styled{
display:block; // Or you can remove this
}
Something strange afoot, here:
An instance of Datepicker is showing up in a weird place as a single bar in the upper left hand corner of this page.
I'm using both jQuery UI's Datepicker and Accordion on a page. In the CSS for the UI, the display:none for Datepicker seems to be overridden by the display:block for the Accordion, at least according to Firebug (see img below).
Then, once the Datepicker trigger is clicked in the 'catering/event room' tab (click one of the buttons to show div with Datepicker,) the display:none seems to then work.
Here's what the bad div looks like:
and here's the Firebug panel:
I had the same problem and while some of the above solutions work, the easiest fix of all is to add this to your css:
#ui-datepicker-div {display: none;}
This basically hides the realigned datepicker element when it cannot be binded to an existing invisible element. You hide it, but it will be initialized again when you click on an element that needs to display the datepicker. Upon re-initialization, the datepicker element with id #ui-datepicker-div will have the correct position.
In my case, I use the session "$(document).ready(function(){" of JQuery in my favor.
As I have a JavaScript file that is loaded in all pages of my system, I just added the following line on it.
$('#ui-datepicker-div').css('display', 'none');
For me, it appears a clear and elegant solution because I did not have to change its library.
Best of all, it is working fine on all browsers. :)
The problem could be that you're binding the datepicker to something that is not visible, that would explain the odd positioning (trying to offset from something that doesn't exist will degenerate to offsetting from (0,0)). The datepicker <div> should have at least a table inside it so maybe the datepicker is getting confused and throwing an exception before it finishes initializing itself. When you click on one of the bound inputs, it is probably initializing itself again (or at least properly finishing the initialization) and everything works fine after that.
Try binding the datepicker when the date input becomes visible:
Remove the $(".date_picker").datepicker({ disabled: false });
Add an id="cater" to <input type="text" name="cater"/>
Call $('#cater').datepicker(); when the "reserve event room" button is pressed.
If that works then you'd have to add similar hacks for other datepickers. If it doesn't work then I'm probably wrong. If my guess turns out to be right then you might want to report a bug to the jQuery-UI people.
BTW, in Safari I can only see the first two tabs, I had to switch to Firefox to see the "catering" tab. Oddly enough it works just fine in Chrome. This is probably unrelated but I thought I'd let you know anyway.
The problem is down to the element the datepicker is being binded to not yet being available.
The solution I found was to initalize the datepicker when the actual element has been clicked and then showing it straight after initalization. This ensures the element is available before the datepicker has been binded to it and initalized.
$(function() {
$(".date_input").click(function() {
$(this).datepicker();
$(this).datepicker("show");
});
});
....
<input type="text" class='date_input' />
I had a similar problem in Chrome and I solved it editing jquery-ui1.7.2.custom.css
from:
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
to:
.ui-helper-hidden-accessible { position: absolute; left: -9999999px; }
There's probably too many nines for Chrome.
Try moving the last block to the bottom of the page (right before you close the body tag). You can read more about why you want to do this here:
http://webdevel.blogspot.com/2008/09/place-javascript-code-at-bottom-of-page.html
BTW: Cool idea for a menu. I like it.
Sometimes it has to do with the z-index of another item on the page being higher. Setting the z-index to a very high number solved my issue.
#ui-datepicker-div {z-index:11111;}