Link to home
Start Free TrialLog in
Avatar of greglwhite
greglwhite

asked on

Responsive input form, one label, two input fields

I have an multipage input form asking some medical questions, we have a responsive design.  I want to collect blood pressure information,

I have a <div><label>text</label><input for systolic><input for diastolic></div>

It looks fine on desktop and tablet, but not so good on phone.  
User generated image
phone version:
User generated image
Here is the actual code

<div class="ui-field-contain">
	<label class="p-text" for="bp_sys">$lang{common_question12}{$current_language}</label>
	<input placeholder="$lang{systolic}{$current_language}" type="number" name="bp_sys" id="bp_sys"   />
	<input title="$lang{diastolic}{$current_language}" placeholder="$lang{diastolic}{$current_language}" type="number" name="bp_dias" id="bp_dias"   />
</div>

Open in new window


Can anyone help me get a little better formatting on the phone side (just want the two fields stacked).  Our CSS skill is limited.
Avatar of bigeven2002
bigeven2002
Flag of United States of America image

Hello,
Everything in the code is controlled by the frameworks.  Which frameworks are you using?  I assume it is bootstrap and jquery.  If so, which versions?  Are there any other frameworks involved?
Avatar of greglwhite
greglwhite

ASKER

jquery and jquerymobile
ASKER CERTIFIED SOLUTION
Avatar of bigeven2002
bigeven2002
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ok, that didn't work.  I went back to my original code and using IE Developer tools, have discovered that jquerymobile is adding an inline style to the div that it creates

<input title="$lang{diastolic}{$current_language}" placeholder="$lang{diastolic}{$current_language}" type="number" name="bp_dias" id="bp_dias"   />

Open in new window


BUT if I change the name & id to bp_dias1 it works perfectly!!!
Ok great!  Glad you got it working.