html - How to have select and textfields appear inline and scaling upon scaling the parent container? -

html - How to have select and textfields appear inline and scaling upon scaling the parent container? -

in fiddle show form devided 2 parts (horizontally). left part problematic one. there select element in line 2 textfields sharing available width percentally. i'd have give select , middle textfield defined percentual width , have right textfield take rest span right container border. layout must remain behaving upon scaling container. also, select element must remain readable. @ moment content getting partially hidden upon scaling.

i cannot figure proper formatting achive this.

here's code:

<style> .unseen { display: none } form { background: maroon; margin: 0; display: flex; } [class*="span5"] { background: olive } [class*="span7"] { background: pinkish } #salutation { width: 12%; min-width: 50px } #firstname { width: 30% } #lastname { width: 40% } </style> <div class="container" id="page"> <div class="row-fluid" id="page_content"> <section class="form row-fluid" id="page_content"> <div class="row-fluid"> <form class="form-horizontal form-validate"> <div class="span7"> <fieldset class="well-small"> <legend></legend> <div class="control-group"> <div class="control-label"> <label id="salutation-lbl" for="salutation">full name</label> <label id="firstname-lbl" for="firstname" class="unseen">first name</label> <label id="lastname-lbl" for="lastname" class="unseen">last name</label> </div> <div class="controls"> <select id="salutation" name="salutation" class="fullname salutation"> <option value="mr." selected>mr.</option> <option value="mrs.">mrs.</option> <option value="ms.">ms.</option> </select> <input type="text" name="firstname" id="firstname" value="max" placeholder="forename" /> <input type="text" name="lastname" id="lastname" value="mustermann" placeholder="surname" /> </div> </div> </fieldset> </div> <div class="span5"> <h2>other content</h2> </div> </form> </div> </section> </div> </div>

i have tried solve question in best possible way not wanted first part of question percentage widths won't work since bootstrap changing parent container's width. so, have written jquery function calculate desired width of these input text boxes , dynamically add together them respective css widths. function along other minor html/css tweaks prepare problem.

html - changed bootstrap form class form-horizontal form-inline improve suits requirements.

<form class="form-inline form-validate">

css

added fixed width of 65px keeps select element readable longest possible option. (mrs.) removed percentage widths #firstname , #lastname selectors we'll adding via jquery.

and added !important display property of unseen class (required when switching bootstrap form-inline class)

.unseen { display: none !important; } form { background: maroon; margin: 0; display: flex; } [class*="span5"] { background: olive; } [class*="span7"] { background: pink; } #salutation { width: 65px; }

jquery - here's jquery function trick. function calculates available width textboxes fit in default padding

function resizeformelements() { /* calculating available width 2 text boxes subtracting => main command container width - width of selector element - 4 * default_bootstrap_margin_of_3px between input elements (two input elements both left , right margins) - 4 * default_padding_of_6px of input text elements per bootstrap.min.css line 238 (two input elements both left , right padding) - 1 (to not affected truncated values) */ var avail = parsefloat($(".controls").width()) - parseint($("#salutation").css("width")) - 4 * 3 - 4 * 6 - 1; $("#firstname").css("width", avail / 2); $("#lastname").css("width", avail / 2); } $(window).on("resize load", function () { resizeformelements(); });

here's working fiddle of above solution.

html css forms inline