Hey everyone,
I have noticed that whenever I change the ID to a tab pane (and change the respective tab link "href" accordingly), the tab pane is no longer visible in the editor. Also, it misbehaves in the browser: no tab is visible at loading and it is necessary to activate another tab, then switch back to the first one.
Has anyone else experienced the same issue or am I missing something?
When I first change the tab-pane's ID it gets hidden then when I update the link associated with it, that tab-pane appears again.
Seems to work normal to me.
Saj
I've worked with tabs for many months and once I got the idea of how they actually worked, I haven't had any issues at all. I'm on iMac El Capitan if that helps.
When you work with tabs, unless you actually "delete" one, there's usually not much change you need to make for altering the ID's or the Links, they are set up automatically, unless of course you want custom ID's for them which I do that too at times if I'm needing multiple tabs on a page or site. When you do the "Active" state are you doing it using the buttons at the top or by changing it in the attributes manually? Manually will mess you up so you should use the buttons at the top to change it's active state (Show, Hide).
Not sure what else to tell ya. They don't disappear for me at all and I use them multiple times a week for editing the content in them on various client sites.
Another question would be, are you on the most current version of the app? We used to have a lot of issues with tabs in the beginning, but they have worked that all out as far as I've seen so far. Maybe you need to update your BSS version? Dunno, but thought I'd throw that in there just in case. You should be on version 2.70 at this point in time, or the very previous version if it hasn't updated today for you yet. Either of those versions works good for tabs, so maybe you're too far behind in updates.
Also wondering what that popup is that you have your tabs on. Is that a component popup? I don't ever get a popup for editing tabs at all so, not sure what that is there.
I figured it out.
The issue arises when you rename each of the tab-pane's IDs before you update the associated links URL. I think the programming loses what items are supposed to be associated with the active state.
Saj
Thank you all for your replies.
I'm running version 2.6.4 (I've bought BSS license and downloaded it less than a month ago).
Unfortunately my problem persists, no matter what the order of the IDs renaming is (tab-pane first or tab-link first). I am doing nothing manually but changing the IDs (I too have multiple tabs on the same page), I'm always using the buttons at the top. The tabs are displayed on a modal div, which I have simply dragged and dropped in my design – 100% component.
Also, when the page loads in the browser, no tab-pane shows at first: I have to click some other tab-link and then re-click the first one. It is very upsetting, and I can't seem to get what am I doing wrong.
Any other suggestions?
Hmm, haven't been able to reproduce when it failed for me.
I just figured out (for real this time :) ) another thing based on your screenshot. Which is probably how it broke for me initially.
Looking at your screenshot, your tab 1's link and apparently the ID both have a space after the 1. That breaks it I can reproduce that. Look at the screenshot and you'll see that space after the 1 when you compare it to the link for 2 and 3.
I don't know how you have a space in the ID as I couldn't get that but I was able to fault it when there is a space at the end of the links URL.
Saj
Thanks again for your reply.
I checked and there's no space in the ID. This problem is persistent: in fact it occurs for each and every tab-pane in my code. I have 7 of them and they are all faulty in the same way. And there is one more absurd thing. If i break the code on purpose, setting the tab-pane id to the default "tab-1" it will actually show up on the editor and when on the page in browser, at first usage. Of course, in browser, once I change tab (e.g. selecting the second), I can't go back to the broken one, being that the tab's href and pane's id don't match anymore. I'm really confused. Here are some screenshots: in editor in browser (first load) in browser (after usage)
I found a workaround for the non displaying in browser on first load issue. I noticed that when the ID of a tab-pane gets changed its class gets automatically modified and the "active" disappears. It is sufficient to add it back manually and the browser usage will be fixed. Nonetheless, changing the ID of the tab-pane will break the BSS functionality. It won't show the pane unless the "active" class is manually coded in, nor the show button of the editor will actually show the corresponding pane (i.e. add "active" to its class).
The fault was the URL not the ID the space in the URL based on your screenshot and testing it that way, causes the problem removing the space at the end of the URL should fix it. For my testing I did just like you I have the tabs in a modal, being in a modal or not, had no effect.
If you look at your screenshot and compare the URL for links 1,2,3 you will see that link 1 has a space. That is going to be a problem.
Saj
I checked and there is no space, it just appears so in the screenshot (maybe because of the font). Indeed, if there was a space, it shouldn't work when launched in browser, but it does. And also all the other tab-panes won't work (which appear to have instead no space – and don't). It seems that it is just unlucky me.
It could be a graphical glitch that I am seeing, but it is something I can reproduce that way.
Probably the thing to do is delete the tab component and start over with it. And try first renaming just one pane and it's link. Then go from there.
I can't see anything else, and if that space is a graphical weirdness and not really a space at the end of the URL for the first link, I'm not sure what else there is.
Saj
Just so you know that when I tested the space issue the tab with the space at the end of the link worked after I switch between tabs in the browser preview.
Saj
I tried every combination of href and id change and started over and over. Again, there is no space issue, as I have checked multiple times and the bug sticks with each and every tab-pane in the design. I am out of options. I think I'll just wait for a fix in the next update. Thanks for your time guys.
Yeah sorry, thought I got. There was a new version just released today maybe that might help if you haven't gotten it yet.
Saj
I don't think the version has anything to do with it if he's on 2.64 that should be sufficient and it should be updating soon since the update was just released.
Can you share your project file with us so we can see if it does the same thing to us? I am thinking Saj is probably right. The reason I say this is because there is a distinct flaw in BSS with it adding spaces where it shouldn't. Adding links, text that is centered etc. will 100% add a space at the end that I have to delete every single time without fail so every time I make a link or add any text to a field that is centered, that's been a default practice for me (hoping they will get this fixed soon because that's getting old on my hands! lol). Anyways, I would double check, even though it doesn't "look" like there's a space, go to the end of the line and double check to be sure. There's a lot of areas that spaces get added other than text and links so best to be sure.
If that is truly not the case, please share your project file with us (upload and give a link basically) so we can download it and see if we can reproduce it. I'm still pretty sure it's a flaw in what you're doing, not in BSS since I've been using tabs for so long without issues and it's been quite a few versions since the tab problems have been fixed so maybe we can help better if we can see how you have it set up.
Sorry for the late answer, but I'm in Italy, so you know... time zones. Here's the link to my project. I'm truly helpless now! I've upgraded to 2.7 this morning, but the issue remained. I've double and triple checked every href and every id of every tab element, and no one presents random spaces (though I too have the problem of BSS adding space at the end of text, sometimes). I hope you guys can spot my error. Thanks.
Ok I've worked out that it's not that you're missing the tags that were there to start with, it's that you need to assign a Class to each of the
THIS WOULD BE THE FIRST SET OF TABS
<ul class="nav nav-tabs">
<li class="tabset-1 active">
<a href="#tab-compensi-1">First Tab - First Set</a>
</li>
<li class="tabset-1">
<a href="#tab-compensi-2">First Tab - First Set</a>
</li>
<li class="tabset-1">
<a href="#tab-compensi-3">Third Tab - First Set</a>
</li>
</ul>
<div class="tab-content">
<div id="tab-compensi-1" class="tab-pane active" role="tabpanel"> ... </div>
<div id="tab-compensi-2" class="tab-pane" role="tabpanel"> ... </div>
<div id="tab-compensi-3" class="tab-pane" role="tabpanel"> ... </div>
</div>
THIS WOULD BE THE SECOND SET OF TABS (and continue on from here with the same type of setup)
<ul class="nav nav-tabs">
<li class="tabset-2 active">
<a href="#tab-contributi-1">First Tab - Second Set</a>
</li>
<li class="tabset-2">
<a href="#tab-contributi-2">First Tab - Second Set</a>
</li>
<li class="tabset-2">
<a href="#tab-contributi-3">Third Tab - Second Set</a>
</li>
</ul>
<div class="tab-content">
<div id="tab-contributi-1" class="tab-pane active" role="tabpanel"> ... </div>
<div id="tab-contributi-2" class="tab-pane" role="tabpanel"> ... </div>
<div id="tab-contributi-3" class="tab-pane" role="tabpanel"> ... </div>
</div>
And so on until you have them all. Basically what you're missing are the identifying classes that tell each of the tabs to show up where and when. Hope that helps!
I swear i tried restarting from scratch a couple of times. I also don't understand what's the issue, cause i dragged and dropped all the components. The only thing I changed and ever changed is the id. The default attributes I get when adding new components via drag-n-drop are exactly the same that I have. I ONLY change the ID, but as soon as I do that, everything gets messed up. Here's a screen recording of that.
So basically, what you are saying is that I have to manually code-in "active" in each tab-pane class? But in that case in editor (and in browser) it will always show the tabs. Or did I get something wrong?
Thanks.