I have a jQuery datepicker that when visible has buttons that overlap some input buttons. When I go to click on the datepicker, the popup disappears and the input button is selected -- rendering the datepicker pretty unusable.
Is there a way to keep the jQuery overlay in the foreground and have it take precedence over the buttons behind it?
It's hard to tell without any code posted, but I've used the jQuery UI Datepicker successfully in my code, and it always seems to be on top. Are the elements all within the same container? How are you initializing the Datepicker? What theme are you using?
You could try just setting the z-index of the Datepicker in CSS like so:
#date-picker{ z-index: 1; }
Keep making the z-index higher until the Datepicker wins in the overlaying battle.
If you continue see the issue, try recreating it on JSFiddle.net and letting us help you out there.
z-index also depends on the container in which the element is.
If you genuinely think it's a behaviour bug in your target browser (ie. it SHOULD work the way you've written it, but it just isn't), you can compensate for it by targeting the 'hidden' input button and preventing default on its behaviour. This strikes me as a hack, and I can't see why datepicker won't work by default or with alexdlaird's suggestion but sometimes we have to hack to fix usability bugs!
$('.myInput').click(function() {
return false;
});
where .myInput is not literal but rather any other selector that targets your input.