[Resolved] Date selector obscured by header on mobile devices

[Author]

Posts

[davidZ-4]

I am trying to: select a date for a custom field on a mobile device (iphone 6 and Windows phone)

Link to a page where the issue can be seen: hidden link

I expected to see: the date selector to render properly and show the year and month sectors

Instead, I got: only days calendar view. see enclosed image

repro steps:
on a mobile device (smartphone)
go to hidden link
use the following:
User - test
Password - test!!1122@@
go to hidden link
select the date picker

Thanks,

David

[Nigel]

Hi David

I looked on my phone and saw the issue (odd that it displays differently on a real device than in a mobile simulator in the desktop browser).

Two observations.

The first is that if the date field were further down the page I'm not sure it would be an issue.

In any case the cause of the issue is that the header has a very high z-index value which means it appears on top of the datepicker UI, obscuring the top part of it.

See the screenshot.

Such a high z-index seems superfluous to me and if you overwrite it to set the z-index back to a low number like 1 then I think it will solve the problem. You could actually lower it to 9999 and I think it should still work.

If you do notice any unexpected side-effects then let me know.

[davidZ-4]

Hi Nigel,
thanks for the quick response.
i have to put the date picker at the top of the page as its act as a condition to display other things on the page below.
here is how the date picker z-index is currently defined (using F12).

<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div" style="left: 435px; top: 325.27px; display: block; position: absolute; z-index: 1;">

I couldn't find any z-index on the header. I search the page for the "z-index" and found only the following:
instead i found this on the page

<style>
...
		.toolset-google-map-preview .toolset-google-map-preview-reload {
			display: none;
			overflow: hidden;
			position: absolute; 
			top: 0px; 
			left: 0px; 
			right: 0px; 
			bottom: 0px; 
			text-align: center;
			background-color: #ccc;
			background-image: url(//stage.equiblocks.com/wp-content/plugins/toolset-maps/resources/images/powered-by-google-on-toolset-reload.png);
			background-position: 50% 40%;
			background-repeat: no-repeat;
			z-index: 1000;
		}
		.toolset-google-map-preview .toolset-google-map-preview-reload a {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			cursor: pointer;
			margin-left: -999999px;
		}
		/* Autocomplete inside dialogs z-index fix */
		.pac-container {
			z-index: 100150;
		}
....
		</style>

I'm not sure how to change the z-index for the header and i rather not change the theme z-index.

as toolset set the z-index of the date picker to 1 i think i this should be increased to solve the problem. the questions is how do i set it it up in my css to override the current z-index set by toolset?

any thoughts?

David

[Nigel]

You should be able to add the following style rule which you need to ensure is enqueued late so that it overrides the declared z-index:

.ui-datepicker.ui-widget-content {
    z-index: 100000 !important;
}

Such a high number is required to override the extremely high z-index for the header set by the theme.

[davidZ-4]

Hi Nigel,
it didn't work.

i tried even a higher number with no success

.ui-datepicker.ui-widget-content {
    z-index: 9999999 !important;
}

any thoughts?

David

[Nigel]

I don't know where you are trying to add it but it is not picked up by your page. See screenshot.

[davidZ-4]

Hi Nigel,

i tried in a few locations
1. a custom css plugin for the site
2. the theme additional css option
the above didn't work.

the only place that it actually worked is in the toolset user form css option.
after updating the css there it worked however when i cheek the page using F12 i still see the z-index=1
not sure why.

Thanks for your help.

David