i creating calendar contains tasks/events. when add more events table row, expect row re-size automatically fit contents not. instead, contents spill out of row.
if remove "events-wrapper" div, can fix problem need wrap events in div can position them in row not overlap date more added.
here 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 fix this?
if got you. used position absolute code elemnt don't size. td item cant size 2 absolute divs within hi, cahnges code , give on fiddle:
https://jsfiddle.net/1tt63h85/
changes:
.event{ position: static; } .week .date{ position: static; } 