Tabs issue with content (Mac Version)


I'm finding the situation with the Containers > Tabs element a bit strange. When I edit the tab's content for the first element all is fine, but the 2nd element shows up below the first one instead of when clicking on the next tab's content. This would be fine now that I figured out that it was just making one long list of the content for all the tabs, but what happens when I put the content into the box for the next tab is it doesn't show up visually in the app. It seems as if the app doesn't understand that it's changing tabs so you can't see the text because you're not on that tab "visually".

The content I put in "does" show up in the Browser preview so it is "working" just that I can't see it in the app. Here's a screenshot of what I am talking about:

The screenshot shows the blank area where the text actually is there, and the lower area where the code is shows that I pasted a block into that area (copied and pasted from tab 1 is all I did for this screen shot).

It's doable to use it, as long as you remember to use the Browser Preview as your guide to making sure it's all in there, but it's definitely not a good thing to not be able to see what you're typing or pasting lol.

One other thing I've realized too. After I do tab one, I have to actually add the class "active" to each tab in order to have it available to edit the content. I can't see the content in the app, but I have to have that class added in order for the content box to outline to show me where it is to add to it.

And another quirk of this setup is the Preview in Browser is quirky in that it messes up which content it should be showing. Sometimes it will show what's in that particular tab and sometimes it will be what's in another tab. I "think" it's the tabs before and after the one you're actually trying to view, but I'm not positive, I'll see if I can narrow that down a bit more. For now though, it's definitely got a quirk in what content it shows you and it's not always the right tab's content.

This is persistent in that you can refresh the page, go back to that tab, click one tab, then click another and go back and you'll see that last tab's content, and you can just click other tabs and go back to others and it does it a lot. It's not 100% and if you are persistent you will get the right content eventually, usually a couple clicks will show you the right tab's content. Just wanted to make sure you're aware that it's not just the initial tab you click that does it.

So I created a new poject dragged tabs to it.

Just above the Layout View pane (don't know what else to call it) you should see some options for the tabs. It's below the bar that contains the media switching icons and in the middle of the window.

Select the tab you want to edit and click the SHOW button. If it's not there either you don't have correct tab element selected or you might have a similar bug that we think you have with the Paste Link.


Ok that's "almost" helpful haha. THat does help and work but....

Because the text for each tab is basically acting as if you're adding it to one long sheet, it all now goes behind the rest of the page below it (any other content below the tab element, and the footer etc.) so that's still not quite right.

I have 10 tabs on this one and I'm sure that's part of why, but it's still not editable that way. because I can't get to it behind the other stuff. Each time I click the next tab and tell it to show it, it's basically just going further down a single page so eventually it's just too far down behind everything below it.

Here's screenshots so you see what I mean, the first is the top half that shows that there's nothing on the screen really, because that particular tab (Missions which is highlighted and the 4th tab) is further down the page for editing. The second screenshot shows the rest of the page and how the text of this tab is behind the footer.

Hopefully that makes sense, but add another 7 tabs to your Tabs element, then put some Lorem Ipsem in there and you'll see what I'm talking about.

Ok so I recreated my test bed project for this.

I added the pretty header and footer with a container in between them and dragged the tabs into it.

I created 10 tabs named appropriately, then added a row and 4 columns with the last 3 in as col-sm-4 for each tab. I also added a bunch of text in a paragraph in the first of 4 columns for each tab leaving the initial paragraph with the appropriate tab naming scheme in it.

Somewhere along the line my 8th tab lost it's href and would not "SHOW" it's contents I figured that out and re-added the #tab-8 and that worked.

During my figuring that out I manually added active class to the tab contents. This lead me to find that the BSS app does not remove my manually added active class on the tab contents therefore leaving 2 active classes on the 8th tab content. So when I switched to say tab 9, the 8th tabs content would still show with tab 9's content below it. However, none of my contents would ever go into the footer section.

I think your issue is the manually adding of the class active. You should go back and remove all your manually added active classes. If you set your footer to be fixed that would cause it to overlap your content.

Hope that helps.


I had already removed all the "active" tags that I had added manually before I did the last post. I had been trying every which way I could to get things to show for me without going off the page, but I couldn't get it to work. The only tab that is active right now is the first one, which I "think" was active at default (goes to make a new tab element and see if that's the case).... Yep it's active on default so that can't be it.

I did add my own class to each of the tabs for styling, not sure if that would make it mess up though, don't think so. I don't recall losing any href settings on any of them, so that could be a situation like I have quite often where I hit the undo key combo one too many times or something like that lol. Not sure if that's your issue there, hopefully it is as I wouldn't want to think that things will disappear!

I have since changed all the names of the ID's and href's to custom names as well so I can reference them easier from the menu and other pages etc.

Right now by doing what you said the other day it seems to be working like it is supposed to, so I'm going to assume I must have had something wrong in the code or maybe an active setting that I missed.

What it does now is when I click the show on any other tab, it removes the active from the first tab and puts it on that one and when I go back to tab one and hit show it then removes it from the other tab and puts it back on tab one and when I do this the content that is in each of them shows as it should so .... I dunno, it's either a fluke, a flaw or user error, and I'm betting on user error at this point lol.

Appreciate all the help on this as usual Saj, and your explanation of how it "should" work is probably what got it fixed for me in the end so thanks very much for that.

I'm glad to hear it's working out for you now :)


P.S. How you can tell between an app generated or manually added active class is that the app adds the active class as a locked class in the Attribute pane.