Support

Home Forums Event Espresso Premium Problem with table list addon

Problem with table list addon

Posted: September 24, 2020 at 3:12 pm


SCCDS

September 24, 2020 at 3:12 pm

Hello, hope guys are doing well. On our recent website sccds.org, our client has recently brought to our attention that the page https://sccds.org/events-and-courses which is using the table view addon had broken pagination, and the filters including search and filtering by category were also broken. I was wondering if someone could check this out and see if maybe this is an issue with how we implemented something or if its a bug in the plugin. We didn’t really do much in the way of changing this except for some CSS. I’m willing to provide login info if needed.


Tony

  • Support Staff

September 29, 2020 at 8:25 am

Hi there,

The pagination on that table is done with Footable which, in short, changes the display attribute on each row.

On your site you are forcing each row to use display: flex; with this:

.espresso-table-header-row tr,
.espresso-table-row {
    display: flex !important;
    flex-flow: row wrap !important;
    width: 100% !important;
}

That’s in your child theme’s style.css file.

You’ll need to remove the above for pagination to work, or if you want to use the above you’ll need to remove the pagination.


SCCDS

October 1, 2020 at 2:59 pm

Hi Tony sorry to get back to you late, thanks for the advice. I’ll see if I can get a work around for this and get back to you, this was mainly to make the existing widget more attractive. What about the categories I mentioned, is this related to the same issue?


Tony

  • Support Staff

October 1, 2020 at 3:30 pm

Almost certainly yes, the category filter runs show() and hide() on each row that has/does not have the category class.

If you forcing the display to be something else with !important it will also override that.


SCCDS

October 1, 2020 at 5:23 pm

Hello Tony thanks for the help, I was able to change it with very little effort, the only issue that seems to present itself is it does not properly display on mobile view anymore. I’ve tried a couple things but it seems to overflow outside of the container instead of scaling to 100% for some reason. If you could provide some suggestions, not very used to the aged table layouts anymore, thanks!


Tony

  • Support Staff

October 5, 2020 at 5:22 am

In short, you’ll need to either reduce the size of the columns or hide one of them.

For example hiding the Venu column on mobile:

@media (max-width: 420px) {
	#ee_filter_table th:nth-of-type(2),
	#ee_filter_table td:nth-of-type(2) {
    	display: none;
	}
}

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 3 weeks 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/problem-with-table-list-addon/'> <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' >Phone</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]