Events Calendar List View is wonky

Support Forums for LiveMesh Themes & Plugins Forums Peak Theme Support Events Calendar List View is wonky

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #26201
    Bonnie-LynnBonnie-Lynn
    Member

    We’re upgrading to Peak v2.4, and on our staging site, the Events Calendar List, which is in 2 columns, is forcing the 2nd item below first item (see May on our Events calendar). It is working fine on the live site using Peak 2.1

    Is there a setting to list events in one column instead of two?

    #26206
    RaghavendraRaghavendra
    Moderator
    This reply has been marked as private.
    #26230
    Bonnie-LynnBonnie-Lynn
    Member

    Hi, I’m wondering what the status of this issue is. Is there a solution?

    #26264
    VeenaVeena
    Moderator

    Here- http://staging.mtwashingtonalliance.flywheelsites.com/events/ everything seems ok to me. Is this resolved ?

    #26278
    Bonnie-LynnBonnie-Lynn
    Member

    It’s not resolved yet. I just added an event to April. so now there are 3 events in April which seems to be causing problems with the layout of May. Instead of the 2 events being side-by-side, they are one below the other:
    http://staging.mtwashingtonalliance.flywheelsites.com/events/

    Thank you for your help.

    #26308
    Bonnie-LynnBonnie-Lynn
    Member
    This reply has been marked as private.
    #26317
    VeenaVeena
    Moderator

    Can you pls check this with events calender plugin support ? They can easily guide you in the right direction.

    #26321
    Bonnie-LynnBonnie-Lynn
    Member

    The code I’m referring to:
    .events-list .tribe-events-loop .type-tribe_events:nth-of-type(2n+1), .tribe-events-list .tribe-events-loop .type-tribe_events:nth-of-type(2n+1)

    is setting clear: left;

    Is in Peak theme’s plugin.css, not from the Event Calendar. This is part of Peak’s customization for the calendar. The Event Calendar does not support 2-column display. Here is a post from The Event Calendar’s support forum:

    https://theeventscalendar.com/support/forums/topic/changing-events-display-layout-to-2-columns/

    #26330
    VeenaVeena
    Moderator

    Can you pls try the below custom CSS –

    .events-list .tribe-events-loop .type-tribe_events:nth-of-type(3n+3) {
        clear: left;
    }
    .events-list .tribe-events-loop .type-tribe_events:nth-of-type(2n+1), .tribe-events-list .tribe-events-loop .type-tribe_events:nth-of-type(2n+1), .tribe-events-day .tribe-events-loop .type-tribe_events:nth-of-type(2n+1), .single-tribe_venue .tribe-events-loop .type-tribe_events:nth-of-type(2n+1), .single-tribe_organizer .tribe-events-loop .type-tribe_events:nth-of-type(2n+1) {
        clear: initial;
    }
    
    #26336
    Bonnie-LynnBonnie-Lynn
    Member

    No, that doesn’t work:
    This solution causes the previous Month (April)’s 3rd event to have a clear: left; and its 3rd event is in the second column instead of the third.

    It looks to me like you need some jquery to add a ‘new-month’ class to that selector, then clear: left on the nth-of-type(2n+1) for each new month.

    The way you have it now (without adding the code you mentioned above), it is counting all events in that loop. so if there are 3 events in the 1st month, there is a <span> class for the new month’s title (May) which clears both sides, so the first month automatically lines up to the left (float: left;), but that first month’s count is now 4, the second event in that month should be counted as 2, but instead it is counted as 5 which will fulfills the nth-of-type(2n+1) which clears left and forces it to the left. If you start the count according to new-month, nth-of-type would not be 2n+1 and would not get the clear: left; style.

    As you can see, I just added a second event to August and both events are in the 1st column because the count is not resetting for each month. The first August month is a 6, the second is a 7 which clears left.

    #26349
    RaghavendraRaghavendra
    Moderator

    Sorry this took so long. Give me few hours and I will take a closer look and get back to you on this. Thanks for your patience.

    #26362
    RaghavendraRaghavendra
    Moderator

    The markup provided by Events Calendar is such that it is hard to get this working. I am still investigating – at present, I see only this working to some extent –

    .events-list .tribe-events-loop .type-tribe_events, .tribe-events-list .tribe-events-loop .type-tribe_events, .tribe-events-day .tribe-events-loop .type-tribe_events, .single-tribe_venue .tribe-events-loop .type-tribe_events, .single-tribe_organizer .tribe-events-loop .type-tribe_events { min-height: 800px; }
    
    .events-list .tribe-events-loop .type-tribe_events:nth-of-type(2n+1), .tribe-events-list .tribe-events-loop .type-tribe_events:nth-of-type(2n+1), .tribe-events-day .tribe-events-loop .type-tribe_events:nth-of-type(2n+1), .single-tribe_venue .tribe-events-loop .type-tribe_events:nth-of-type(2n+1), .single-tribe_organizer .tribe-events-loop .type-tribe_events:nth-of-type(2n+1) { clear: none; }

    Once you have the site ready, you need to find the optimal height and set the same so that the elements are not floating around instead of moving to the next row.

    I tried using flexbox but again, due to presence of elements which are not part of the grid, the layout gets messed up completely.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘Peak Theme Support’ is closed to new topics and replies.