I currently have a calendar on the left and a side bar on the right:
The issue I am facing is that the cases are overflowing. Ideally, I want to display a scrollbar when the content exceeds the height of its parent container.
These elements are contained within Bootstrap accordions.
Below is the HTML code:
<div id="cal-container">
<div id="cal-side">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle project-header" data-toggle="collapse" data-parent="#accordion2" href="#project-list">Projects
</a>
</div>
<div id="project-list" class="accordion-body collapse">
<div class="accordion-inner">
<div class="event-container project-container">
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle task-header" data-toggle="collapse" data-parent="#accordion2" href="#task-list">Tasks
</a>
</div>
<div id="task-list" class="accordion-body collapse">
<div class="accordion-inner">
<div class="event-container task-container">
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle case-header" data-toggle="collapse" data-parent="#accordion2" href="#case-list">Cases
</a>
</div>
<div id="case-list" class="accordion-body collapse">
<div class="accordion-inner">
<div class="event-container case-container">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="cal">
<div id='calendar'>
</div>
</div>
</div>
The events are placed inside the event-containers.
Here is the CSS styling used:
#cal-side
{
float:right;
height:100%;
width:200px;
margin:50px 5px 5px 5px;
}
#cal-container
{
width:100%;
}
.accordion-inner
{
padding:2px 2px !important;
}
.external-event { /* mimicking the appearance of a real event */
margin: 2px;
padding-left:4px;
color: #ffffff;
background-color:blue;
font-size: .85em;
cursor: pointer;
-webkit-border-radius: 3px;
border-radius: 3px;
height: 20px;
overflow:hidden;
}
.event-container
{
margin:1px;
}
#cal{
}
Below is some of the generated HTML:
I have attempted various methods for controlling the overflow including using `overflow:auto`. The only solution that somewhat worked was setting a fixed pixel amount as the max-height for the event-container, which displayed a scrollbar for cases. However, this is not the ideal solution as it does not adjust dynamically. I require the max height to match the height of cal-side or a similar approach...
Any suggestions on how to tackle this issue would be greatly appreciated.
Thank you