Increase spacing in Description section on Calendar

Wishlist Event Calendar
1

In the Calendar widgets, there is only a set height for the description box, so once you add a bit of text to your event box, you have to click “show more” to read the rest. If the height was increased just a bit, it would allow you to see more before having to click for more information. Or allow the user to choose the height of their own box.

1 Like
2

Hi @cbrown77 and welcome aboard :wave:

Thank you for sharing your feedback with us!

I agree that such a setting in the widget editor would be really helpful. We’ll try to consider this opportunity in our future updates!

As for now, you can use this CSS code to increase the height of the description field:

.global-styles,
.eapp-events-calendar-read-more-content {
  min-height: 120px;
}

Please add this code to the Custom CSS field on the Appearance tab and let me know if it helped :slightly_smiling_face:

3

This is great thank you, but it still fades the text even when I change the height in the CSS code. Like it still knows where that set height is, so it automatically fades the text. Is there a way to fix that in the CSS code?

1 Like
4

We’ve added this code to your widget:

.global-styles, .eapp-events-calendar-read-more-content:after {
  display: none !important;
}

Please check it and let me know if you like what you see :slightly_smiling_face:

5

Sorry it is almost perfect, can we have the CSS code eliminate the read more text? Because I can set the height now, I don’t need that text there at all.

1 Like
6

Sure, you can this code:

.global-styles, .eapp-events-calendar-read-more-content {
  max-height: 100% !important;
}

.global-styles, .eapp-events-calendar-popup-item-readMoreButton {
  display: none !important;
}
7

Awesome thanks so much!

1 Like
8

Happy to hear that you are good now!

You are always welcome :raised_hands:

9

.global-styles, .eapp-events-calendar-read-more-content {
max-height: 100% !important;
}

.global-styles, .eapp-events-calendar-read-more-content::after {
background: none !important;
}

.global-styles, .eapp-events-calendar-popup-item-readMoreButton {
display: none !important;
}

1 Like
10

Happy to see you on our forum @Garrit_Freitag! Welcome :wave:

Your code worked great! Thank you so much for your help, it’s highly appreciated :hearts: