javascript - jQuery Datepicker has lower priority than other controls on form -

javascript - jQuery Datepicker has lower priority than other controls on form -

if @ screenshot above, calendar floats above submit button. however, when effort click of days in top row, registers submit button beingness pressed.

here html:

<div data-role="content"> <div class="ui-content"> <form method="post" onsubmit="return submitform()" id="myform" data-ajax="false"> <input type="text" name="transaction_date" class="date-input" data-inline="false" data-role="date" readonly="true"> <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain" align="center"> <input type="radio" name="transaction_type" id="radio-choice-1" value=0> <label for="radio-choice-1">expense</label> <input type="radio" name="transaction_type" id="radio-choice-2" value=1> <label for="radio-choice-2">income</label> </fieldset> <input type="submit" value="submit"> </form> </div> </div>

how can prepare press on calendar has priority?

according css of jquery mobile, ui-btn input, ui-btn button has z-index:2 , ui-datepicker-div has z-index:1 when appears, causing problem.

adjusting z-index of submit button fixed me.

jsfiddle

alternatively, adjust ui-datepicker-div z-index bit higher, because phone call beingness abstracted away you, have rummage around ui core find out adjustment beingness made.

javascript jquery html jquery-mobile cordova