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:
http://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: http://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
http://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.
