We are using "Date Picker" for the "Display As" attribute of a column on a tabular form. When the page is rendered, this results in a div node with an id attribute of
ui-datepicker-div. However, we also have the "Version" specified in the Application properties which results in the string's being displayed on all pages.
The issue is that when someone clicks the control to popup the calendar, this div gets a z-index attribute of 1 which causes it to appear behind the "Version," i.e. the "Version" text appears across the calendar control.
I have tried adding this to the "Execute when Page Loads" section:
$('div#ui-datepicker-div').css('z-index', '2');
This "works" in that it does set the z-index to 2 (and with a value of 2 (manually adjusting the dom to test), it is properly displayed , i.e. on top). However, when the calendar is displayed, the z-index always gets reset to 1.
How can I inject the above, new z-index setting so that it is adjusted whenever the calendar popup is displayed (or alternately change this in the templates somehow)?
Thanks,
-Joe