CSS Grid row classes not being generated properly

  • Resolved darkhousedevelopment

    (@darkhousedevelopment)


    3 years, 9 months ago

    I am using the shortcode to add my conference schedule in my page template, but the grid-template-rows CSS attribute on the main schedule div is not being generated correctly.

    In your example on your website the grid-template-rows attribute is filled with the specific rows, based on the timestamp of the session, and then each row is assigned to their grid area using those timestamps. Your demo grid has this value: grid-template-row: [tracks] auto[time-1554706800] 1fr[time-1554708600] 1fr[time-1554710400] 1fr[time-1554724800] 1fr[time-1554726000] 1fr[time-1554727200] 1fr[time-1554732000] 1fr[time-1554735600] 1fr[time-1554742800] 1fr

    However, in my website the value is simply this: grid-template-rows: [tracks] auto; which makes every single row of the schedule stack on top of each other in the first row.

    This is the shortcode I am using:
    [wpcs_schedule date="2021-04-13" layout="grid" color_scheme="light"]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Contributor Steve Jones

    (@stevejonesdev)

    Hi @darkhousedevelopment,

    If you add the parameter tracks=”all” to the shortcode does that fix the issue?

    Thanks,

    Steve

    Thread Starter darkhousedevelopment

    (@darkhousedevelopment)

    Hi Steve,

    Thanks for the quick reply. So, that did fix the issue with the grid rows CSS, but it has created a new issue.

    On my page I am working on I am showing the schedules for a 3 day conference. I have each day under a different tab. It looks like the plugin does not support having more than one schedule on the same page as it just takes the timestamps from the final instance and generically applies those to the .wpcs-schedule div.

    Perhaps you could add an update to the plugin that adds a dynamic ID to the .wpcs-schedule div based on the date parameter and then generate the CSS for each instance and apply it to that specific ID.

    Plugin Contributor Steve Jones

    (@stevejonesdev)

    The plug should work with multiple schedules on a page. We have it set up with four schedules on our home page. https://wpconferenceschedule.com/

    Thread Starter darkhousedevelopment

    (@darkhousedevelopment)

    Here is the page I am working on. You can see the styles are all generically just set to .wpcs-schedule so there is no way to create the rows needed for each individual schedule.

    https://globalethicssummit.ethisphere.com/agenda-plugin-test/

    I am guessing in the demo on your site you are adding 4 versions of the same date’s schedule, which is why the generic styles work on all of your instances, but on mine where they are different days, therefore creating different timestamps, the way the styles are generated breaks them.

    I can confirm that having two or more schedules of DIFFERENT days on the same page are causing problems with a grid-view structure described above. Is it possible to fix this issue?

    When you have one table-schedule of events of Day 1 and one grid-schedule of event of Day 2 on the same page the whole thing works fine. If you set them both to grid view – one of them breaks its view.

    Moreover, the blocks for Gutenberg editor doesn’t work properly displaying: Error loading block: Invalid parameter(s): attributes which could be done in some other better way.

    You can check it on your demo page as well. Just add to the same page different schedules for different days.
    Day 1 – session1, session2, session3, etc
    Day 2 – session1, session2, session3, etc

    Any fixes?
    Thanks in advance

    Plugin Contributor Amber Hinds

    (@alh0319)

    Hi,

    Thanks for your patience on this. We are going to look into resolving the conflict and fixing this bug, however, we may not be able to get to it immediately as we have a lot on our plate at the moment.

    We may be able to look at this at the end of the week or next week. If your need is urgent you could submit a customization request at https://wpconferenceschedule.com as we’re needing to prioritize paid support at the moment.

    Thanks for understanding and I’ll follow up when this has been fixed.

    Thread Starter darkhousedevelopment

    (@darkhousedevelopment)

    @alh0319 @stevejonesdev has there been any update on this yet? There have been no updates to the plugin in over 7 months, so I’m not sure what other issues are taking priority.

    This is a major issue as doing multi-day schedules is a very common feature to need. The plugin should be assigning a specific ID to each schedule added to a page and then adding the inline styles to that ID instead of the generic class applied to all schedules.

    Either that or the CSS should be rewritten to not rely on the timestamps, but I assume that would be a bit more complicated, as so much else is tied to those timestamps.

    For anyone else struggling with this, the only solution I have found so far is to overwrite the styles for the schedule yourself by inspecting each schedule and recreating the grid-row values based on the correct timestamps. But even then you need a specific parent to target it correctly, and if you need to change the times of the sessions or add a new session then you need to redo your CSS as well, which makes it basically useless for anyone who doesn’t know CSS.

    Plugin Contributor Amber Hinds

    (@alh0319)

    Hello @darkhousedevelopment,

    I do apologize that there has not been a fast resolution on this issue. The reality of the situation is, as I mentioned in my previous reply, that, as a result of shifts in business from COVID, our team needs to prioritize paid work. We’re currently in the middle of a very large custom project and have little capacity for work on our free plugins.

    This and one other support ticket are in our queue, but I fully expect that it’ll be at least a month before we can get to them.

    I understand this is frustrating and that you may want to just use a different conference schedule plugin. Unfortunately, this is the reality of our situation right now and the reality of free versus paid plugins.

    Best wishes,
    Amber

    Plugin Contributor Amber Hinds

    (@alh0319)

    @darkhousedevelopment – one additional thought – we do have an open repository for this on Github at https://github.com/roadwarriorwp/wpconferenceschedule

    If you would like to submit a pull request, we would be happy to review it and merge it in.

    Thread Starter darkhousedevelopment

    (@darkhousedevelopment)

    @alh0319 I understand where you’re coming from. Thank you for posting the public Github. I was going to ask about that as well. I really love this plugin and my clients love it too. I would be happy to take a look at this issue and make a pull request with a proposed fix.

    I saw the other support ticket as well about the attributes error when in the editor. I am seeing that issue as well. I’ll see if I can track down that issue as well.

    Thanks for responding so quickly. I appreciate the honesty.

    Plugin Contributor Amber Hinds

    (@alh0319)

    Thank you. We’ll watch for the pull request. I appreciate your understanding!

    Thread Starter darkhousedevelopment

    (@darkhousedevelopment)

    @alh0319 I have just submitted a pull request to fix this issue and the Invalid Parameters error as well.

    https://github.com/roadwarriorwp/wpconferenceschedule/pull/1

    Thread Starter darkhousedevelopment

    (@darkhousedevelopment)

    My Pull Request has been merged and this issue is now resolved.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘CSS Grid row classes not being generated properly’ is closed to new replies.