SPB Tabs issue

[No Dinx]

I have an SPB tabs in my page. If I add a blank spacer to my tab content, it breaks my layout. Screenshots show a blank spacer between “schedule” text block and two buttons. Next screenshot shows what happens if I update the front-end page.

Third screenshot shows what it looks like using revision history.

Swift Framework v2.2

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Why do you need to insert the blank spacer? Please provide me login detail to check and resolve the issue.
Thanks
Mohammad

[No Dinx]

I am working in MAMP Pro locally without dynamic dns 🙁

I like to use as little custom css as I can. Normally would use a blank spacer versus a custom class and css to add margin-bottom. However, I think your reply answered my question by making me think: thanks to Swift Framework 2.x, we can now control margin+padding independently.

It’s a little strange to me that adding a blank spacer into the tab content causes this. Posting the page contents below for further investigation if so desired:

[spb_raw_html width="1/1" el_position="first last"]JTNDc3R5bGUlM0UlMEEuc3BiX3RhYnMlMjAubmF2LXRhYnMlMjAlN0JkaXNwbGF5JTNBJTIwZmxleCUzQiUyMGp1c3RpZnktY29udGVudCUzQSUyMHNwYWNlLWJldHdlZW4lM0IlN0QlMEElMEEuc3BiX3RhYnMlMjAubmF2LXRhYnMlMjBsaSUyMCU3QmZsZXglM0ElMjAxJTIwMSUyMGF1dG8lM0IlMjB0ZXh0LWFsaWduJTNBJTIwY2VudGVyJTNCJTdEJTBBJTBBLnNwYl90YWJzJTIwLm5hdi10YWJzJTIwbGklMjBhJTIwJTdCdGV4dC10cmFuc2Zvcm0lM0ElMjB1cHBlcmNhc2UlM0IlN0QlMEElM0MlMkZzdHlsZSUzRQ==[/spb_raw_html] [spb_row element_name="Row" wrap_type="content-width" row_bg_type="image" color_row_height="content-height" row_style="light" bg_image="74" bg_type="cover" parallax_image_height="content-height" parallax_image_movement="stellar" parallax_image_speed="0.5" bg_video_loop="yes" parallax_video_height="window-height" row_top_style="none" row_bottom_style="none" parallax_video_overlay="none" row_overlay_opacity="0" row_padding_vertical="0" row_padding_horizontal="0" row_margin_vertical="0" remove_element_spacing="no" vertical_center="false" inner_column_height="col-natural" row_expanding="no" row_animation="none" row_animation_delay="0" minimize_row="no" simplified_controls="yes" custom_css="margin-top: 0px;margin-bottom: 0px;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 0px;padding-left: 0px;padding-right: 0px;padding-bottom: 0px;" border_styling_global="default" width="1/1" el_position="first last"] [spb_column col_animation="none" col_animation_delay="0" col_el_class="pmb0" col_bg_type="cover" col_parallax_image_movement="fixed" col_parallax_image_speed="0.5" col_padding="0" simplified_controls="yes" custom_css_percentage="yes" padding_vertical="5" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0%;margin-bottom: 0%;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 5%;padding-left: 0%;padding-right: 0%;padding-bottom: 5%;" border_styling_global="default" width="1/1" el_position="first last"] [spb_text_block animation="fadeInUp" animation_delay="350" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 0px;padding-left: 0px;padding-right: 0px;padding-bottom: 0px;" border_size="0" border_styling_global="default" el_class="mb0" width="2/3" el_position="first"]
<h1 class="mt0 mb0"><span style="color: #ffffff;">FAR WESTERN NATIONAL QUALIFIER</span></h1>
[/spb_text_block] [spb_text_block animation="fadeInUp" animation_delay="450" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 0px;padding-left: 0px;padding-right: 0px;padding-bottom: 0px;" border_size="0" border_styling_global="default" el_class="mb0" width="1/3" el_position="last"]
<p style="text-align: right;">Reno-Sparks Convention Center | Reno, NV</p>
<p style="text-align: right;">16-18 April, 22-24 April</p>
[/spb_text_block] [/spb_column] [/spb_row] [spb_row element_name="Row" wrap_type="content-width" row_bg_type="color" color_row_height="content-height" bg_type="cover" parallax_image_height="content-height" parallax_image_movement="fixed" parallax_image_speed="0.5" bg_video_loop="yes" parallax_video_height="window-height" row_top_style="none" row_bottom_style="none" parallax_video_overlay="none" row_overlay_opacity="0" row_padding_vertical="0" row_padding_horizontal="0" row_margin_vertical="0" remove_element_spacing="no" vertical_center="true" inner_column_height="col-natural" row_expanding="no" row_animation="none" row_animation_delay="0" minimize_row="no" simplified_controls="yes" custom_css="margin-top: 0px;margin-bottom: 0px;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 0px;padding-left: 0px;padding-right: 0px;padding-bottom: 0px;" border_styling_global="default" el_class="mt0 only-content" width="1/1" el_position="first last"] [spb_tabs tabs_type="standard" center_tabs="no" width="1/1" el_position="first last"] [spb_tab title="About" icon="" id="About"] [spb_text_block element_name="Divisions" title="Divisions" animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 0px;padding-left: 0px;padding-right: 0px;padding-bottom: 0px;" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]

Far Westerns used to have Open and Club divisions.

Open gave 3 open bids and was very, very strong competition – approximately only 10% of the teams that play in the Far Western enter this division.

Club gave out a National and an American bid – 90% of the teams at FW participated in this division.

Many years ago, some of the qualifiers started splitting the club division into a National Division and an American Division. Each division had one bid and the teams picked which one they wanted to try for.

Since that was the case for most of the tournaments, USAV decided to make it the norm for all qualifiers. And, in addition to this they changed the National Bid given at Qualifiers to be called a USA bid. American remained the same.

So, now you have Open, USA and American. In theory, Open teams should be better than USA teams and USA teams should be better than American teams – but since the clubs decide where they will play, this is not law.

Now, in addition to these divisions, we have decided to add a non-bid awarding division called the No Dinx Division. This allows teams that have waivered players, etc and may not have the same requirements as teams playing in the bid awarding divisions which allows more teams the opportunity to experience the Far Western. It also means that the No Dinx Division does not have as strict format and tie breaking guidelines making it a an opportunity for teams to experience Far Westerns without all the requirements that may be limiting.

[/spb_text_block] [/spb_tab] [spb_tab title="Dates" icon="" id="Dates"] [spb_text_block element_name="Deadlines" title="Deadlines" animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]

This is a text block. Click the edit button to change this text.

[/spb_text_block] [spb_text_block element_name="Tryouts/Combines" title="Tryouts/Combines" animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]

This is a text block. Click the edit button to change this text.

[/spb_text_block] [spb_text_block element_name="Main Event" title="Main Event" animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]

This is a text block. Click the edit button to change this text.

[/spb_text_block] [spb_text_block element_name="Future Events" title="Future Events" animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]

This is a text block. Click the edit button to change this text.

[/spb_text_block] [/spb_tab] [spb_tab title="Format" icon="" id="Format"] [spb_text_block animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]

This is a text block. Click the edit button to change this text.

[/spb_text_block] [/spb_tab] [spb_tab title="Schedule" icon="" id="Schedule"] [spb_text_block element_name="Schedule" title="Schedule" animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="yes" padding_vertical="5" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0%;margin-bottom: 0%;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 5%;padding-left: 0%;padding-right: 0%;padding-bottom: 5%;" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]

The entire tournament schedule will be posted online. Be sure to check the website just before departing for any last minute format changes due to teams being dropped or added. If you would like printed copies of the format or schedule, please take the time to print these off from home. The NCVA will not be providing printed materials at the tournament in our effort to Go Green!

[/spb_text_block] [spb_button button_text="Online Schedule (4/16 - 4/18)" button_size="standard" button_colour="accent" button_type="standard" rounded="yes" button_dropshadow="no" button_link="http://advancedeventsystems.com/EventResults/%28S%280rqtjzjyuqxr0v55nmdk1ljd%29%29/Home.aspx?e=PTAwMDAwMDgzNzI90" button_target="_blank" align="left" animation="none" animation_delay="0" width="1/4" el_position="first"] [spb_button button_text="Online Schedule (4/22 - 4/24)" button_size="standard" button_colour="accent" button_type="standard" rounded="yes" button_dropshadow="no" button_link="https://www.advancedeventsystems.com/EventResults/(S(owjhhwzst1ztjaaq3kkcyuap))/Home.aspx?e=PTAwMDAwMDgzNzM90" button_target="_blank" align="left" animation="none" animation_delay="0" width="1/4" el_position="last"] [/spb_tab] [spb_tab title="Info" icon="" id="Info"] [spb_text_block animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]

This is a text block. Click the edit button to change this text.

[/spb_text_block] [/spb_tab] [spb_tab title="Results" icon="" id="Results"] [spb_text_block element_name="2016 Tournament Results" title="2016 Tournament Results" animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 0px;padding-left: 0px;padding-right: 0px;padding-bottom: 0px;" border_size="0" border_styling_global="default" el_class="four-col" width="1/1" el_position="first last"]
<ul>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%20Week%201%20-%2012%20Amer.pdf">12 American</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%20Week%201%20-%2012%20Nat.pdf">12 National</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%20Week%201%20-%2012%20ND.pdf">12 No Dinx</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%20Week%201%20-%2012%20Amer.pdf">13 American</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%20Week%201%20-%2012%20ND.pdf">13 No Dinx</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%20Week%201%20-%2012%20O.pdf">13 Open</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%20Week%201%20-%2012%20Amer.pdf">14 American</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%20Week%201%20-%2012%20ND.pdf">14 No Dinx</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%20Week%201%20-%2012%20O.pdf">14 Open</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%20Week%201%20-%2012%20USA.pdf">14 USA</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%20Week%201%20-%2012%20Amer.pdf">15 American</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%20Week%201%20-%2012%20ND.pdf">15 No Dinx</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%20Week%201%20-%2012%20USA.pdf">15 USA</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%20Week%201%20-%2012%20O.pdf">15 Open</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%2016A.pdf">16 American</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%2016ND.pdf">16 No Dinx</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%2016O.pdf">16 Open</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%2016U.pdf">16 USA</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%2017A.pdf">17 American</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%2017O.pdf">17 Open</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%2017U.pdf">17 USA</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%2018A.pdf">18 American</a></li>
 	<li><a href="http://www.ncva.com/downloads/2016%20FW%20Results%20-%2018ND.pdf">18/17 No Dinx</a></li>
</ul>
[/spb_text_block] [/spb_tab] [/spb_tabs] [/spb_row] [spb_row element_name="Row" wrap_type="content-width" row_bg_type="color" row_bg_color="#1069b3" color_row_height="content-height" row_style="light" bg_type="cover" parallax_image_height="content-height" parallax_image_movement="fixed" parallax_image_speed="0.5" bg_video_loop="yes" parallax_video_height="window-height" row_top_style="none" row_bottom_style="none" parallax_video_overlay="none" row_overlay_opacity="0" row_padding_vertical="0" row_padding_horizontal="0" row_margin_vertical="0" remove_element_spacing="yes" vertical_center="true" inner_column_height="col-natural" row_expanding="no" row_animation="none" row_animation_delay="0" minimize_row="no" simplified_controls="yes" custom_css="margin-top: 0px;margin-bottom: 0px;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 0px;padding-left: 0px;padding-right: 0px;padding-bottom: 0px;" border_styling_global="default" width="1/1" el_position="first last"] [spb_blank_spacer height="30px" width="1/1" el_position="first last"] [spb_text_block animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 0px;padding-left: 0px;padding-right: 0px;padding-bottom: 0px;" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]
<h2 style="text-align: center;"><span style="color: #ffffff;">EVENT SPONSORS</span></h2>
[/spb_text_block] [spb_image image="110" image_size="full" image_width="200" frame="noframe" caption_pos="hover" remove_rounded="yes" fullwidth="no" overflow_mode="none" link_target="_self" lightbox="no" intro_animation="none" animation_delay="200" width="1/4" el_position="first"] [spb_image image="114" image_size="full" image_width="200" frame="noframe" caption_pos="hover" remove_rounded="yes" fullwidth="no" overflow_mode="none" link_target="_self" lightbox="no" intro_animation="none" animation_delay="200" width="1/4"] [spb_image image="113" image_size="full" image_width="150" frame="noframe" caption_pos="hover" remove_rounded="yes" fullwidth="no" overflow_mode="none" link_target="_self" lightbox="no" intro_animation="none" animation_delay="200" width="1/4"] [spb_image image="112" image_size="full" image_width="200" frame="noframe" caption_pos="hover" remove_rounded="yes" fullwidth="no" overflow_mode="none" link_target="_self" lightbox="no" intro_animation="none" animation_delay="200" width="1/4" el_position="last"] [/spb_row] [spb_row element_name="Row" wrap_type="full-width" row_bg_type="color" color_row_height="content-height" bg_type="cover" parallax_image_height="content-height" parallax_image_movement="fixed" parallax_image_speed="0.5" bg_video_loop="yes" parallax_video_height="window-height" row_top_style="none" row_bottom_style="none" parallax_video_overlay="none" row_overlay_opacity="0" row_padding_vertical="0" row_padding_horizontal="0" row_margin_vertical="0" remove_element_spacing="yes" vertical_center="false" inner_column_height="col-natural" row_expanding="no" row_animation="none" row_animation_delay="0" minimize_row="no" simplified_controls="yes" custom_css="margin-top: 0px;margin-bottom: 0px;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 0px;padding-left: 0px;padding-right: 0px;padding-bottom: 0px;" border_styling_global="default" width="1/1" el_position="first last"] [spb_text_block animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;border-top: 0px default ;border-left: 0px default ;border-right: 0px default ;border-bottom: 0px default ;padding-top: 0px;padding-left: 0px;padding-right: 0px;padding-bottom: 0px;" border_size="0" border_styling_global="default" el_class="db" width="1/1" el_position="first last"]

[wpv-view name="tournament-page-event-map"]

[/spb_text_block] [/spb_row]

[David Martin – Support]

Hi,

What version of the Swift Framework plugin do you have?

– Rather than using a blank spacer, please use the built in design options: See Screencast http://d.pr/i/16djt

Thanks.

[No Dinx]

Hi David,

Using blank spacers is an old habit from pre-v2 Swift Framework – Now that post-v2 is more stable I am using the design options.

I am using Swift Framework v2.2.0 where this bug is occurring.

Thanks,
Eric

[David Martin – Support]

Great, glad you got it sorted Eric.

Thanks.

[juliankhor]

I am having the same exact issue.
Where is the ” build in design options” you are talking about?. Some elements does not have this option. In this cases, can I not be able to use a blank spacer ?,
Please provide steps on how to add a spacer inside the tab element please. Much appreciated

Julian

[Rui Guerreiro – SUPPORT]

Hi,

You can find the design options in the Row, column and text block.

So in this case if you want to use in a different asset you just have to put it inside a row and adjust the design options of the row.

https://www.dropbox.com/s/ode4f191pyvbl3l/Screenshot%202016-05-27%2010.39.34.png?dl=0

Hope it helps.

-Rui