Event-Ticket & Avada: Display problem!

  • Resolved scubatinoo

    (@scubatinoo)


    8 years, 9 months ago

    Hi there

    I’m using the newest WordPress version, the newest Avada Theme verseion and the newest Event Ticket version as well. So i’m up to date!

    But i have discovered some Display problems in the combination of Avada and Event Ticket: When i add a ticket to an event, i’ll have a table on the frontend with the class “tribe-events-tickets tribe-events-tickets-rsvp”. This table contains in the first row the columns “tribe-ticket”, “tickets_name” and “tickets_description”. The first colums is supposed to show a minuns (-) and input field and a plus (+) all inline… But since the latest update of Event Ticket these three items are somehow messed up! Both in desktop view and in mobile view as well!

    I had a look at the source code of the frontpage. And i started to try different things like custom-css and so on. But nothing worked. Then i recognized that there are two times the same class, once for <td> and later non for <div>…

    So i looked for /wp-content/plugins/event-tickets/src/views/tickets/rsvp.php and deleted at line-#56 the class “quantity”… Line-#56 looks now like this:
    <td class=”tribe-ticket” data-product-id=”<?php echo esc_attr( $ticket->ID ); ?>”>

    And now the display problems are (almost) gone!!!

    I write (almost), because i guess there is a little bit more to fix, maybe some CSS has to be optimized as well to become perfect. But i think this is your part of the job 😉

    kind regards
    Martin

