[Plugin: The Events Calendar] width issues !

Workinnnnnnnnnnnng !!! Greaaaaaaaaaaaaaat Thx man ??

Heck yeah! Awesome to hear that did the trick, heilios. Thanks for confirming. If you’d be so kind as to give us a vote of “Works” and/or a 5-star rating here at the repo, we sure would appreciate it ??

Please let us know if we can do anything else.

Hi There,

Sorry to reopen this, but I found good use for this solution. The thing is that I am struggling with my event DIV’s overflowing the table cells in the grid view. I have tried to add a overflow:hidden which looks good, but breaks the popups when hovering over the event.

I am about to give up but I thought I should give this thread a try. Do you guys have any tips or tricks?

You can see my problem here:
https://ny.bodokajakk.no/kalender/

Edit: Here is my relevant CSS

.grid .tribe-events-event {
    width: 60px; overflow: hidden; text-overflow: ellipsis;
}

Thanks,
Terje

Hi. I’ve been looking for a solution to this, so I thank you for this message thread.

Unfortunately, the fix offered:

.grid .tribe-events-event {
width: 200px;
}

is not working for my site (which has a completely different theme). The content width adjusts, but not the width of the actual grid. See here: https://www.buckeyekids.com/deadlines/

Any new suggestions?

This will all be done in CSS. If you control-click the table in Safari (other browsers may use different hot keys) you can look at the CSS

A quick look suggests that on line 210 of your CSS you need to remove width: 250px. If you get rid of this the table fits the page. This might not be a 100% cure but it will get you going in the right direction

Your CSS is at
https://www.buckeyekids.com/wp-content/plugins/the-events-calendar/resources/events.css?ver=3.3.1

Nick Froome

Thanks. I’m in the events.css file and do not see width: 250px.

Which setting should I look at? (I’m not a developer in the least.)

Never mind. I found the line. It worked!!! Thanks so much!!!

I finally found the solution to my own version of this problem.

Problem:
When forcing the cell width to prevent uneven columns I need to use overflow:hidden to prevent long event titles from overstepping their boundaries. The overflow:hidden also clips the tooltip, so that was not a good solution.

Solution:
Convert the link to a block element and restrict its width and overflow, thus handling this parallell to the tooltip-div, like such:
.grid .tribe-events-event a { width: 60px; display: block; text-overflow: ellipsis; overflow: hidden;}

Thanks for sharing your solution, c0nstruct. It will be useful to others who come with the same problem down the road and you’ve laid it out in a perfect format for that to make sense. Thanks again and please let us know if we can do anything for you down the road.