Support

Home Forums Event Espresso Premium Responsive Ticket Selector Table

Responsive Ticket Selector Table

Posted: May 14, 2020 at 2:49 pm


Nathan Gibby

May 14, 2020 at 2:49 pm

The ticket selector table is not responsive and looks very bad on a mobile device (see example at https://endurancesportssummit.com/events/valkyrie-multi-stage-race/). I’ve tried to add some of the CSS code suggested in the a previous post, but that didn’t work so well. Is there a way to change those tables to be DIVs using bootstrap? If so, what files do I need to modify? How to do I modify so that file so that when we update the plugin, but doesn’t overwrite my modifications?


Tony

  • Support Staff

May 15, 2020 at 5:10 am

Hi Nathan,

You can’t easily convert the ticket selector from a table into Divs.

I have not idea on your ability but if you take a look in \event-espresso-core-reg\modules\ticket_selector\ you can see how the ticket selector is constructed. There are a couple of template files used in \templates\ and they can be overridden easily enough however the ticket selector object constructs the table itself so the methods used to generate the details build out the rows and that, you can’t easily modify.

What is it about the current ticket selector on your site that you don’t like?


Nathan Gibby

May 18, 2020 at 1:04 pm

If you were to look at the ticket selector on the URL provided, the three columns in the table are squished. In certain mobile devices, they don’t fit.

If I am to update the file you suggested, can I save it to my child theme to prevent it from being overwritten in the next update? If so, do I need to maintain the directory structure, or can I just put that file in the child theme and expect it to work properly?


Tony

  • Support Staff

May 18, 2020 at 1:18 pm

If you were to look at the ticket selector on the URL provided, the three columns in the table are squished. In certain mobile devices, they don’t fit.

I’ve already looked, but it’s all subjective and I don’t find it that bad in the views I used (emulated in Chrome) which is why I asked 🙂

We can help with some CSS if there is something specific you don’t like.

If so, do I need to maintain the directory structure, or can I just put that file in the child theme and expect it to work properly?

Place it in the root directory of your child theme and it will be used from there.

Again, note in that above I mentioned the template files are only half the battle. They are essentially the wrappers and the table rows are all generated using table marked within the ticket selector object itself, you can’t easily modify that output.

You must be logged in to reply to this support post. Sign In or Register for an Account

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3 Documentation for Event Espresso 4

Status: publish

Updated by  Tony 5 months, 1 week ago ago

Topic Tags

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!
[gravityform id=80 title=false description=false ajax=false]
<div class='gf_browser_unknown gform_wrapper' id='gform_wrapper_80' ><form method='post' enctype='multipart/form-data' id='gform_80' action='/topic/responsive-ticket-selector-table/'> <div class='gform_body'><ul id='gform_fields_80' class='gform_fields top_label form_sublabel_below description_below'><li id='field_80_1' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_1' >First name<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_text'><input name='input_1' id='input_80_1' type='text' value='' class='medium' aria-required="true" aria-invalid="false" /></div></li><li id='field_80_2' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_2' >Email address<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_email'> <input name='input_2' id='input_80_2' type='email' value='' class='medium' aria-required="true" aria-invalid="false" /> </div></li><li id='field_80_3' class='gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' >GDPR Agreement<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_checkbox'><ul class='gfield_checkbox' id='input_80_3'><li class='gchoice_80_3_1'> <input name='input_3.1' type='checkbox' value='I consent to have this website store my submitted information so they can respond to my inquiry.' id='choice_80_3_1' /> <label for='choice_80_3_1' id='label_80_3_1'>I consent to have this website store my submitted information so they can respond to my inquiry.</label> </li></ul></div></li><li id='field_80_4' class='gfield gform_validation_container field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_80_4' >Comments</label><div class='ginput_container'><input name='input_4' id='input_80_4' type='text' value='' autocomplete='off'/></div><div class='gfield_description' id='gfield_description_80_4'>This field is for validation purposes and should be left unchanged.</div></li> </ul></div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_80' class='gform_button button' value='Download Now' onclick='if(window["gf_submitting_80"]){return false;} if( !jQuery("#gform_80")[0].checkValidity || jQuery("#gform_80")[0].checkValidity()){window["gf_submitting_80"]=true;} ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_80"]){return false;} if( !jQuery("#gform_80")[0].checkValidity || jQuery("#gform_80")[0].checkValidity()){window["gf_submitting_80"]=true;} jQuery("#gform_80").trigger("submit",[true]); }' /> <input type='hidden' class='gform_hidden' name='is_submit_80' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='80' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_80' value='WyJbXSIsIjBiNjdjZjkyMDUzOWUxOWY5Y2NiZjIwMzM4YjA1Mjk4Il0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_80' id='gform_target_page_number_80' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_80' id='gform_source_page_number_80' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div><script type='text/javascript'> jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 80) {} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [80, 1]) } ); </script>
[i]
[i]