WordPress.org

Ready to get started?Download WordPress

Forums

WP FullCalendar
Table row heights are unusually large.... (7 posts)

  1. charlesjgao
    Member
    Posted 10 months ago #

    I was hoping to get some help on this...

    The calendar works perfectly fine in Firefox, but Chrome seems to be bugging out for me. I am using a theme called Gonzo, if that helps. Link here: http://www.fwpthemes.com/gonzo-wordpress-theme/

    This is what my calendar looks like on Chrome: http://imgur.com/VLAGTk9

    I'm not sure what the problem is exactly, but from what I've seen, the "top" values aren't what they should be. I can't seem to figure out what's causing this discrepancy.

    The demo calendar that's on the Events Manager site works fine on my browser, so I wonder if it's a problem with some other plugin?

    http://wordpress.org/plugins/wp-fullcalendar/

  2. Mario Giancini
    Member
    Posted 10 months ago #

    I'm having this same issue. In Chrome the demo looks good but installed on my site I have those same long table cells for any day that has a post in it...

    It's actually in Safari as well. Firefox works well though.

    Maybe it's some kind of jQuery error... I suspected something w/ JetPack, deactivated it, but still no luck.
    Here's the plugins I'm currently using on the same site:
    Advanced Responsive Video Embedder
    Akismet
    bbPress
    BuddyPress
    Delete Custom Fields
    Jetpack by WordPress.com
    Regenerate Thumbnails
    Standard Sticky Footer
    WordPress Importer
    WP FullCalendar

    What other plugins are you using?

  3. charlesjgao
    Member
    Posted 10 months ago #

    The plug-ins that I'm using are:
    Akismet
    Events Manager
    Jetpack
    Regenerate Thumbails
    Simply Youtube
    Stop Spammer Registrations
    Wordpress Backup to Dropbox
    Wordpress SEO
    WP Fullcalendar

    Until something is figured out, I'm probably going to use another events calendar plugin.

  4. incredimike
    Member
    Posted 10 months ago #

    I have having a similar issue. From the limited debugging I've done without the main.js source, I see an unusually large "height" style being applied to the first div in the first day of each week when that week contains events. The more events in that week, the larger the height (roughly double?)

    The offending element is this:

    #wpfc-calendar .fc-first .fc-day-content > div

    Unfortunately, the miscalculation of height also seems to affect where the absolutely-positioned events are placed, so a simple CSS hack won't do the trick.

    Author, help!

  5. incredimike
    Member
    Posted 10 months ago #

    Figured it out. In my case the problem was with CSS transitions.

    The calendar JS resizes the rows for each week based upon how many events exist in that week. Long story short, my dumb CSS transitions were causing the event anchor tags to be very tall (1 character per new line), then transitioned into the approprite size. Before the transition occured, FullCalendar did its positioning and resizing calculations.

    Since my event tags were very tall at the time of calculations, it threw everything off.

    To fix, turn off CSS transitions within FullCalendar / for event calendar event A tags.

  6. Mario Giancini
    Member
    Posted 9 months ago #

    Thank you @incredimike!

    Great catch! If you watch when the page loads, you'll see the events really long for a split second (one character per line like you said) and then transition up how ever fast you have the transitions set.

    In this case I had all my anchor tags set to transition at 0.3s, so I added this to fix:

    a.fc-event {
    	-webkit-transition: none;
    	-moz-transition: none;
    	-o-transition: none;
    	-ms-transition: none;
    	transition: none;
    }

    Now it loads just fine.

  7. klg53
    Member
    Posted 3 months ago #

    How do you turn off CSS transitions?

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.