|
artbarslo
|
February 26, 2014 at 1:49 pm
Hi. I’m having a strange issue on my calendar where events will overlap each other when they have a thumbnail image. The issue only occurs when you first load the page… if you refresh or interact with the calendar… the events display fine. Unfortunately, many users are not refreshing the page and missing events that are covered up. I can recreate the issue using incognito mode repeatedly. I tested it, and it’s happening on both Chrome and Firefox. Thanks.
My url is: http://artbarslo.com/calendar/
Event Espresso: Version 3.1.36.4.P
Calender Add-On: Version 2.2.2.p
|
|
Sidney Harrell
|
February 26, 2014 at 3:24 pm
Can you check under (WP) Settings->Media and look under Thumbnail size and make sure the “Crop thumbnail to exact…” is checked?
|
|
artbarslo
|
February 26, 2014 at 3:25 pm
Yes, it is checked
|
|
Josh
|
February 27, 2014 at 6:33 am
Hi there,
I did some checking and testing on my own site and it looks like this style rule that’s in your theme’s stylesheet (style.css around line 155) is causing the issue:
#espresso_calendar a {
height: auto !important;
padding-bottom: 10px;
margin-bottom: 5px;
}
If I add that same style to the theme on my test site the events with images start overlapping. Then I removed it and the overlapping went away. If you can remove the style and clear the browser’s cache that may resolve this on your site too.
|
|
artbarslo
|
February 27, 2014 at 7:50 am
Thanks. Yes that fixed the overlapping issue. Thank so much. I put that in there, because there is mysterious large amount of bottom padding on the events (occurs in the same instance as the overlap… when you first load the page). However when you reload, that padding disappears. I can live with the padding, but just curious if you have any idea why that might be happening.
Thanks for the fix. Really appreciate it.
|
|
Josh
|
February 28, 2014 at 10:29 am
The mysterious large amount of padding is related to the overlap issue. The calendar jQuery plugin tends to calculate the table cell heights before the images load up despite some attempts to make the images load first.
I think you can get rid of the extra padding because all the image thumbnails are the same height. Something like this added to your stylesheet may help:
#espresso_calendar a {
max-height: 185px!important;
}
|
