Tab element - panels spread over the entire width of the page

Support
#1

Hello,

In a tab element with the tab items being on the left, how can I have the panels spread over the entire width of the page? Note that I am using columns within the content.

URL: https://neowebsite.io/

Thanks,
Antoine

#2

Hi Antione,

Since the panel contaner has no self flex option then please add this CSS to Theme Options > CSS

.x-tabs-panels {
    flex: 1 0 auto;
}

Hope this helps.

#3

Thank you for your help!

  1. I noticed that the last tab is not aligned with the other ones. I could not find out what the reason might be. Could you please help me to solve it? I noticed that this is always and only the last one, regardless of the number of tabs.

URL: https://neowebsite.io/

  1. Is is possible to have some 2 columns content above some 3 columns content within one tab? I tried it using the [column] shorcode but it doesn’t work correctly. I must be doing something incorrectly.

Thanks,
Antoine

#4

Hi Antione,

  1. Please add this CSS as well,
.x-tabs.left .x-tabs-list ul > li > button {
margin-right: 0px !important;
}
  1. Please group your columns with row (eg. [row]). Else, the layout will consider the new column as a member of the same row.

Thanks!

#5

  1. Perfect, thanks.

  2. I tried this but it doesn’t work correctly. Here is my code:

    [row][column type=“1/2”]

    Idéal pour une présence en ligne simple et claire

    [/column]
    [column type=“1/2” last=“true”][button size=“mini” href="#example"]Contactez l’équipe commerciale[/button][/column][/row]

    [row]

    Pour les marketeurs et les équipes de marketing en expansion. Mettez en place une stratégie marketing efficace grâce à une plateforme regroupant formulaires de capture de leads, suivi des contacts et e-mail marketing.

    [/row]

    [row][column type=“1/3”]
      Page d’accueil
    [gap size=“0.5em”]
      Page d’accueil
    [gap size=“0.5em”]
      Page d’accueil
    [gap size=“0.5em”]
      [extra href="" title=“Yeah, tooltip time!” info=“popover” info_place=“top” info_trigger=“hover” info_content=“Place a little extra content in here for informational purposes.” style=“color:#000 !important; border-bottom: 1px dotted #8c8c8c;”] Place your content here [/extra]
    [gap size=“0.5em”]
    <i class=“x-icon x-icon-times-circle” data-x-icon=“” aria-hidden="true"style=“color:#d3d3d3; font-size:22px;”>  Page d’accueil
    [gap size=“0.5em”]
    [/column]

    [column type=“1/3”]   Page d’accueil
    [gap size=“0.5em”]
      Page d’accueil
    [gap size=“0.5em”]
      Page d’accueil
    [gap size=“0.5em”]
      [extra href="" title=“Yeah, tooltip time!” info=“popover” info_place=“top” info_trigger=“hover” info_content=“Place a little extra content in here for informational purposes.” style=“color:#000 !important; border-bottom: 1px dotted #8c8c8c;”] Place your content here [/extra]
    [gap size=“0.5em”]
    <i class=“x-icon x-icon-times-circle” data-x-icon=“” aria-hidden="true"style=“color:#d3d3d3; font-size:22px;”>  Page d’accueil
    [gap size=“0.5em”][/column]

    [column type=“1/3” last=“true”]   Page d’accueil
    [gap size=“0.5em”]
      Page d’accueil
    [gap size=“0.5em”]
      Page d’accueil
    [gap size=“0.5em”]
      [extra href="" title=“Yeah, tooltip time!” info=“popover” info_place=“top” info_trigger=“hover” info_content=“Place a little extra content in here for informational purposes.” style=“color:#000 !important; border-bottom: 1px dotted #8c8c8c;”] Place your content here [/extra]
    [gap size=“0.5em”]
    <i class=“x-icon x-icon-times-circle” data-x-icon=“” aria-hidden="true"style=“color:#d3d3d3; font-size:22px;”>  Page d’accueil
    [gap size=“0.5em”][/column][/row]

What do I need to change to make it work? It currently looks like this:

#6

Hello @Lecoqdigital,

And do not leave a new line or line for the row or column shortcodes.
Please update your code and use this:

[row][column type="1/2"]<h4>Idéal pour une présence en ligne simple et claire</h4>[/column][column type="1/2" last="true"][button size="mini" href="#example"]Contactez l'équipe commerciale[/button][/column][/row][row]<p>Pour les marketeurs et les équipes de marketing en expansion. Mettez en place une stratégie marketing efficace grâce à une plateforme regroupant formulaires de capture de leads, suivi des contacts et e-mail marketing.</p>[/row][row][column type="1/3"] 
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; [extra href="" title="Yeah, tooltip time!" info="popover" info_place="top" info_trigger="hover" info_content="Place a little extra content in here for informational purposes." style="color:#000 !important; border-bottom: 1px dotted #8c8c8c;"] Place your content here [/extra]
[gap size="0.5em"]
<i class="x-icon x-icon-times-circle" data-x-icon="" aria-hidden="true"style="color:#d3d3d3; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
[/column][column type="1/3"] <i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; [extra href="" title="Yeah, tooltip time!" info="popover" info_place="top" info_trigger="hover" info_content="Place a little extra content in here for informational purposes." style="color:#000 !important; border-bottom: 1px dotted #8c8c8c;"] Place your content here [/extra]
[gap size="0.5em"]
<i class="x-icon x-icon-times-circle" data-x-icon="" aria-hidden="true"style="color:#d3d3d3; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"][/column][column type="1/3" last="true"] <i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; [extra href="" title="Yeah, tooltip time!" info="popover" info_place="top" info_trigger="hover" info_content="Place a little extra content in here for informational purposes." style="color:#000 !important; border-bottom: 1px dotted #8c8c8c;"] Place your content here [/extra]
[gap size="0.5em"]
<i class="x-icon x-icon-times-circle" data-x-icon="" aria-hidden="true"style="color:#d3d3d3; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"][/column][/row]

Please let us know how it goes.

#7

Thank you for the code you provided. I used it but it does unfortunately not solve the problem. Any idea what I could try to fix the issue? Here is how it looks like:

URL: https://neowebsite.io/

#8

Hello @Lecoqdigital,

Please remove [row][/row] shortcodes and replace it with [container][/container].

[container][column type="1/2"]<h4>Idéal pour une présence en ligne simple et claire</h4>[/column][column type="1/2" last="true"][button size="mini" href="#example"]Contactez l'équipe commerciale[/button][/column][/container][container]<p>Pour les marketeurs et les équipes de marketing en expansion. Mettez en place une stratégie marketing efficace grâce à une plateforme regroupant formulaires de capture de leads, suivi des contacts et e-mail marketing.</p>[/container][container][column type="1/3"] 
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; [extra href="" title="Yeah, tooltip time!" info="popover" info_place="top" info_trigger="hover" info_content="Place a little extra content in here for informational purposes." style="color:#000 !important; border-bottom: 1px dotted #8c8c8c;"] Place your content here [/extra]
[gap size="0.5em"]
<i class="x-icon x-icon-times-circle" data-x-icon="" aria-hidden="true"style="color:#d3d3d3; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
[/column][column type="1/3"] <i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; [extra href="" title="Yeah, tooltip time!" info="popover" info_place="top" info_trigger="hover" info_content="Place a little extra content in here for informational purposes." style="color:#000 !important; border-bottom: 1px dotted #8c8c8c;"] Place your content here [/extra]
[gap size="0.5em"]
<i class="x-icon x-icon-times-circle" data-x-icon="" aria-hidden="true"style="color:#d3d3d3; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"][/column][column type="1/3" last="true"] <i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"]
<i class="x-icon x-icon-check-circle" data-x-icon="" aria-hidden="true" style="color:green; font-size:22px;"></i>&nbsp; [extra href="" title="Yeah, tooltip time!" info="popover" info_place="top" info_trigger="hover" info_content="Place a little extra content in here for informational purposes." style="color:#000 !important; border-bottom: 1px dotted #8c8c8c;"] Place your content here [/extra]
[gap size="0.5em"]
<i class="x-icon x-icon-times-circle" data-x-icon="" aria-hidden="true"style="color:#d3d3d3; font-size:22px;"></i>&nbsp; Page d'accueil
[gap size="0.5em"][/column][/container]

Please let us know how it goes.

#9

Thank you, it solves the problem.

You explained me that I should use the following code in order to have the columns using the entire width of the page: .x-tabs-panels { flex: 1 0 auto;}

The problem is that you can’t see the entire content, depending on the size of the screen, as it goes above the end of the page on the right side. How can I change the code to fix this?

Thanks,
Antoine

#10

Hi Antoine,

The remove this custom CSS:

.x-tabs-panels {
    flex: 1 0 auto;
}

Then remove the right padding & right margin of tab panel:

Hope it helps :slight_smile:

#11

Thank you!

#12

You’re welcome.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.