Title: Events List visualisation problem Last modified: August 31, 2016 --- # Events List visualisation problem * Resolved [fersamp](https://wordpress.org/support/users/fersamp/) * (@fersamp) * [10 years, 6 months ago](https://wordpress.org/support/topic/events-list-visualisation-problem/) * Hi, I’m sorry if I write again about a problem I wrote some week ago, but I haven’t yet resolve it 🙁 * I explain better my problem: * **I need to display events list filtered by date (Today, Tomorrow, One choosen date) in my home page, each in one distinct tab. ** * So I tried some shortcode to do it, this is my situation: * 1) for Today and Tomorrow I use this shortcode: `[custom_events]tomorrow[/custom_events]` and this the implementation: * ``` function display_custom_events( $attr, $content = null ) { ob_start(); echo do_shortcode('[events_list scope="' . $content. '" limit=5 pagination=1 ][/events_list]'); return ob_get_clean(); } add_shortcode('custom_events', 'display_custom_events'); ``` * 2) for single date choosen I use: * `[custom_search][/custom_search]` and this implementation: * ``` function display_custom_search( $attr, $content = null ) { $search_args = em_get_search_form_defaults(); em_locate_template('templates/events-search.php', true, array('args'=>$search_args)); $args['limit'] = !empty($args['limit']) ? $args['limit'] : get_option('dbem_events_default_limit'); if( !empty($args['ajax']) ){ echo '
'; } //AJAX wrapper open if( get_option('dbem_event_list_groupby') ){ em_locate_template('templates/events-list-grouped.php', true, array('args'=>$args)); }else{ em_locate_template('templates/events-list.php', true, array('args'=>$args)); } if( !empty($args['ajax']) ) echo "
"; //AJAX wrapper close /*return '' . $content . '';*/ } add_shortcode('custom_search', 'display_custom_search'); ``` * For the first filter the result is: [https://www.dayroma.it/wp-content/uploads/2016/03/filter-1.jpg](https://www.dayroma.it/wp-content/uploads/2016/03/filter-1.jpg) * with a lot of margin problem. * The second filter works better: [https://www.dayroma.it/wp-content/uploads/2016/03/filter-2.jpg](https://www.dayroma.it/wp-content/uploads/2016/03/filter-2.jpg) * For css table I use this css: * ``` .myTableEvents { margin:0px;padding:0px; width:100%; box-shadow: 10px 10px 5px #777777; border:1px solid #cccccc; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; border-bottom-left-radius:0px; -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px; border-bottom-right-radius:0px; -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px; border-top-right-radius:0px; -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; border-top-left-radius:0px; }.myTableEvents table{ border-collapse: collapse; border-spacing: 0; width:100%; height:100%; margin:0px;padding:0px; }.myTableEvents tr:last-child td:last-child { -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px; border-bottom-right-radius:0px; } .myTableEvents table tr:first-child td:first-child { -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; border-top-left-radius:0px; } .myTableEvents table tr:first-child td:last-child { -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px; border-top-right-radius:0px; } .myTableEvents tr:last-child td:first-child{ -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; border-bottom-left-radius:0px; } .myTableEvents tr:hover td{ } .myTableEvents tr:nth-child(odd){ background-color:#f2f2f2; } .myTableEvents tr:nth-child(even) { background-color:#ffffff; } .myTableEvents td{ border:1px solid #cccccc; border-width:0px 1px 1px 0px; text-align:left; font-size:15px; font-family:Arial; color:#666666; } .myTableEvents tr:last-child td{ border-width:0px 1px 0px 0px; } .myTableEvents tr td:last-child{ border-width:0px 0px 1px 0px; } .myTableEvents tr:last-child td:last-child{ border-width:0px 0px 0px 0px; } /* .myTableEvents tr:hover td{ background:-o-linear-gradient(bottom, #ff3333 5%, #ff3333 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff3333), color-stop(1, #ff3333) ); background:-moz-linear-gradient( center top, #ff3333 5%, #ff3333 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff3333", endColorstr="#ff3333"); background: -o-linear-gradient(top,#ff3333,#ff3333); background-color:#ffe5e5; }*/ .myTableEvents tr:first-child td:first-child{ border-width:0px 0px 1px 0px; } .myTableEvents tr:first-child td:last-child{ border-width:0px 0px 1px 1px; } ``` * and I use this code in EM backend header * ``` ``` * and * ```
``` * in the body. * I really need some help to resolve this css visualisation problem. I think that some problem is due to pre tag, but I don’t know where to remove it creation. * **My aim is having an event list with the format of the second picture** * [https://www.dayroma.it/wp-content/uploads/2016/03/filter-2.jpg](https://www.dayroma.it/wp-content/uploads/2016/03/filter-2.jpg) * with a filter by today and tomorrow date, without blank space you see in the bottom. * Sorry if I already asked, Thank you everybody. Viewing 1 replies (of 1 total) * Thread Starter [fersamp](https://wordpress.org/support/users/fersamp/) * (@fersamp) * [10 years, 6 months ago](https://wordpress.org/support/topic/events-list-visualisation-problem/#post-7181125) * Hi everyone, after hours spent the solution was very simple ahahah * Pre tag was added automatically by text editor: even if I wrote “[custom_events] tomorrow[/custom_events]” wordpress editor adds automatically pre tag and I dind’t saw it. (you can see it only in block text changing visual to text view ) * Remove auto-add pre tag solved the problem. * 🙂 I’m very happy Viewing 1 replies (of 1 total) The topic ‘Events List visualisation problem’ is closed to new replies. * ![](https://ps.w.org/events-manager/assets/icon-256x256.gif?rev=3711454) * [Events Manager - Calendar, Bookings, Tickets, Appointments and more!](https://wordpress.org/plugins/events-manager/) * [Frequently Asked Questions](https://wordpress.org/plugins/events-manager/#faq) * [Support Threads](https://wordpress.org/support/plugin/events-manager/) * [Active Topics](https://wordpress.org/support/plugin/events-manager/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/events-manager/unresolved/) * [Reviews](https://wordpress.org/support/plugin/events-manager/reviews/) * 1 reply * 1 participant * Last reply from: [fersamp](https://wordpress.org/support/users/fersamp/) * Last activity: [10 years, 6 months ago](https://wordpress.org/support/topic/events-list-visualisation-problem/#post-7181125) * Status: resolved
#_EVENTIMAGE{200,200}
#_EVENTLINK
#_EVENTDATES, #_EVENTTIMES, #_LOCATIONADDRESS, #_LOCATIONNAME
#_BOOKINGBUTTON
#_ATTENDEESLIST