Shortcode tabs vertical, wrong position in one half column

Topic Resolution: Resolved

Closed
Sanschnei
Spectator

July 30, 2015 at 10:55 am #19377

Hi there,

it’s me again 🙂

I have a problem with the vertical tabs that are not looking good when I position it in a half column.

http://screenshot.co/#!/50dc64a24d

In the responsive layout it looks great, but not in the desktop layout. I do not have any custom css with tabs or columns.

Here is the shortcode

[one_half last=”no”][imageframe lightbox=”no” style=”glow” bordercolor=”” bordersize=”0px” stylecolor=”” align=”none” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″][/imageframe][/one_half]

[one_half last=”yes”]Die Sehenswürdigkeiten in Horumersiel-Schillig sind Yachthafen, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor[t4p_tabs layout=”vertical” backgroundcolor=”” inactivecolor=””][t4p_tab title=”Nordseeheilbad”]Inhalt zur Stadt Horumersiel und Schillig Rasenstrand Lorem ipsum dolor sit amet, [/t4p_tab]
[t4p_tab title=”Yachthafen”]Inhalt Yachthafen Lorem ipsum dolor sit amet, [/t4p_tab]
[t4p_tab title=”Küstenwachboot”]Inhalt Küstenwachboot Lorem ipsum dolor sit amet, [/t4p_tab]
[t4p_tab title=”Kolk”]Inhalt Kolk Lorem ipsum dolor sit amet, c[/t4p_tab]
[/t4p_tabs]
[/one_half]

html code

<span id="imageframe-1" class="imageframe imageframe-glow"><img class="alignnone wp-image-408 size-full" src="http://nordsee-schillig.de/wp-content/uploads/2015/07/Leuchtturm.jpg" alt="Leuchtturm" width="1000" height="750" /></span></div> <div class="one_half last">Die Sehenswürdigkeiten in Horumersiel-Schillig sind Yachthafen, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<style type='text/css'> #tabs-1,#tabs-1.tabs-vertical .tabs,#tabs-1.tabs-vertical .tab_content{border-color: !important;} body #tabs-1.shortcode-tabs .tab-hold .tabs li,body.dark #sidebar .tab-hold .tabs li{border-right:1px solid transparent !important;} body #tabs-1.shortcode-tabs .tab-hold .tabs li:last-child{border-right:0 !important;} body.dark #main #tabs-1 .tab-hold .tabs li a{background: !important;border-bottom:0 !important;color:;} body.dark #main #tabs-1 .tab-hold .tabs li a:hover{background: !important;border-bottom:0 !important;color:#fff!important;} body #main #tabs-1 .tab-hold .tabs li.active a,body #main #tabs-1 .tab-hold .tabs li.active{color:#fff!important;background: !important;border-bottom:0 !important;} #sidebar .tab-hold .tabs li.active a{border-top-color: !important;} </style><div id="tabs-1" class="tab-holder shortcode-tabs clearfix tabs-vertical"><div class="tab-hold tabs-wrapper"><ul id="tabs" class="tabset tabs"><li><a href="#tab2a0b059a">Nordseeheilbad</a></li><li><a href="#tab158b03fc">Yachthafen</a></li><li><a href="#tab39ba06dc">Küstenwachboot</a></li><li><a href="#tab03c00192">Kolk</a></li></ul><div class="tab-box tabs-container"><div id="tab2a0b059a" class="tab tab_content">Inhalt zur Stadt Horumersiel und Schillig Rasenstrand Lorem ipsum dolor sit amet, </div><div id="tab158b03fc" class="tab tab_content">Inhalt Yachthafen Lorem ipsum dolor sit amet, </div><div id="tab39ba06dc" class="tab tab_content">Inhalt Küstenwachboot Lorem ipsum dolor sit amet, </div><div id="tab03c00192" class="tab tab_content">Inhalt Kolk Lorem ipsum dolor sit amet, c</div></div></div></div><br /> </div><div class="clearboth"></div> <div class="clearboth"></div>

Thanks for your help.
Sandra

Denzel Chia
Moderator
Posts: 2656

July 31, 2015 at 7:50 am #19426

Hi,

With reference to the following demo page, http://demo.theme4press.com/evolve/elements/

