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

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -