{"id":7181015,"date":"2016-03-17T10:31:47","date_gmt":"2016-03-17T10:31:47","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/events-list-visualisation-problem\/"},"modified":"2016-08-31T14:47:29","modified_gmt":"2016-08-31T14:47:29","slug":"events-list-visualisation-problem","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/events-list-visualisation-problem\/","title":{"rendered":"Events List visualisation problem"},"content":{"rendered":"

Hi,
\nI’m sorry if I write again about a problem I wrote some week ago, but I haven’t yet resolve it \ud83d\ude41<\/p>\n

I explain better my problem:<\/p>\n

I need to display events list filtered by date (Today, Tomorrow, One choosen date) in my home page, each in one distinct tab. <\/strong><\/p>\n

So I tried some shortcode to do it, this is my situation:<\/p>\n

1) for Today and Tomorrow I use this shortcode:
\n[custom_events]tomorrow[\/custom_events]<\/code>
\nand this the implementation:<\/p>\n

function display_custom_events( $attr, $content = null ) {\nob_start();\necho do_shortcode('[events_list scope="' . $content. '" limit=5 pagination=1 ][\/events_list]');\nreturn ob_get_clean();\n}\nadd_shortcode('custom_events', 'display_custom_events');<\/code><\/pre>\n
2) for single date choosen I use:<\/p>\n
[custom_search][\/custom_search]<\/code>
\nand this implementation:<\/p>\n
function display_custom_search( $attr, $content = null ) {\n\n\t$search_args = em_get_search_form_defaults();\n\tem_locate_template('templates\/events-search.php', true, array('args'=>$search_args));\n\n\t$args['limit'] = !empty($args['limit']) ? $args['limit'] : get_option('dbem_events_default_limit');\n\t\t\t\t\t\tif( !empty($args['ajax']) ){ echo '<div class="em-search-ajax">'; } \/\/AJAX wrapper open\n\t\t\t\t\t\tif( get_option('dbem_event_list_groupby') ){\n\t\t\t\t\t\t\tem_locate_template('templates\/events-list-grouped.php', true, array('args'=>$args));\n\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\tem_locate_template('templates\/events-list.php', true, array('args'=>$args));\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif( !empty($args['ajax']) ) echo "<\/div>"; \/\/AJAX wrapper close\n\n    \/*return '<a href="http:\/\/twitter.com\/filipstefansson" class="twitter-button">' . $content . '<\/a>';*\/\n}\nadd_shortcode('custom_search', 'display_custom_search');<\/code><\/pre>\n
For the first filter the result is:
\nhttps:\/\/www.dayroma.it\/wp-content\/uploads\/2016\/03\/filter-1.jpg<\/a><\/p>\n
with a lot of margin problem.<\/p>\n
The second filter works better:
\nhttps:\/\/www.dayroma.it\/wp-content\/uploads\/2016\/03\/filter-2.jpg<\/a><\/p>\n
For css table I use this css:<\/p>\n
.myTableEvents {\n\tmargin:0px;padding:0px;\n\twidth:100%;\n\tbox-shadow: 10px 10px 5px #777777;\n\tborder:1px solid #cccccc;\n\n\t-moz-border-radius-bottomleft:0px;\n\t-webkit-border-bottom-left-radius:0px;\n\tborder-bottom-left-radius:0px;\n\n\t-moz-border-radius-bottomright:0px;\n\t-webkit-border-bottom-right-radius:0px;\n\tborder-bottom-right-radius:0px;\n\n\t-moz-border-radius-topright:0px;\n\t-webkit-border-top-right-radius:0px;\n\tborder-top-right-radius:0px;\n\n\t-moz-border-radius-topleft:0px;\n\t-webkit-border-top-left-radius:0px;\n\tborder-top-left-radius:0px;\n}.myTableEvents table{\n    border-collapse: collapse;\n        border-spacing: 0;\n\twidth:100%;\n\theight:100%;\n\tmargin:0px;padding:0px;\n}.myTableEvents tr:last-child td:last-child {\n\t-moz-border-radius-bottomright:0px;\n\t-webkit-border-bottom-right-radius:0px;\n\tborder-bottom-right-radius:0px;\n}\n.myTableEvents table tr:first-child td:first-child {\n\t-moz-border-radius-topleft:0px;\n\t-webkit-border-top-left-radius:0px;\n\tborder-top-left-radius:0px;\n}\n.myTableEvents table tr:first-child td:last-child {\n\t-moz-border-radius-topright:0px;\n\t-webkit-border-top-right-radius:0px;\n\tborder-top-right-radius:0px;\n}\n.myTableEvents tr:last-child td:first-child{\n\t-moz-border-radius-bottomleft:0px;\n\t-webkit-border-bottom-left-radius:0px;\n\tborder-bottom-left-radius:0px;\n}\n\n.myTableEvents tr:hover td{\n\n}\n.myTableEvents tr:nth-child(odd){ background-color:#f2f2f2; }\n.myTableEvents tr:nth-child(even)    { background-color:#ffffff; }\n.myTableEvents td{\n\n\tborder:1px solid #cccccc;\n\tborder-width:0px 1px 1px 0px;\n\ttext-align:left;\n\tfont-size:15px;\n\tfont-family:Arial;\n\tcolor:#666666;\n\n}\n.myTableEvents tr:last-child td{\n\tborder-width:0px 1px 0px 0px;\n}\n.myTableEvents tr td:last-child{\n\tborder-width:0px 0px 1px 0px;\n}\n.myTableEvents tr:last-child td:last-child{\n\tborder-width:0px 0px 0px 0px;\n}\n\n\/*\n.myTableEvents tr:hover td{\n\tbackground:-o-linear-gradient(bottom, #ff3333 5%, #ff3333 100%);\tbackground:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff3333), color-stop(1, #ff3333) );\n\tbackground:-moz-linear-gradient( center top, #ff3333 5%, #ff3333 100% );\n\tfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff3333", endColorstr="#ff3333");\tbackground: -o-linear-gradient(top,#ff3333,#ff3333);\n\n\tbackground-color:#ffe5e5;\n}*\/\n\n.myTableEvents tr:first-child td:first-child{\n\tborder-width:0px 0px 1px 0px;\n}\n.myTableEvents tr:first-child td:last-child{\n\tborder-width:0px 0px 1px 1px;\n}<\/code><\/pre>\n
and I use this code in EM backend header<\/p>\n
<table class="myTableEvents" >\n    <thead>\n        <tr>\n\t\t<th width="20%"><\/th>\n\t\t<th width="80%"><\/th>\n\t<\/tr>\n   \t<\/thead>\n    <tbody><\/code><\/pre>\n
and<\/p>\n
<tr><div id="event_container" >\n      <td>\n               #_EVENTIMAGE{200,200}\n      <\/td>\n            <td>\n               <div id="event_title">#_EVENTLINK<\/div>\n\n               <div id="event_info"> #_EVENTDATES, #_EVENTTIMES, #_LOCATIONADDRESS, #_LOCATIONNAME <\/div>\n<div id="booking_button">#_BOOKINGBUTTON <\/div>\n <div id="list_attendees">#_ATTENDEESLIST<\/div>\n            <\/td>\n<\/div><\/tr><\/code><\/pre>\n
in the body.<\/p>\n
I really need some help to resolve this css visualisation problem.
\nI think that some problem is due to pre tag, but I don’t know where to remove it creation.<\/p>\n
My aim is having an event list with the format of the second picture<\/p>\n
https:\/\/www.dayroma.it\/wp-content\/uploads\/2016\/03\/filter-2.jpg<\/a><\/p>\n
with a filter by today and tomorrow date, without blank space you see in the bottom.<\/strong><\/p>\n
Sorry if I already asked,
\nThank you everybody.<\/p>\n","protected":false},"template":"","class_list":["post-7181015","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/7181015","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/7181015\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=7181015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}