The vertical tabs shortcode is as follows.





"Tab
"Tab
"Tab


Duis vitae lectus dui. Vestibulum lobortis aliquam nisl. Vivamus feugiat, sem vel tincidunt suscipit, tellus lectus lacinia enim, quis pellentesque risus augue in felis. Praesent posuere ut libero sed pulvinar. Phasellus eget magna elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit dui vel metus lobortis tristique. Morbi tristique sem velit, ac aliquam purus consectetur quis.
Duis vitae lectus dui. Vestibulum lobortis aliquam nisl. Vivamus feugiat, sem vel tincidunt suscipit, tellus lectus lacinia enim, quis pellentesque risus augue in felis. Praesent posuere ut libero sed pulvinar. Phasellus eget magna elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit dui vel metus lobortis tristique. Morbi tristique sem velit, ac aliquam purus consectetur quis.
Duis vitae lectus dui. Vestibulum lobortis aliquam nisl. Vivamus feugiat, sem vel tincidunt suscipit, tellus lectus lacinia enim, quis pellentesque risus augue in felis. Praesent posuere ut libero sed pulvinar. Phasellus eget magna elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit dui vel metus lobortis tristique. Morbi tristique sem velit, ac aliquam purus consectetur quis.

It’s not the t4p_tabs, perhaps this will fix your issue.
Do not allow empty space, as WordPress may insert p tags or br tags and break the code.

The login details you provided on this thread https://theme4press.com/support/topic/change-position-of-button-in-tagline-box-reading-box/ is not administrator access, so I did not try out the shortcode for you.

One suggestion. Please install a localhost WordPress setup on your computer, in this setup you can use Evolve Plus Theme and import the demo content. You will be able to use it as an example.

Hope this helps.

Thanks!

Sanschnei
Spectator
Posts: 31

July 31, 2015 at 9:21 am #19434

Hi Denzel,

now it looks great, thanks a lot!

I got the shortcode from the wysiwyg editor

http://screenshot.co/#!/a1016d4351
http://screenshot.co/#!/3985290a5b

Isn’t that the right way to add it?
I try your suggestion to install the localhost.

Thanks.
Sandra

Sanschnei
Spectator
Posts: 31

July 31, 2015 at 9:22 am #19435

This reply has been marked as private.

Sanschnei
Spectator
Posts: 31

July 31, 2015 at 10:09 am #19438

Hi Denzel,

your shortcode is ok, if I didn’t fill in my content. The title of the tabs are too long.

Short title
http://screenshot.co/#!/03dc706a86

Long title
http://screenshot.co/#!/26feac1f79

Are there any css styles with a maximum width?

Sandra

Sanschnei
Spectator
Posts: 31

July 31, 2015 at 10:42 am #19439

Ok now I am absolutely lost. I changed the text of the tabs and it doesn’t look good again??

http://screenshot.co/#!/c05c14b3fa

I have no empty spaces or paragraphs or br inside.

Here ist the html code

I have updated on wordpress 4.2.3

I think it’s not a chrome problem, as it looks the same in firefox.

Sanschnei
Spectator
Posts: 31

July 31, 2015 at 4:09 pm #19445

Hi there,

I have solved the text problem by myself. But the title is still not fine.

Sandra

Denzel Chia
Moderator
Posts: 2656

July 31, 2015 at 8:33 pm #19449

Hi,

I see that you have switched to horizontal tabs, perhaps this is better?

Thanks

Sanschnei
Spectator
Posts: 31

July 31, 2015 at 8:40 pm #19450

Hi Denzel,

Yes, I spend too much time on the vertical tabs, the horizontal ones are as well fine. But the right margin is missing. Do you have any solutions for that?

Sandra

Denzel Chia
Moderator
Posts: 2656

July 31, 2015 at 8:58 pm #19451

Hi,

I added the following for you.

.tabset.tabs { border-right: 1px solid #e0dddd !important; }

http://share.pho.to/9buOz/6a/original

Thanks!

The topic Shortcode tabs vertical, wrong position in one half column is closed to new replies

Theme4Press

Theme4Press

Menu

Accepted Payments

Secured Website

Follow Us

Newsletter