The Basic Meeting List Toolbox

The [[BMLT_SIMPLE]] Shortcode Example 2

In this example, we’ll do exactly the same thing as in the first example, but with block (<div>) elements. I’ll skip the interim steps, and just show you the results (and the CSS used to achieve them).

The shortcode we’re using looks like this: [[bmlt_simple(1339674838##-##switcher=GetSearchResults&services=1045&block_mode=1)]].

Wappingers, NY, 12590
Keep Hope Alive
7:30 PM
Monday
O,B
Yorktown Heights, NY, 10598, USA
Yorktown Recovery
7:30 PM
Monday
C,B,WC
Katonah, NY, 10536, USA
End of the Road
7:45 PM
Tuesday
C,St,TW,WC
Yorktown Heights, NY, 10598, USA
Yorktown Recovery
7:30 PM
Thursday
C,St,WC
Hopewell Junction, NY, 12533, USA
Searching For Serenity
7:45 PM
Thursday
C,D,St
Pawling, NY, 12594
Practicing Principles In Pawling
11:00 AM
Saturday
SD,St,BK
Pleasantville, NY, 10570, USA
A Better Way of Living
7:30 PM
Saturday
C,B,CL,LC
Katonah, NY, 10536
Just for Tonight
9:00 PM
Saturday
JT,SD

The CSS for this is a bit more involved than for the <table>-based display:

div#bmlt_simple_shortcode_demo_div span.c_comdef_search_results_province,
div#bmlt_simple_shortcode_demo_div span.c_comdef_search_results_nation,
div#bmlt_simple_shortcode_demo_div span.c_comdef_search_results_zip
{
    display:none;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_format_div
{
    text-align:right;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meetings_div div.bmlt_alt_0
{
    background-color:#efefef;
}

div#bmlt_simple_shortcode_demo_div div
{
    font-family:"Papyrus";
    font-size:small;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_div
{
    display:table;
    width:100%;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_div div
{
    float:left;
    padding:0.5em;
    display:table;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_town_div
{
    width:10%;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_town_div
{
    width:10%;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_town_div
{
    width:10%;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_name_div
{
    width:20%;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_time_div
{
    width:5%;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_weekday_div
{
    width:5%;
}
    
div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_address_div
{
    width:30%;
}

div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_format_div
{
    width:10%;
}

The display:table; rules tell the <div> elements to react to their content; not their context. That means they won’t let the content overflow, like regular <div> (display:block;) elements behave.