CODEWITHSUNDEEP
htmlcssheight
Pepijn Gieles
Pepijn Gieles

Reputation: 727

Why is my LI tag not growing with it's child P tag?

I can't figure out why the li's height is not increasing when the P element does.. I tried all kinds of position and overflow on elements, but just don't see it.. Can anyone help me out? Thanks in advance!

For more code see this fiddle

HTML:

<div class='todo_list'>
        <div class='add_list'>&#43; List</div><br>
        <h3 contenteditable='true'>New List<span class='remove_list' contenteditable='false'></span></h3>
        <ul>
            <li>
                <input type='checkbox' class='task_status'>
                <p class='task' contenteditable='true'></p>
                <span class='drag'></span>
            </li>
        </ul>
        <div class='add_task'>&#43;</div><br>
    </div>

CSS:

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: Tahoma, sans-serif;
}

div.todo_list{
    max-width: 700px;
    margin: 0 auto;
}

ul li{
    overflow: hidden;
    border: 1px;
    border-style: solid;
    border-color: #ccc;
    border-top: none;
    position: relative;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    transition: opacity .3s;
}


p,
input[type=checkbox]{
    position: absolute;
    height: auto;
}


p{
    top: 0;
    right: 40px;
    left: 38px;
    padding: 12px;
    border-left: 1px solid #ccc;
}

Upvotes: 0

Views: 251

Answers (3)

Homungus
Homungus

Reputation: 1114

Problem is the position: absolute; for the p and input elements.

They go out of the natural page-flow so the height of the li element won't increase...

Upvotes: 2

The Alpha
The Alpha

Reputation: 146191

You have used:

ul li{
    overflow: hidden; // <-- this is the problem I guess
    ...
}

Also (Remove the p from this) :

p, input[type=checkbox] {
    position: absolute; // <-- this is a problem
    height: auto;
}

Example:

Upvotes: 1

kabanoid
kabanoid

Reputation: 106

p,
input[type=checkbox]{
    position: relative;
    height: auto;
}

should fix your problem.

Upvotes: 1

Related Questions