Mobiscroll datepicker is hidden by jQuery Mobile modal - javascript

I have a jQuery Mobile site with some date inputs, I am using the Mobiscroll datepicker (in modal mode) for these. It works well on standard jQM pages, but it has a problem when I have a date input that is on a jQM modal.
The problem is the datepicker modal shows under the jQM modal and so the user can't see it, I want the datepicker to show over the top of the jQM modal. If I hide the jQM modal using Firebug, I can also see that the datepicker is under the jQM "dark" filter - where it makes everything dark except the jQM modal.
The code I'm using to setup the Mobiscroll datepicker is:
$('#mydate').scroller('destroy').scroller($.extend(
{
preset : 'date',
dateFormat: 'dd/mm/yyyy'
},
{
display: 'modal',
mode: 'scroller',
theme: 'default',
lang: 'en'
}));
I have tried modifying the elements in Firebug to see if some CSS would fix it, I tried setting the datepicker to a high z-index and the jQM modal to a lower z-index, also tried forcing it with !important but this didn't change anything. The other Mobiscroll display options: top, bottom, bubble have the same problem.
How can I get the datepicker to display on top of the jQM modal?
jQM version: 1.2.0 (latest), with jQuery 1.8.2
Mobiscroll version: 2.4.4 (latest)

Try this:
.dw-persp, .dwo {z-index:1051;}
.dw {z-index:1051;}
You'd better put it in the last css

I happened to have the same issue and here it my fix:
Check the css of the modal(the default z-index for jquery mobile modal is 1050).
Then go to mobicroller css and change the z-index to any value above it. As long as mobiscroller has a hinger z-index it should show on top modal without any problem.

Related

Materialize CSS Datepicker is not working properly

Every Javascript's Materialize CSS Componenet is working fine except my datepicker, it does not show datepicker properly, different with the documentation. Here is my datepicker :
How to fix this?

Jquery ui dialog buttons not working with bootstrap

I'm using jquery 1.11.3 with jquery-ui 1.11.4 and with bootstrap 3.3.5 .
All works fine except for standard close minibutton on the jquery ui dialog upper left corner. The symbol "X" doesn't show on the button, nonetheless it works in closing the dialog. Examining the markup created for the dialog, it really lacks the part that show the "X" icon.
The dialog is very simple:
$('#info').dialog({ autoOpen: true,
width: 700,
title: 'User Info',
position: { my: "center middle", at: "center middle", of: document.body} }
);
I'm aware of the compatibility issues between jquery-ui and bootstrap, due to name collision on button and tooltip plugins.
So I applied the workaround suggested in https://stackoverflow.com/a/27745464/1233379 but whereas it prevent some javascript error, it not seems to restore full functionality of dialog.
Commenting out bootstrap javascript include tag, jquery-ui works as expected.
Some advice?
Here's the fiddle: https://jsfiddle.net/43hrvy26/
You can change the order of the JS/CSS inclusion
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css
Refer https://jsfiddle.net/ZigmaEmpire/43hrvy26/2/
As jquery-ui.css comes last the CSS in that file will override any corresponding conflicting CSS in bootstrap, so now you can take advantage of jquery UI CSS instead of bootstrap CSS definitions if any

jQuery easy tabs plugin without transition

At the moment I am using jQuery easy tabs for some tabs I have created on my site.
how can I disable the default animated transition between each tab
set in configuration animate to false
$("#tab-full-container").easytabs({
animate: false
});

JQueryUI Datepicker in my asp.net mvc View

I have this code in my view.
$("#Effective Date").datepicker({
showOn: "button",
buttonText: "..."
});
I am able to see the the date and I can select the date. But when I open the datepicker Iam not seeing the Arrows on the popup box. << < March 2012 > >>
can anybody please help me out
It must be something to do with the CSS you're using.
Here is a jsFiddle.
http://jsfiddle.net/C9rCT/
It uses jQuery 1.7, jQuery UI and links to the jQuery UI CSS file from Google (http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css)
Make sure you also have the CSS and images from the jQuery you downloaded.
These 'arrows' are backround image. Check the css.

jQuery UI Slider not shown for some reason

I use jQuery UI 1.8.16 incl. the "smoothness" theme on a text input field. In FF FireBug, I can see all necessary dependencies for the slider appear:
jQuery 1.7.1
UI Core
UI Widget
UI Mouse
The theme is also loaded and all sources are checked. When inspecting the form field, the slider seems to be attached. But for some reason the slider doesn't appear as "slider".
Screenshot including FireBug
make sure the slider css is there. That would be the only thing i can think of. Maybe you didn't check the slider option when downloading the theme.
Edit: Moved from the comments. Some will work because there is ui-widget. So sometimes thats all it uses. For certain ones it has it's own, like slider.

Categories

Resources