html - Why is my LI tag not growing with it's child P tag? -
i can't figure out why li's height not increasing when p element does.. tried kinds of position , overflow on elements, don't see it.. can me out? in advance!
for more code see fiddle
html:
<div class='todo_list'> <div class='add_list'>+ 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'>+</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; }
problem position: absolute;
p
, input
elements.
they go out of natural page-flow height
of li
element won't increase...
Comments
Post a Comment