What is the best way to open the datepicker calendar upwards? The default is to open downwards. I have changed the margin to a negative value on datepicker-calendar-wrapper class and it works fine, but wondering if theres any other way to do this.
JSFiddle
.datepicker-calendar-open-up {
margin: -356px 0 0;
}
Add dropup class to datepicker wrapper.
<div class="datapicker dropup">
...
</div>
http://jsfiddle.net/nvrfat1y/1/
The datepicker is is built around bootstrap dropdowns control which includes a dropup variation.
http://getbootstrap.com/components/#btn-dropdowns-dropup
I am using custom dialog-box for confirmation message it will appear correctly but the back view of page is clickable/enable so user can click anywhere i want to disable that back view.
Just like native js alert, confirm box do.
Following is image of js alert box in which all back view is not accessible how do i achieve this thing when i am using my custom boxes.
Try this....
HTML:
<div id="alert-overlay-wrapper"></div>
CSS:
#alert-overlay {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
Add the html div in the html of the custom alert box as well add the css.
This work as the overlay for the body.
The one thing you have take care is that the "z-index" of the custom alert box must be greater than 1000 as overlay z-index is 1000.
You may try jQuery Alert or a similar plugin.
Logic: Create a div with lightbox like effect. The lightbox will cover the entire page.
The best example of your situation is bootstrap modals Bootstrap modal
Just see how twitter developers do it.
You can try :-
Twitter boot strap modol box : Modol Box
jQuery Fancybox : Fancybox
jquery Colorbox : Colorbox
I'm having some difficulty with the jQuery date picker control. In my application, I'm using the most basic method to invoke the calendar:
$('#elmt').datepicker();
The target element is an input text box on a pop-up div. Whenever I click into the textbox, the calendar shows up as see-through: http://s17.postimage.org/4knyxgvjz/see_thru_calendar.png
I've tried some suggestions already on Stackoverflow to adjust the z-index of the ui-datepicker class:
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; z-index: 9999 !important; }
But that hasn't made a difference either. My test environment is running Internet Explorer 7 (the calendar does render OK on the sample index.html provided by jQuery-UI).
Has anyone seen an issue like this with the jQuery UI datepicker?
You are not loading the relevant CSS for the jQuery UI datepicker, and that is causing the Calendar to be as "see-through".
To test it, edit the CSS file for the jQuery UI and change this class background:
.ui-widget-content {
background: #000;
}
If the datepicker gets a black background, the style sheet is being
loaded, but the path for the images might be wrong.
If no black background, the style sheet isn't being loaded.
Another method to confirm if the problem lies on the style sheet is to include the CSS directly from the jQuery CDN:
http://code.jquery.com/ui/1.8.20/themes/redmond/jquery-ui.css
Im trying out the datepicker of JQuery and the previews given in the site
http://jqueryui.com/demos/datepicker/#icon-trigger
has different size than the actual one i placed on my code.
I tried changing the font-size of the datepicker table
.ui-datepicker table {width: 100%; font-size: .6em; border-collapse: collapse; margin:0 0 .4em; }
since I could not find a font size setting of the Header (Month Year), the topmost part in between the previous and next arrow.
The fonts in the calendar and the daynames already became smaller
but the Month year font size remained the same. Its really dissapointing. ;(
.ui-datepicker select.ui-datepicker-month-year {font-size:.6em; width: 1%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 1%;}`
Please help.
Thanks,
tinks
I'd suggest creating a theme with the online "Theme Roller" rather than editing CSS manually. You can start from the existing theme that best matches your needs and tweak it to your liking. The benefits are:
You don't risk breaking CSS rules used for features or layout
The theme will be automatically reused by all other jQuery UI widgets
Additionally, the Theme Roller adds a link to the generated CSS (see the source code when you're done) so you can go back later and do further edits.
I'm currently implementing jQuery UI's autocomplete in my clients webshop. The problem is: the element the autocomplete resides in, has a higher z-index then the z-index of the autocomplete. I tried setting the autocomplete z-index manually, but I've got the feeling that jQuery UI is overwriting this.
In fact my question is a duplicate of autocomplete suggestion list wrong z-index, how can i change?, but since there was no answer I thought about giving it another try.
Any help is welcome!
Martijn
Use z-index and !important
.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}
While searching I found this topic (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Apparently the only way to change the style of the autocomplete box is by doing it through javascript:
open: function(){
$(this).autocomplete('widget').css('z-index', 100);
return false;
},
Change the z-index of the parent Div, the autocomplete menu will have the div's z-index+1
In the CSS of jQuery UI:
.ui-front { z-index: 9999; }
Try this, you can manipulate the z-index on runtime or initializing
$('#autocomplete').autocomplete({
open: function(){
setTimeout(function () {
$('.ui-autocomplete').css('z-index', 99999999999999);
}, 0);
}
});
If you are able to enforce a higher z-index upon the autocomplete text input then this is the solution to your problem.
jQuery UI Autocomplete options list calculates its z-index value by taking the z-index of the text input it's being attached to and adds 1 to that value.
So you can give a z-index of 999 to the text input the autocomplete will have a z-index value of 1000
Taken from http://bugs.jqueryui.com/ticket/5489
<input type="text" class="autocomplete" style="z-index:999;" name="foo">
open: function () {
$(this).autocomplete('widget').zIndex(10);
}
also have a look at where you are appending the item to.
i came across this problem when i appended the autocomplete to an inner div, but when i appended the autocomplete to the body tag, the problem went away.
If you are using jquery-ui dialogs be careful to initialize the dialogs BEFORE the autocomplete or the autocomplete will be shown under the dialog.
Look at this answer jquery UI autocomplete inside a modal ui dialog - suggestions not showing?
I was facing same issue, it has been resolved by adding bellow styles:
.ui-autocomplete {
position: absolute;
cursor: default;
z-index:30!important;
}
.modal-dialog {
pointer-events:auto !important;
}
Give it a try anyway in your css (before script loading), not in firebug:
.ui-selectmenu-menu {
z-index:100;
}
In my case this works and creates z-indexes like : 100x (for example 1002)
add the following
.ui-autocomplete
{
z-index:100 !important;
}
in jquery-custom-ui.css file (or the minified one if you are using it).
For those developers that still use this plugin. Try this:
.acResults
{
z-index:1;
}
For me was enough with z-index:1, set the value you need in your case.