• Resolved lucacubisino

    (@lucacubisino)


    Hi, I am writing because I am having some issues the RSVP form. When I open it from a laptop it looks good. However, when I open it from a cell phone, the width of the text box for “Name” and “Email” are too narrow. It is almost impossible to type. Here is a link where you can see the problem: https://www.sangiacomofestival.it/event/concerto-da-camera-barocco-e-classicismo-riletture. Thank you for your help!

    I am copying here the code of the RSVP.php file:

    <?php
    /**
    * This template renders the RSVP ticket form
    *
    * Override this template in your own theme by creating a file at:
    *
    * [your-theme]/tribe-events/tickets/rsvp.php
    *
    * @version 4.8.1
    *
    * @var bool $must_login
    */

    $is_there_any_product = false;
    $is_there_any_product_to_sell = false;
    $are_products_available = false;

    ob_start();
    $messages = Tribe__Tickets__RSVP::get_instance()->get_messages();
    $messages_class = $messages ? ‘tribe-rsvp-message-display’ : ”;
    ?>

    <form
    id=”rsvp-now”
    action=””
    class=”tribe-tickets-rsvp cart <?php echo esc_attr( $messages_class ); ?>”
    method=”post”
    enctype=’multipart/form-data’
    >
    <h2 class=”tribe-events-tickets-title tribe–rsvp”>
    <?php echo esc_html_x( ‘[Concerto prenotabile a partire da 10 giorni prima dell’evento fino alle ore 17:00 del giorno dell’evento   |   Max 5 posti per prenotazione]’, ‘form heading’, ‘event-tickets’ ) ?>
    </h2>

    <div class=”tribe-rsvp-messages”>
    <?php
    if ( $messages ) {
    foreach ( $messages as $message ) {
    ?>
    <div class=”tribe-rsvp-message tribe-rsvp-message-<?php echo esc_attr( $message->type ); ?>”>
    <?php echo esc_html( $message->message ); ?>
    </div>
    <?php
    }//end foreach
    }//end if
    ?>

    <div
    class=”tribe-rsvp-message tribe-rsvp-message-error tribe-rsvp-message-confirmation-error” style=”display:none;”>
    <?php esc_html_e( ‘Compila tutti i campi per prenotare.’, ‘event-tickets’ ); ?>
    </div>
    </div>

    <table class=”tribe-events-tickets tribe-events-tickets-rsvp”>
    <?php
    foreach ( $tickets as $ticket ) {
    // if the ticket isn’t an RSVP ticket, then let’s skip it
    if ( ‘Tribe__Tickets__RSVP’ !== $ticket->provider_class ) {
    continue;
    }

    if ( ! $ticket->date_in_range() ) {
    continue;
    }

    $is_there_any_product = true;
    $is_there_any_product_to_sell = $ticket->is_in_stock();
    $remaining = $ticket->remaining();

    if ( $is_there_any_product_to_sell ) {
    $are_products_available = true;
    }

    ?>
    <tr>
    <td class=”tribe-ticket quantity” data-product-id=”<?php echo esc_attr( $ticket->ID ); ?>”>
    <input type=”hidden” name=”product_id[]” value=”<?php echo absint( $ticket->ID ); ?>”>
    <?php if ( $is_there_any_product_to_sell ) : ?>
    <input
    type=”number”
    class=”tribe-ticket-quantity”
    step=”1″
    min=”0″
    <?php if ( -1 !== $remaining ) : ?>
    max=”<?php echo esc_attr( $remaining ); ?>”
    <?php endif; ?>
    name=”quantity_<?php echo absint( $ticket->ID ); ?>”
    value=”0″
    <?php disabled( $must_login ); ?>
    >
    <?php if ( $ticket->managing_stock() ) : ?>
    <span class=”tribe-tickets-remaining”>
    <?php echo sprintf( esc_html__( ‘Massimo n. 5 posti prenotabili per prenotazione. Totale posti disponibili: %1$s di %2$s’, ‘event-tickets’ ), $ticket->available(), $ticket->capacity() ); ?>
    </span>
    <?php endif; ?>
    <?php else: ?>
    <span class=”tickets_nostock”><?php esc_html_e( ‘Prenotazioni esaurite!’, ‘event-tickets’ ); ?></span>
    <?php endif; ?>
    </td>
    <td class=”tickets_name”>
    <?php echo esc_html( $ticket->name ); ?>
    </td>

    <td class=”tickets_description” colspan=”2″>
    <?php echo esc_html( ( $ticket->show_description() ? $ticket->description : ” ) ); ?>
    </td>
    </tr>
    <?php

    /**
    * Allows injection of HTML after an RSVP ticket table row
    *
    * @var Event ID
    * @var Tribe__Tickets__Ticket_Object
    */
    do_action( ‘event_tickets_rsvp_after_ticket_row’, tribe_events_get_ticket_event( $ticket->id ), $ticket );

    }
    ?>

    <?php if ( $are_products_available ) : ?>
    <tr class=”tribe-tickets-meta-row”>
    <td colspan=”4″ class=”tribe-tickets-attendees”>
    <header><?php esc_html_e( ‘Dati prenotazione:’, ‘event-tickets’ ); ?></header>
    <?php
    /**
    * Allows injection of HTML before RSVP ticket confirmation fields
    *
    * @var array of Tribe__Tickets__Ticket_Object
    */
    do_action( ‘tribe_tickets_rsvp_before_confirmation_fields’, $tickets );

    /**
    * Set the default Full Name for the RSVP form
    *
    * @since 4.7.1
    *
    * @param string
    */
    $name = apply_filters( ‘tribe_tickets_rsvp_form_full_name’, ” );

    /**
    * Set the default value for the email on the RSVP form.
    *
    * @since 4.7.1
    *
    * * @param string
    */
    $email = apply_filters( ‘tribe_tickets_rsvp_form_email’, ” );
    ?>
    <table class=”tribe-tickets-table”>
    <tr class=”tribe-tickets-full-name-row”>
    <td>
    <label for=”tribe-tickets-full-name”><?php esc_html_e( ‘Nome’, ‘event-tickets’ ); ?>:</label>
    </td>
    <td colspan=”4″>
    <input type=”text” name=”attendee[full_name]” id=”tribe-tickets-full-name” value=”<?php echo esc_html( $name ); ?>”>
    </td>
    </tr>
    <tr class=”tribe-tickets-email-row”>
    <td>
    <label for=”tribe-tickets-email”><?php esc_html_e( ‘E-mail’, ‘event-tickets’ ); ?>:</label>
    </td>
    <td colspan=”4″>
    <input type=”email” name=”attendee[email]” id=”tribe-tickets-email” value=”<?php echo esc_html( $email ); ?>”>
    </td>
    </tr>

    <?php
    /**
    * Use this filter to hide the Attendees List Optout
    *
    * @since 4.5.2
    *
    * @param bool
    */
    $hide_attendee_list_optout = apply_filters( ‘tribe_tickets_hide_attendees_list_optout’, false );
    if ( ! $hide_attendee_list_optout
    && class_exists( ‘Tribe__Tickets_Plus__Attendees_List’ )
    && ! Tribe__Tickets_Plus__Attendees_List::is_hidden_on( get_the_ID() )
    ) : ?>
    <tr class=”tribe-tickets-attendees-list-optout”>
    <td colspan=”4″>
    <input
    type=”checkbox”
    name=”attendee[optout]”
    id=”tribe-tickets-attendees-list-optout”
    >
    <label for=”tribe-tickets-attendees-list-optout”>
    <?php esc_html_e( ‘Don\’t list me on the public attendee list’, ‘event-tickets’ ); ?>
    </label>
    </td>
    </tr>
    <?php endif; ?>
    </table>
    </td>
    </tr>
    <tr>
    <td colspan=”4″ class=”add-to-cart”>
    <?php if ( $must_login ) : ?>
    “>
    <?php esc_html_e( ‘Login to RSVP’, ‘event-tickets’ );?>

    <?php else: ?>
    <button
    type=”submit”
    name=”tickets_process”
    value=”1″
    class=”tribe-button tribe-button–rsvp”
    >
    <?php esc_html_e( ‘Invia’, ‘event-tickets’ );?>
    </button>
    <?php endif; ?>
    </td>
    </tr>
    <?php endif; ?>
    <noscript>
    <tr>
    <td class=”tribe-link-tickets-message”>
    <div class=”no-javascript-msg”><?php esc_html_e( ‘You must have JavaScript activated to purchase tickets. Please enable JavaScript in your browser.’, ‘event-tickets’ ); ?></div>
    </td>
    </tr>
    </noscript>
    </table>
    </form>

    <?php
    $content = ob_get_clean();
    echo $content;

    if ( $is_there_any_product ) {
    // If we have available tickets there is generally no need to display a ‘tickets unavailable’ message
    // for this post
    $this->do_not_show_tickets_unavailable_message();
    } else {
    // Indicate that there are not any tickets, so a ‘tickets unavailable’ message may be
    // appropriate (depending on whether other ticket providers are active and have a similar
    // result)
    $this->maybe_show_tickets_unavailable_message( $tickets );
    }

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Contributor Andras Guseo

    (@aguseo)

    Hi @lucacubisino,

    Thanks for reaching out!

    I looked at your site. It looks like that formatting comes from your theme.
    A fix should be possible with some custom css.
    Or you could get in touch with the theme developer to help you fix that.

    Cheers,
    Andras

    Thread Starter lucacubisino

    (@lucacubisino)

    Thank you for your reply, Andras.
    Would you help me with that, please? If you can’t that’s OK.
    Best, Luca

    mirre1

    (@mirre1)

    They seem to use Businessx, I use twentyseventeen and have the same issue, it was NOT like that before

    Wonderdog

    (@wonderdog)

    I’ve had the same issue with our css layout on our site (StudioPress Genesis Child Theme). I contacted their support and this is what they said:

    I see the following CSS that’s added by the event plugin:

    .tribe-events-tickets td {
    padding: 8px 10px;
    display: -ms-flexbox;
    display: flex;
    max-width: 50%;
    width: 50%;
    }

    The 50% width is what’s causing the issue on mobile devices.

    To fix this, you could add something like this in Appearance > Customize > Additional CSS:

    @media only screen and (max-width: 600px) {
    .tribe-events-tickets td {
    max-width: 100%;
    width: 100%;
    }
    }

    Your mileage may vary, but hope that helps!

    Plugin Contributor Andras Guseo

    (@aguseo)

    Thanks for all your posts! Indeed this is on us. Sorry for this issue.

    We already have a bugticket in place and our devs will look at it.

    Meanwhile here’s a snippet one of our support staff came up with:

    @media (max-width: 767px) {
        .tribe-tickets-attendees {
            flex-direction: column;
        }
        .tribe-events-tickets td {
            width: 100%;
            max-width: 100%;
        }
    }

    Cheers,
    Andras

    Thread Starter lucacubisino

    (@lucacubisino)

    The snippet works perfectly, thank you @aguseo!

    Plugin Contributor Andras Guseo

    (@aguseo)

    Glad we could help!

    Plugin Author Rafsun Chowdhury

    (@rafsuntaskin)

    Hi,

    Just wanted to share with you that a new release of our plugins is out which includes a fix for the issue discussed here.

    Find out more about the release here → https://theeventscalendar.com/maintenance-release-25-february-2019/
    We appreciate your patience while we worked on this.

    As always, we suggest to set up a dev/staging site so you can make all plugin updates without disrupting the live site.
    Please update the plugins if you haven’t done already and let us know if the fix works for you.

    Kind Regards,
    Support Team

    Hi Rafsun,

    I’m having this same issue on my site too, only when it’s in mobile. I tried the above fixes but that didn’t work. I have the latest versions of all the Event Tickets and Event Calendar plugins. Here’s an example you can see https://downtownreno.org/event/downtown-reno-partnership-resident-and-business-owner-townhall

    I’m running the Avada theme. I tried doing the custom CSS but just took it out since it didn’t seem to have an effect. I can get it to work in Developer Toolbar when I turn the width OFF completely for .tribe-events-tickets td . But I can’t replicate that live. And in general the text is kind of a hot mess, too.

    Any suggestions?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Issues with text boxes on RSVP form’ is closed to new replies.