Event time is not aligned across the columns in the Event Calendar

Ask the Community General Questions
1
  • Issue description:
    To align the event time, I had to customise the CSS by adding a minimum height to the event name like this:

.eapp-events-calendar-name-component {min-height: 140px;}.

Is there a better way of doing it? If the event name is super long, the event time will not align with the ones beside it again. I also don’t want to end up with too much white space when the event names are short because of the min-height I set.

1 Like
3

Hi there, @MelvinNeo :waving_hand:

Unfortunately, it’s impossible to keep the time aligned and remove empty space, if the length of the event names is quite different.

The only possible option is to apply the same length for all events names, so some event name will be shortened in the event card.

If you like this workaround, I’ll ask the devs to create a custom code for you :slightly_smiling_face:

4

I thought using some flex-grow: 1 CSS would do the trick.

In that case, I’ll stick to min-height for now until you guy find a more elegant solution.

Thanks, Max.

1 Like
5

You can use the CSS code with flex-grow, but you need to remove the code from the screenshot first:

image
image328×464 17.5 KB

.eapp-events-calendar-grid-item-locationAndTime {
  margin-bottom: 0!important;
}

/*align event times*/
.eapp-events-calendar-grid-item-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
/*align event times*/
.eapp-events-calendar-grid-item-name {
  flex-grow: 1;
}

However, the effect won’t be much different from your solution, since it’s just impossible to remove the empty space with the time aligned and full event names displayed.

I hope this explains things.

If you have any questions left, we’ll be delighted to help :slightly_smiling_face: