Support Forums for LiveMesh Themes & Plugins › Forums › Peak Theme Support › Events Calendar List View is wonky
Tagged: Events Calendar, Peak v2.4
- This topic has 11 replies, 3 voices, and was last updated 6 years, 11 months ago by Raghavendra.
-
AuthorPosts
-
March 23, 2017 at 12:46 pm #26201Bonnie-LynnMember
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?
March 23, 2017 at 1:49 pm #26206RaghavendraModeratorThis reply has been marked as private.March 27, 2017 at 7:08 pm #26230Bonnie-LynnMemberHi, I’m wondering what the status of this issue is. Is there a solution?
March 30, 2017 at 1:39 pm #26264VeenaModeratorHere- http://staging.mtwashingtonalliance.flywheelsites.com/events/ everything seems ok to me. Is this resolved ?
March 31, 2017 at 12:22 pm #26278Bonnie-LynnMemberIt’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.
April 3, 2017 at 4:18 pm #26308Bonnie-LynnMemberThis reply has been marked as private.April 4, 2017 at 1:19 pm #26317VeenaModeratorCan you pls check this with events calender plugin support ? They can easily guide you in the right direction.
April 4, 2017 at 3:58 pm #26321Bonnie-LynnMemberThe 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/
April 5, 2017 at 10:44 am #26330VeenaModeratorCan 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; }
April 5, 2017 at 5:39 pm #26336Bonnie-LynnMemberNo, 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.
April 6, 2017 at 2:02 pm #26349RaghavendraModeratorSorry 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.
April 7, 2017 at 1:48 pm #26362RaghavendraModeratorThe 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.
-
AuthorPosts
- The forum ‘Peak Theme Support’ is closed to new topics and replies.