Div 'wrap' + <li>

[redmellow]

Hi to all!!

It's a newbie here!

I'm trying to create a list that any time I add (copying and pasting) a line like this: <li><input></li>, the <div class="wrap"> should become automatically longer (or higher as css element height:) for any line I add... Is this possible to do this in Html? Thanks!!

<div class="wrap">
  
  <ul>
    
    <li><input type="text" class="text"> </li>
    <li><input type="text" class="text"> </li>
    <li><input type="text" class="text"> </li>
    <li><input type="text" class="text"> </li>
    <li><input type="text" class="text"> </li>
    
  </ul>
  
</div>

 

[dsonesuk]

As long as you do not apply a fixed height: or width: it should it should adapt to new content.

[redmellow]

#wrap {

    position: absolute;
    margin: 100px 100px 100px 100px;
    width: 350px;
    height: 500px;

    background-color: rgba(0, 90, 150, 0.9);
    margin: 20px solid white;

}


li.DDList{

    display: block;
    list-style-type: none;

    margin-left: -40px;

}

That's what I wrote in .css...

[Funce]

1 hour ago, redmellow said:

height: 500px;

This is what we refer to as a fixed height. Is it necessary to include it in your css?

Edited March 1, 2019 by Funce

[redmellow]

Wow... never mind, it was so simple!! Thanks Funce!! 😋

[dsonesuk]

Unless this is overlapping other elements you would NEVER EVER use position: absolute; it does not adjust to content, so you would always have to adjust height or width.

The negative margin may also be because by default ul element have a default padding to the left to allow there original purpose to show bullet points or numbers, these can be removed by using padding: 0 and you also may need to zero the margins as well.

[redmellow]

This is my attempt... And I wish even the 'wrapper_2' and 'wrapper_3' become longer as the first wrap, but I don't know where to put them in the html file...

#wrap {

    position: absolute;
    margin: 18px 0 0 16px;
    width: 350px;


    background-color: rgba(0, 90, 150, 0.9);
    margin: 20px solid white;

}


li.DDList{

    display: block;
    list-style-type: none;

    margin-left: -40px;

}



.wrapper_2 {

    position: absolute;
    z-index: -2;
    margin-top: 88px;
    margin-left: 90px;
    width: 380px;
  height: 530px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.49);
    background-color: white;
    border: black;

}

.wrapper_3 {

    position: absolute;
    z-index: -4;
    margin-top: 94px;
    margin-left: 95px;
    width: 380px;
  height: 530px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.49);
    background-color: white;
    border: black;

}

      <li class="DDList">
                                  <div>
                                      <input class="incarico" name="incarico" placeholder="New Daily Task">

                                 </div>
                            </li>

                                        <li class="DDList">


                                                  <div>
                                                       <input class="incarico" name="incarico" placeholder="New Daily Task">
                                                  </div>

                                        </li>

                                        <li class="DDList">
                                                <div>
                                                    <input class="incarico" name="incarico" placeholder="New Daily Task">

                                               </div>
                                          </li>

                </ul>
/*END WRAP 1*/
</div>
          <div class="wrapper_2"></div>
          <div class="wrapper_3"> </div>
        <script src="jquery-3.3.1.min.js"></script>
        <script src="js/onclickEvent.js"></script>


    </body>

 

[redmellow]

SOLVED IT! with :pseudo elements! Thanks you guys!!!