Viewing 14 replies - 1 through 14 (of 14 total)
  • Thread Starter scubatinoo

    (@scubatinoo)

    8 years, 9 months ago

    I guess the problem is not related to the Avada Theme. It looks more like you have messed up something in general…

    Barry

    (@barryhughes-1)

    8 years, 8 months ago

    Hi @scubatinoo,

    Thanks for posting (and I’m sorry to hear you’ve hit up against difficulties).

    It looks more like you have messed up something in general…

    We definitely want to support as wide a range of themes as reasonably possible, but we can’t realistically get it right for all of them 🙂

    With our latest versions and using a default theme I don’t actually see the same problem as you described, unless perhaps I’m misunderstanding you.

    If it is in fact something that only shows up if you use a combination of both our plugin and Avada then the best solution for you and any others in that situation may be to use a template override to safely implement the workaround you outlined or else set up some custom CSS rules targeting that element.

    If you need any further help and can link to a live example of the issue, that would be appreciated.

    Thanks!

    Thread Starter scubatinoo

    (@scubatinoo)

    8 years, 8 months ago

    Ok, i’m one step further… I’ve figured out that avada-events.js at /wp-content/themes/Avada/assets/js/ overwrites the class “tribe-ticket-quantity” by the class “qty”.

    The class “qty” is used by Avada to add Plus and Minus buttos before and after the input field. This is done by theme.js at /wp-content/themes/Avada/assets/js/

    At line #61 of your /wp-content/plugins/event-tickets/src/views/tickets/rsvp.php you’re adding the class “tribe-ticket quantity” to an table-cell <td> and that will cause the problems. It looks like “quantity” causes the problem – as soon as i remove the class from the cell, everything looks fine…

    For me it looks like there’s a mess between Avada and Events-Ticket css-classes and class-names…

    Personally i like the Plus and Minus buttons added by Avada!

    • This reply was modified 8 years, 8 months ago by scubatinoo.
    Thread Starter scubatinoo

    (@scubatinoo)

    8 years, 8 months ago

    Correction: avada-events.js adds the class “qty” to the class “.tribe-ticket-quantity” using a jQery addClass function… And an div Wrapper all around.

    Barry

    (@barryhughes-1)

    8 years, 8 months ago

    It sounds rather like in addition to adding that class, they ought to remove the class you identified as being problematic when it remains in place.

    I’m at a disadvantage by not having Avada’s code in front of me, but if this is something they do specifically as part of an effort to provide tighter integration with Event Tickets then the onus would really be on them to tighten things up here.

    Ultimately, though, just as support for premium plugins is generally discouraged here in the wordpress.org forums, I’m not sure we can go too much further in discussing issues with a premium theme, either (though I’d love to hear of an ultimate solution, of course).

    Thread Starter scubatinoo

    (@scubatinoo)

    8 years, 8 months ago

    I’ve opened a ticket at the Avada Support as well.

    Where can i get an older version of Event Tickets? I think with Version 4.3.x everything was fine… Just to compare against the newest version.

    drazimmermann

    (@drazimmermann)

    8 years, 8 months ago

    Hi folks,

    any update this topic? I run the same issue.

    @scubatinoo Did you get feedback from Avada?

    Alex

    Thread Starter scubatinoo

    (@scubatinoo)

    8 years, 8 months ago

    @drazimmermann Yes i had contact with the Avada Support. They wrote me:
    ” I checked into this and can replicate that problem. I added this to our dev log so the developers can check into this more closely.”

    After updating to Avada 5.1.1 it became even more worse. With 5.1.2 and 5.1.4 Version everthing looks like before. I still have to remove the classes from the table-cell for a proper frontend output… 🙁

    drazimmermann

    (@drazimmermann)

    8 years, 8 months ago

    @scubatinoo. Thanks for the heads up. I’m going to open a ticket as Avada as well. Let’s see.

    However, and please correct me if I’m wrong I’m not really a CSS ninja, I believe we could and maybe should fix the problem at the plugin side.

    @barry
    1. Why we need the “quantity” class in the table cell? If we delete the class everything looks good. Not an option to just delete the class?

    2. If the deletion is not an option, why just remaining it? In order to avoid name clashes let start every class w/ “tribe”. In our case “tribe-ticket-quantity”

    3. The submit button is looks odd as well. Why the button not use the name like every other tribe button in Events Calendar as well? –> tribe-events-button

    4. Why is the button inside the table? In that case the button isn’t aligned with the other buttons of the Event Calendar. I looks much nicer if put the button outside from the table.

    I just hacked 1,3, and 4 into firebug. The output looks much much nicer. See http://prnt.sc/emda5l.

    BR
    Alex

    Thread Starter scubatinoo

    (@scubatinoo)

    8 years, 8 months ago

    Avada Support wrote to me:
    We’re aware of the styling problem at the moment and this will be improved in the next update (5.1.5). For now, your current fix should be kept in place until we include styling support for this in Avada core.

    Thread Starter scubatinoo

    (@scubatinoo)

    8 years, 8 months ago

    and btw @drazimmermann good points! hope that @barryhughes-1 will read asap

    thanks for your efforts!

    Barry

    (@barryhughes-1)

    8 years, 8 months ago

    It sounds like a fix is in the works on Avada’s side, which is great to hear 🙂

    Also: some interesting points, @drazimmermann. Let me address just a couple of them.

    Why we need the “quantity” class in the table cell? If we delete the class everything looks good. Not an option to just delete the class?

    It’s a useful and clean classname that helps themers to style things. Just as with PHP functions and other parts of the plugin that users may rely on, we need to be careful about removing things unnecessarily as doing so can cause varying degrees of breakages for various users.

    If the deletion is not an option, why just remaining it? In order to avoid name clashes let start every class w/ “tribe”. In our case “tribe-ticket-quantity”

    We certainly could and already do something similar in lots of places. It’s not always optimal, though, and there are cases like this one where a more generic class name makes lots of sense, too.

    Following the above point, adding a new ‘namespaced’ class doesn’t necessarily mean we would be comfortable with instantly removing the existing class (possibly we would – I’m just covering the bases).

    None of this means we can’t make changes and your last point in particular is worth considering: how about posting a feature request? That will allow others to up-vote and comment upon it, giving us a sense of just how much demand there might be.

    Thanks!

    Thread Starter scubatinoo

    (@scubatinoo)

    8 years, 7 months ago

    meanwhilethe Avada-Team fixed the styling in version 5.1.5… and the button-problem as well.

    Plugin Contributor András Guseo

    (@aguseo)

    8 years, 6 months ago

    @scubatinoo, thanks for letting us now!

    It looks like this topic is solved so I’m going to close this.
    In case you need help in the future, just open a new one. 🙂

    Cheers,
    Andras

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Event-Ticket & Avada: Display problem!’ is closed to new replies.