Dynamically Change the Height of a tr - html

Question

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 1

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;
}

Answer 2

Welcome to StackOverflow!
The Main Deal: Don't do this.
There's quite a few foundational issues with what is going on here. Right off the bat, I'd strongly recommend having something that can easily have data written in with ease. Editing markup will be a terrible way of adding data to the calendar, and many unexpected/undesirable results may occur.
At any rate, I was compelled to spend a couple minutes and crack out something that I think would show you what you're trying to work towards. I made two examples for you: a simple calendar that has the dates running vertically (my assumption for what your goal was from the example) and another, much more robust calendar (Guy Ytzhak previously answered and assumed you were looking to have the dates run horizontally across the screen)
Neither calendar is complete in any way; they are simply working examples (that I've styled horribly) to show you how I'd structure such a frail system, if I was forced to go about it the way you currently are.
http://codepen.io/anon/pen/ZObOaR - Simple Vertical Date Example
http://codepen.io/anon/pen/oLjLoK - Robust Horizontal Date Example
Some Problems
Your original issue for layout and placement really came from the structure of your table. Your attempts at corrective styling have also further muddled up the issue:
<tr class="week"> <!-- This is a row -->
<td><div class="date">20</div></td> <!-- (1st 'td') First Item in the row -->
<td><div class="date">21</div></td> <!-- (2nd 'td') Sits to the right of the 1st 'td'-->
<td><div class="date">22</div></td> <!-- (3rd 'td') Sits to the right of the 2nd 'td' -->
<td> <!-- (4th 'td') Sits to the right of the 3rd item -->
<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> <!-- (Still the 4th 'td') Sits to the right of the 3rd item -->
The core table structural issue is shown above. (Assuming no additional code affects the placement & layout beyond what you've provided)
What's Supposed To Happen:
The way a table works (in a very crude & basic sense with a focus on <table>, <tr>, and <td> without worrying about the other pieces) is that it:
Establishes a... well, a table. (<table> tag) - Think of this like a containing box.
Establishes a row (<tr> tag) within said table.
Establishes any number of table cells (<td> tag) within said row.
Repeat steps 2 and 3 until no more <tr> and <td> tags are left
That's how it's supposed to work (mostly). Your code, however, attempts to force a row (<tr>) tag to display its contained cells (<td>) tags in a column, not a row, and I've seen you've tried to do this through absolute positioning. Not a good thing to do.
Some More Problems
Additionally, if you were to throw this into a codepen and inspect it (right click the the table you've created and click inspect), you'll find that the <td> tags and <tr> tags have been stripped away in the rendered result, which is why your below styling does not get applied:
.week td{
text-align: right;
position: relative;
font-size: 14px;
padding: 2px 5px;
width: 14.28%;
}
If you're confused and would like to verify this, feel free to click the following link. I've taken the liberty of throwing your original code into this codepen:
http://codepen.io/anon/pen/WxQXZO
Even More Problems (30% bonus issues completely FREE!)
Your table tags being stripped (along with everything I've said previously) aren't the only core issue. In fact, you'll find that it still has plenty of issues if you were to throw the entirety of your HTML into a set of table tags so it looks like the below code block:
<table>
<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>
</table>
This is why I've decided to make you two completely new examples. However, they're also very issue-riddled. I probably could have done them a bit better, but I'm doing this purely for example purposes.
The point is:
Could you make a calendar like this? Yes. You could probably make it work pretty well if you worked at it. With that said, I feel that HTML and CSS alone aren't fit to provide this solution with any form of reliability, especially if you want this thing to be interactive on the web. You'd need to take advantage of some javascript libraries, like jQuery, give you the functionality you need. Even then, however, maintaining this thing with new events, dates, etc. would be a total pain and take a lot of time for each edit.
Calendars are meant to quickly and easily provide a visual display of schedule data that can be changed/updated on the fly with ease. This does not do any of that.... and we're not even discussing browser support/device compatibility yet.
My Recommendation:
Grab a CMS (if you don't already use one) like Wordpress or Drupal and develop on there. You can easily download a plethora of beautiful calendars that work wonderfully (and some that don't work so well). A CMS would save you time, frustration, and you'll be able to create something better in the end.
Hope this helps and welcome to StackOverflow! :)