tdot tdot - 5 months ago 11
CSS Question

Dynamically Change the Height of a tr

I am creating a calendar that contains tasks/events. When I add more events to the table row, I expect the row to re-size automatically to fit the contents but it is not. Instead, the contents spill out of the row.

If I remove my "events-wrapper" div, I can fix this problem but I need to wrap my events in this div so I can position them in the row so they do not overlap the date as more is added.

Here is the code below.

HTML

<tr class="week">
<td><div class="date">20</div></td>
<td><div class="date">21</div></td>
<td><div class="date">22</div></td>
<td>
<div class="date">23</div>
<div class="events-wrapper">
<div class="event">
<span class="fa fa-check-square-o"></span>
<p class="event-name">Test Event</p>
</div>
<div class="event">
<span class="fa fa-check-square-o"></span>
<p class="event-name">Test Event</p>
</div>
</div>
</td>
</tr>


CSS

.week td{
text-align: right;
position: relative;
font-size: 14px;
padding: 2px 5px;
width: 14.28%;
}
.week .date{
position: absolute;
top: 4px;
right: 5px;
}
.events-wrapper{
position:absolute;
top:20px;
}
.event{
width: 95%;
height: 20px;
border: 1px solid blue;
background-color: lightblue;
display: inline-block;
top: 5px;
position:relative;
margin-bottom: 5px;
padding-left: 5px;
text-align: left;
}

.event .event-name{
display:inline;
font-weight:bold;
}


Any suggestions on how to fix this?

Answer

If I got you. You used position absolute to you code so the elemnt don't get any size. your td item cant get size for 2 absolute divs within hi, so i cahnges the code and give you on fiddle:

https://jsfiddle.net/1tt63h85/

changes:

.event{
position: static;
}

.week .date{
  position: static;
}