Tour section content rows

[juliewaterhouse]

You’ll need to log in to see the page.

http://comingclean.ca/sarahs-eat-clean-diet/

On this page, I’m using a Tour with several sections. Within some of the sections, I want to have some more complex layout, so I have more than one row. In the simplest case I can boil this down to to illustrate the issue, take a look at the last tab in the list, “Swift Test.” I have added two full width text blocks. The problem is that the height of the first one is too big, causing the second one to display only after the height of all the tabs.

Looking at the code inspector, I see that the first container within the active tab pane takes on the full height of the tour so that the second element that’s placed below starts to display just below the last tab. All subsequent rows are sized correctly, and still appear properly within the tab pane (ie they display only when that tab is selected).

Is there any custom CSS I can add to correct the height of that first row?

Thanks for any help or insight!

[Rui Guerreiro – SUPPORT]

Hi,

Just checked what you mean.
Can you try first to add your content then we adjust the css.

Thanks

-Rui

[juliewaterhouse]

In the same Tour, there are several examples where I’ve added content, and it’s not working. The first to show the issue is the fourth tab down, titled “Clean Fruits and Vegetables.”

[Kyle – SUPPORT]

Hi

Full width text boxes are not supported inside tour or tabs assets, only normal text boxes

– Kyle

[juliewaterhouse]

Hi Kyle,

I didn’t think I was trying to do a full width text box inside the tour. In fact, I’m not quite sure what you mean. For the most basic case that didn’t work, the tour comes with a text box inside the tab pane, and I just added a second one underneath it. That second one is not displayed immediately below the first. Instead, it’s displayed after a gap because the first text box is sized to fill the whole height of all of the tabs.

Am I being clear enough in my description so that you understand the problem I’m seeing?

If you understand the problem, then it’s me who is not understanding what I’m doing wrong. Could you try to explain a bit more what you mean?

Thanks.

[Rui Guerreiro – SUPPORT]

Hi,

This is the problem, the 2nd text block only appears after the end of the Tour asset.
This was taken on my development server.

https://www.dropbox.com/s/ar9dfgs0f4fy8py/tour_text_bug.png?dl=0

Tried to figure out some css but it wasn’t working. Will have to forward to our development team.

Thanks

-Rui

[Swift Ideas – Ed]

Add this css:

.tab-content > .tab-pane > .container {
float: left;
}

That should sort it!

– Ed

[juliewaterhouse]

Perfect! That CSS did the trick. Thank you so much, Ed!

[Rui Guerreiro – SUPPORT]

Glad it’s sorted. Thanks Ed.
-Rui