I'm using ngx-bootstrap for datepicker. But when I use this datepicker inside modal, It opens under modal.
My issue is similar to this . But css changes are not working for me. Any help whould be appreciated.
I think You need to change the parent class style .
this will work for ngx-bootstrap calendar
follow this code
bs-datepicker-container, bs-daterangepicker-container { z-index: 2000; }
You are probaly using the wrong class if you follow that answer.
I took a look at the github code and saw that the class name used there is bs-calendar-container.
You might want to verify that this is the case for your wrongly z-indexed elements by inspecting them in your developer tools(F12) and verifying the class name on them.
Then you might want to change the z-index to have them appear above the modal.
The problem is caused by the modal being a direct child of the body element, and the datepicker date chooser also being a direct child of the body element, so they are competing for the same z-index space.
The bootstrap modals usually have an z-index of 1000. So setting the z-index of your datepicker item to 1200 should help, to make sure they also appear above elements that are present within the modal.
In case your datepicker has the class bs-calendar-container your CSS would look like this:
.bs-calendar-container {
z-index: 1001;
}
Related
I have site with fixed header in angular material with z-index of 1100.
While i have some mat-menu in my site which overlap the header with z-index:1200 and had class cdk-overlay-container (angular materiel class) which is default behavior.
To override this i just decrease the cdk-overlay-container z-index to 1000 so that it go behind the fixed header and all things ok to me.
Problem
But when i open my material dialog which uses same cdk-overlay-container and same z-index it shows my fixed header above that overlay because of its high z-index, So any idea how to achieve the above scenario by adding different class to cdk-overlay-container so that my mat-menu goes behind the fixed header but my mat-dialog above all content.
Screen shoots
Normal scenario
https://www.screencast.com/t/XhB2szH3gZe
Problem scenario
https://www.screencast.com/t/fYrMYFEOd
I have one solution by type-script(that when dialog show lower the z-index of header) but i need some pure CSS solution.
Thanks!
I had similar issue with the full-screen CDK overlay container and the material dialog that should come above anything. The issue is, that if you use provided material elements like Dialog, Tooltip, Menu, they all work with overlay CDK. Then, on top, you may have your custom Overlay service that utilizes CDK. In my case, two cdk-container-overlay divs were created. z-index is 1000 by default and the latest instance overlap's when both overlays are required at the same time.
Some will yell that it is not Angular way, but in my case, I ended up adding a backdropClass to the config of the material dialog. Then, I simply select dialog backdrop's parentNode and manually add z-index on demand.
public openFeedbackDialog(): void {
this.dialog.open(FeedbackFormComponent, {
width: '450px',
maxHeight: '450px',
minHeight: '200px',
backdropClass: 'feedbackBackdrop',
hasBackdrop: true
})
window.document.querySelector<any>('.feedbackBackdrop').parentNode.style.zIndex = "1001"
}
I figured it out my self
Just override the z-index of cdk-overlay-container
In your style.scss
.cdk-overlay-container{
z-index:999; //lower then fixed header z-index so it goes behind it
}
and in your component dialog.scss
.cdk-overlay-container{
z-index:2000 !important; //higher then fixed header z-index so it comes above
}
Cheers!
You can solve the issue by using custom OverlayContainer class. You can find example with implementation here.
Materialize's Datepicke rmakes use of modal (popup).
http://materializecss.com/forms.html#date-picker
Is there a way to use Materialize's Datepicker, without the modal (popup), like embed it to the webpage instead? If possible how can I achieve that?
You can probably do couple of things, such as:
1) Set the container to match the element you want datepicker to be embedded into. Materialize Datepicker has that option. See the docs.
2) Override .modal-overlay class and set its display property to none
3) Override .modal class by setting its position to relative and margin to 0
4) Override .datepicker class by setting visibility to hidden and position to fixed in order to hide the input element
The rest is up to you. But it's all about playing with CSS
EDIT: Also you will probably need to make sure that Datepicker is always open
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.
When I have a menu item which contains a submenu, this submenu is shown inside the menu's div, screwing the css (hover over the Services tab):
http://jsfiddle.net/jYXnE/2/
There this part of the JS (that everyone seems to use) which bothers me when initializing the menubar plugin:
position: {
within: $('#frame').add(window).first()
}
Since there is no frame id anywhere in the official examples, I guess it creates a div on-the-fly?
I compared my code to some other menubar jsFiddle and I can't find the issue to it, any help would be highled appreciated.
It seems like I had forgotten to link menubar's CSS. Everything is fine now.
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;}