I am using slick grid with Bootstrap . I have a slick grid in my page and onclik of a button of that page one Bootstrap pop up will open thenin that popup I have to choose a date to insert in that cell. My calendar is coming but in behind the popup.
What should I do.
Please add the follwing code in your page to solve the issue
here ui-datepicker-div is a id so hash symbol need to prefix
ui-datepicker-div
{ z-index: 99999 !important; /* must be > than popup editor (950) */ }
Related
I have integrated DataTables into an ASP.NET site. Everything is working as expected, except the paging buttons.
The paging buttons are rendered but nothing happens when they are clicked. There is also no hover effect.
Changing page size works, and the paging buttons are re-rendered correctly for the new page size. I can't see any JS errors.
The DataTables version is 1.10.20 (no additional plugins). Also used are Bootstrap 4.3.1, jQuery 3.2.1 & jQuery SlimMenu.
To see the issue click here. This is a static HTML equivalent of a page rendered by ASP.NET ... I can't do anything about the table being in a form, the wierd IDs ... that is done by ASP.NET.
What am I missing?
Got the answer courtesy of Allan at datatables.net.
The pointer-events: none in the following CSS was killing the click on those buttons:
a:not([href]) {
color: #333;
pointer-events: none;
cursor: default;
}
The paging buttons have no href attribute so are being targeted by that rule. pointer-events: none prevents all click, state and cursor options on the specified HTML element, i.e. the click and mouse-over.
anyone know how to resize and hide overflow-y in Materialize Datepicker. I am using ASP with MVC 4.0. Looks like is getting parent div settings.
Thanks
Edit: I moved datepicker input outside of any div in the view without success, i am trying to find the month days container class to do tests.
Well, problem here was a styled tbody used in a custom css, the days container is in a tbody.
PD: I used mozilla firefox to debug webpage elements.
This question is similar to this one but I still cannot come up with a suitable solution.
On my site I am trying to implement the dojo Tooltip (not dialog Box as in the link above; click here to see Tooltip documentation). I would like to be able to change the zIndex of the Tooltip to whatever I need. I can only seem to get Dojo to work if I use a CDN such as http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js or //cdnjs.cloudflare.com/ajax/libs/dojo/1.9.3/dojo.js, so trying to alter the javascript of the tooltip file for Tooltip.js did not seem to do anything. Note: Tooltip.js was included locally as:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
<script src="dojo/Tooltip.js"></script>
Using info from the link at the top of the page, I was able to come up with a hack solution. Assuming the default z-index for the Dojo tooltip is 1000, I changed the z-indices of all other divs (that were previously > 1000) to z-index < 1000. This solved the problem, and now the Dojo tooltip can be seen in front of these divs (previously was behind).
Any suggestions on how to alter the zIndex property of the Dojo tooltip without altering Tooltip.js?
I would recommend to override css rule according to your requirement.
Like by default css rule on dijit tooltip is as follow:
.dijitTooltip {
position: absolute;
z-index: 2000; // You can write your desired z-index
display: block;
left: 0;
top: -10000px;
overflow: visible;
}
Or you can try via JS
dojo.query(".dijitTooltip:visible").style("z-index", 'You desired value'); // <1.6
//>1.7
require(["dojo/query","dojo/dom-style"],function(query, domStyle){
domStyle(query(".dijitTooltip:visible"), "z-index", "You desired value");
});
Not sure if I fully understand your problem. But maybe this will help in changing the z-index of a dojo object programmatically using javascript:
dijit.byId('<Dojo ID of Tooltip>').attr("style","z-index:999");
I would also stay away from altering Tooltip.js.
For dojo 1.10 you could use dom-attr to set/change the style.
The code above will then look like that:
domAttr.set("mywidgetId","style","z-index:999");
Regards, Miriam
I would recommend using dojo/dom-style for this.
domStyle.set(tooltip.domNode, "zIndex", "999");
Do notice that FireFox will not accept "z-index" as a valid css property name, see http://www.w3schools.com/jsref/dom_obj_style.asp. Always camelcase the css property name.
Hi I am using twitter bootstrap for my website. I have put dropdown in collpsable which is in modal window. My problem is the dropdow I have put in collaspable inner, it cutoff the menu. Here is that Image
It should show like this :
I have tried by changing the z-index attribute but unable to show it. Can anybody know what is the problem?
I beleive the css it is using is the .dropdown-menu class whose position is set to absolute. If you change the position to relative it will give you the behavior you desire.
So you could isolate this change in your own .css file so you don't touch the main bootstrap.css file so its easier to update without breaking your styles.
So perhaps something in a custom.css:
.dropdown-menu {
position: relative;
}
Have implemented the Sitecore (6.5 rev.120427) calendar module (2.4.0 rev.110602) on our staff intranet.
Everything works great except for when switching from 'Day' or 'Month' view to 'Week' view in IE (All other browsers work fine). When trying to switch to 'Week' view, the calender section that should show times and events doesn't appear at all.
When I go directly to a page featuring a 'Week' view it will display, but as soon as I click the 'switch to week view' button, the section will disappear.
Anyone experienced similar issues?
I was able to reproduce this in IE7 and IE9 in "Comparability View". It would appear that a height of 0px is being applied to the week view - probably as an attempt to apply HasLayout to the element for IE6 compatibility.
My recommendation would be to contact Sitecore Support and let them know about this. I sounds like a easy fix that they can supply a fix for.
In the meantime, you can override the height setting with the following CSS rule:
<style type="text/css">
table.weekGrid tr > td > div { height: auto !important; /* use a fixed height in px if you need to preserve scrolling */ }
</style>