css - How to adjust position of a div relative to a div above it upon height change? -
i using selectize.js in multiple input fields in form.
when adding tags, input field grows in height accordingly.
the container below not adjusting vertical position accordingly.
in official demo, desired behaviour occuring, can seen going to:
http://brianreavis.github.io/selectize.js/
and scrolling down , clicking plugins
, , scrolling drag_drop
demo.
in implementation not:
jsfiddle
http://jsfiddle.net/rwone/q84vx/4/
i have tried making containing div, .field-row
, relative doesn't seem have effect.
html
<div class="my_form_page_content"> <form id="my_form_name" name="my_form_name"> <div class="my_form_container"> <div class="field-row" > <div class="my_form_left"> <p>field one</p> </div> <div class="my_form_right"> <div class="input_wrapper"> <input type="text" id="input-sortable-1" class="input-sortable demo-default" value="input 1 value, lala1, lala1a" /> </div> </div> </div> <div class="field-row" > <div class="my_form_left"> <p>field two</p> </div> <div class="my_form_right"> <div class="input_wrapper"> <input type="text" id="input-sortable-2" class="input-sortable demo-default" value="input 2 value, lala2, lala2a" /> </div> </div> </div> <div class="my_form_button"> <button type="submit">submit</button> </div> </div> </form> </div>
css
.my_form_page_content { width: 300px } .my_form_container { width: 550px; margin-top:45px; margin-left:13px; background: #cccccc; } .my_form_left { width:105px; display: inline; float:left; background: yellow; } .my_form_left p { font-family:arial; font-size:10px; margin-top: 6px; margin-bottom:20px; color:#000000 !important } .my_form_right{ display:inline; float: left; } .my_form_right input { width: 186px; height: 25px; border: 2px solid #e4e4e4; border-radius: 6px; margin-bottom:12px; outline: none; color: #999999; padding-left:5px; } .my_form_button button { float:right; background: none repeat scroll 0 0 #333333; border: 2px solid #a8a8a8; border-radius: 6px; width: 195px; cursor: pointer; font-size: 15px; color: #ffffff; padding-top: 3px; padding-bottom: 1px; margin-top: 100px; position: absolute; } /* selectize css here */ .field-row { width:100%; height:auto; float:left; margin-bottom:10px; border:1px solid green; padding:10px; cursor: move; }
for reason, implementation differed default at:
https://github.com/brianreavis/selectize.js/blob/master/dist/css/selectize.default.css#l126
and was:
.selectize-control { position: absolute; }
switching position:relative
, solved problem.
Comments
Post a Comment