How to adjust position of a div relative to a div above it upon height change?

user1063287

I am using selectize.js in multiple input fields in a form.

When adding tags, the input field grows in height accordingly.

The container below however is not adjusting its vertical position accordingly.

In the official demo, the desired behaviour is occuring, which can be seen by going to:

http://brianreavis.github.io/selectize.js/

And then scrolling down and clicking Plugins, and scrolling to the drag_drop demo.

In my implementation however it is not:

jsFiddle

http://jsfiddle.net/rwone/q84VX/4/

I have tried making the containing div, .field-row, relative but that doesn't seem to have an 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;
}
user1063287

For some reason, my implementation differed from the default at:

https://github.com/brianreavis/selectize.js/blob/master/dist/css/selectize.default.css#L126

and was:

.selectize-control {
    position: absolute;
}

Switching this to position:relative, solved the problem.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to adjust position of a div relative to a div above it upon height change?

From Dev

Detect height change and adjust position of a div?

From Dev

Full height to div with relative position

From Dev

how can I move div with position:relative above div with position:absolute?

From Dev

How to dynamically adjust DIV height?

From Dev

Scale and position div relative to image with 100% height

From Dev

Dynamic height for a child div when the position is relative

From Dev

Position a fixed div above a relative div/h1

From Dev

Position a fixed div above a relative div/h1

From Dev

How do I make a div height or position adapt to its content's relative position

From Dev

How can I change the width/height of a div without changing position?

From Dev

Auto adjust Height of the div

From Dev

How to adjust div on depending on screen height

From Dev

How to adjust div on depending on screen height

From Dev

How to deal with DIV position and height

From Dev

How to deal with DIV position and height

From Dev

How to center absolute div (text) above relative div (image) responsively?

From Dev

Relative div height

From Dev

Relative DIV width and height

From Dev

Height of div increase with relative div

From Dev

How to apply clipPath to a div with the clipPath position being relative to the div position

From Dev

How to align to the center a div with position absolute within a div with position relative?

From Dev

How do I position a div relative to a fixed position div?

From Dev

CSS min-height of div that has position:relative

From Dev

How to auto adjust DIV height according to next sibling height?

From Dev

Div not visible if position: relative

From Dev

How can I position a div relative to an image?

From Dev

how to make the position of this div relative to the main container

From Dev

How can I position a div relative to an image?

Related Related

  1. 1

    How to adjust position of a div relative to a div above it upon height change?

  2. 2

    Detect height change and adjust position of a div?

  3. 3

    Full height to div with relative position

  4. 4

    how can I move div with position:relative above div with position:absolute?

  5. 5

    How to dynamically adjust DIV height?

  6. 6

    Scale and position div relative to image with 100% height

  7. 7

    Dynamic height for a child div when the position is relative

  8. 8

    Position a fixed div above a relative div/h1

  9. 9

    Position a fixed div above a relative div/h1

  10. 10

    How do I make a div height or position adapt to its content's relative position

  11. 11

    How can I change the width/height of a div without changing position?

  12. 12

    Auto adjust Height of the div

  13. 13

    How to adjust div on depending on screen height

  14. 14

    How to adjust div on depending on screen height

  15. 15

    How to deal with DIV position and height

  16. 16

    How to deal with DIV position and height

  17. 17

    How to center absolute div (text) above relative div (image) responsively?

  18. 18

    Relative div height

  19. 19

    Relative DIV width and height

  20. 20

    Height of div increase with relative div

  21. 21

    How to apply clipPath to a div with the clipPath position being relative to the div position

  22. 22

    How to align to the center a div with position absolute within a div with position relative?

  23. 23

    How do I position a div relative to a fixed position div?

  24. 24

    CSS min-height of div that has position:relative

  25. 25

    How to auto adjust DIV height according to next sibling height?

  26. 26

    Div not visible if position: relative

  27. 27

    How can I position a div relative to an image?

  28. 28

    how to make the position of this div relative to the main container

  29. 29

    How can I position a div relative to an image?

HotTag

Archive