Set event list to scroll

The simplest way for you to achieve this is to edit your instance template to wrap your events into their own scrollable container:

<div class="event-listing">
	<div class="event-listing-title">Events</div>
	<div style="max-height:300px;overflow-y:scroll">
		/* [Events loop] */
	</div>
</div>

Got what I wanted with css edit – add height and overflow.

.clndr-holder.clndr_mini-calendar .event-listing {
margin-top:1em;
font-size:1.1em;
height: 150px;
overflow: scroll;
}

THANKS. Yours is a much better fix.

////ALREADY SOLVED///

Hi there! I’m very new to coding and I’d love the events list to loop on the mini and the full size calendar, tried the code you shared replacing

<div class="event-listing">
	<div class="event-listing-title">Events</div>

with this

<div class="event-listing">
	<div class="event-listing-title">Events</div>
	<div style="max-height:300px;overflow-y:scroll">
		/* [Events loop] */
	</div>
</div>

But I loose the format of all the events in the list and no scroll whatsoever…can you give me a hand with more detailed instructions?

Thank you for your time and patience

• This reply was modified 8 years ago by lemonart.