Talk: Tabber

Got a question about this topic?
Head on over to the Discussions!

You can use this space to suggest improvements to the help page.
Click here to submit a bug report.
Please sign your posts with four tildes (~~~~).
Click here to start a new discussion.
If you're new to the wiki, please take a look at Help:Talk pages.
Be polite
Assume good faith
Be welcoming

request for tabber[]

I wrote some days ago, cause I thought Tabber would enchance the look of the site, I represent.
Pleeeze, pleeze, I'm very desperate. We have exhausted all our other opportunities and the lack of readers has begun to be very significant.

We request the extension because, we have a lot of pages with only one headline, but lot of stuff which needs to be ordered.

Frode, Spademanns Leksikon

{{SUBST:User:Frode_Fenis/ass2|{{SUBST:#time: j. F Y H:i|2 hours}}}} 13:57, May 16, 2010 (UTC)

Hiya! Please use Special:Contact and request it there. It should soon be enabled. Mark (talk) 15:12, May 16, 2010 (UTC)

Where is tabber.css? I entered that term in the search box and came up with nothing. Talanquel ☞ 18:30, December 17, 2010 (UTC)

I can't find it either. Geniusguy445 (talk) 01:13, August 16, 2011 (UTC)

Default Tab[]

Forgive me if this is the wrong place to ask this question, but is there a way to specify that the default tab be something other than the first tab? For example, is there a way we could keep the current tab order seen on this test article and have the "Turaga Metru" tab be the default? --Åusår (Talk) 20:20, February 24, 2011 (UTC)

As far as I can find, no, the first tab is the "default". TabView does have this ability, but has some different problems/features then Tabber. If you do find a solution, please let us know. --Uberfuzzy 20:32, February 24, 2011 (UTC)

Error[]

Not sure if this is the right place to put it, but

 <activityfeed size=1 exclude="User blog comments">
</activityfeed>

doesn't seem to work (it shows up blog comments)

Anybody else have this problem?

UltrasonicNXT 15:04, April 29, 2011 (UTC)

The Look[]

I recently applied the tabber function to character infoboxes on my wiki, so we can have the characters in multiple costumes and states. However the tabber function's sort of dark grey/purple text colour scheme clashes horribly with the infobox theme. Is there a way I can customise the look for it? I noticed the MSPA Wiki has a simple grey thing going on with the tabber. Was that because they changed it while the theme was still monobook?

ChainsawMurderer53 14:50, May 27, 2011 (UTC)

This is a really late response, but to change the look of tabber you have to edit the Wikia.css page, which only an admin can do. This is what the MSPA wiki's css looks like. --Pigbuster 21:31, August 14, 2011 (UTC)

Templates and Tabbers[]

On Templates, how do you make it so that you could name the tab on specific articles. I've tried the {{{tab1}}} (three brackets on each side) but when I type tab1=Warped, nothing happened. the text stayed as {{{tab1}}}. I also want to make the tabber fit the infobox. SeanWheeler 21:53, September 24, 2011 (UTC)

The problem is on Enemy Wiki on the infobox template. I used it in Cortex's page but the Warped and CTR infoboxes arn't in the tabber. Could someone help me? SeanWheeler 22:08, September 24, 2011 (UTC)

Problem solved for now, just so people who read this. I pretty much solved the problem. I don't need any help. —This unsigned comment is by SeanWheeler (wall • contribs). Please sign your comments by adding "~~~~" in the source editor.

What is the use of alt tag?[]

I noticed that the html code has an alt tag in link element like next:

<li class="">
<a href="javascript:void(null);" title="
TAB NAME">
TAB NAME</a></li>

I really don't know why there's a title place. If I don't make mistakes, the alt tag is preferably used for displaying tooltip with a text diffrent from the link name. But with <tabber> I don't have any alt parameter to fill. (if yes I'm sorry, but Help:Tabber tells me anything about it) This 'alt tag' does just show us the exactly same text as the link name. Wouldn't it be better to remove it? -- Cafeinlove, 00:34, April 27, 2012 (UTC)

Is there anyway to stop displaying this tip when hovering the tab body? This is very annoying, as it's showing the same word of the tab controler. Help! Sapador Castelo (talk) 19:17, May 21, 2018 (UTC)

I don't think it's possible to remove it. It's useful there for accessibility purposes (and it might actually be used for getting the tabber to work). You can, however, submit this as feedback using the Special:Contact/feedback form. noreplyz 11:40, May 22, 2018 (UTC)

Google Chrome Issues![]

I'm having intermittent issues with tabber when I'm using Chrome. Sometimes it won't load at all other times it won't put the content into tabs an other times it will load perfectly fine. Is anyone having the same issue? Dak47922 Talk 18:55, June 23, 2012 (UTC)

Can't make a template parameters?[]

I can't seem to use the {{{placeholder text}}} as the tab titles on templates, so when I use the template I can change the tab title?

Adding styles[]

Adding css information gives me this, is there any way to do it?

<tabber>First Tab Title=First tab sample text. |style="background: white; padding: 0px;"|Second Tab Title=Second tab content goes here. |-|Third Tab Title=Third tab content goes here. </tabber>

-- Fort Max says 'til All Are One and Deculture! (Talk) 16:21, December 3, 2013 (UTC)

Force tabs into different rows[]

I've been implementing tabs in infoboxes on the Metal Gear wiki and have encountered an issue with spacing. On some pages the tabs don't properly fit into one row and either one or two will be forced onto a second row, or one may be split between the rows. I'm looking for a way to dictate which tabs sit on which row so I can have two rows of tabs with an equal number on each row. Thanks--Soul reaper (talk) 03:56, December 31, 2013 (UTC)

It appears that I have also encountered the same problem. Blueeighthnote (talk) 00:18, May 23, 2014 (UTC)

Oh, looks like this thread solved my problem.Blueeighthnote (talk) 00:23, May 23, 2014 (UTC)

Coding trouble[]

I'm having trouble with this as when I enter the code for the tabber, 'File:' and '|275px' always appears. I've looked around for help but I can't do it by myself. Here is the page. [1]

LexsJB_Talk 12:12, April 9, 2017 (UTC)

HELP!![]

I need to know how to add tabs!! The code thingy doesn't work!!!

http://the-animal-chronicles.wikia.com/wiki/Russ

How can I add tabs onto that page? I need two tabs- Canon and Non-Canon. All the stuff on the page is Canon. Same goes for literally ever character page on the wiki.

How do I do this...?

~.:Aquabreeze:.~ 03:48, May 4, 2017 (UTC)

Please reread the article, as it explains how to add Tabbers. Make sure you switch to source mode editing when you do, as it is the only way to add Tabbers currently. If you’re still having issues, I’d be happy to assist.
UrsuulWallDADate3:50 AM Thursday, May 4, 2017 (UTC)

Okay, I figured it out, but now I can't edit it afterwards. There's these blue/green stripes that cover everything and I can't change what I edited. Is that normal? And how do I fix it? Same page: http://the-animal-chronicles.wikia.com/wiki/Russ

~.:Aquabreeze:.~ 04:02, May 4, 2017 (UTC)

I see no Tabbers on the page you describe, nor are there any <tabber> Tags in the source code of the page. Are you sure that what you added was a Tabber? In fact, it looks like you removed a Tabber in your latest edit. Are you editing from source mode, or did you attempt to use the Visual Editor? Because in the Visual Editor you often can’t edit code elements directly; they are instead surrounded by the stripes as you describe, meaning that they can’t be edited. You have to go into source in order to change them.
UrsuulWallDADate4:10 AM Thursday, May 4, 2017 (UTC)

http://the-animal-chronicles.wikia.com/wiki/Russ <-- Here's the page after I edited it in source mode. Why is it like that???

~.:Aquabreeze:.~ 04:18, May 4, 2017 (UTC)

It’s because you added spaces in front of every line, as you can see here. The page interprets that as a <pre> Tag, so it turns all of the code into plain text instead of having it work normally. You’ll have to remove the spaces.
UrsuulWallDADate4:22 AM Thursday, May 4, 2017 (UTC)

Tabber Issue: Overlapping[]

Is there anyway to fix this issue with the tabbers? Its overlapping and looks awful. Thanks RustInDirt (talk) 17:26, July 8, 2017 (UTC)RustInDirt

My problem with tabbers — As you can see, the "Windows" tab is overlapping the "Xbox 360" and "Xbox 360 (Alt.)" tabs.

If you wanted to try CSS to fix it, you could use:

.infobox .tabbernav {
    display: flex;
    line-height: 18px;
}

It’ll make it even out, but if too many tabs are placed then it will continue to widen the infobox.
UrsuulWallDADate5:34 PM Saturday, July 8, 2017 (UTC)

TabberFableInfobox — What it looks like for me with that CSS

Alternatively, you could use…

.infobox .tabbernav {
    display: flex;
    line-height: 18px;
    overflow-x: scroll;
    max-width: 280px;
}

…to have any further tabs scroll horizontally instead of widening the infobox. Like the third image.
UrsuulWallDADate5:45 PM Saturday, July 8, 2017 (UTC)

TabberFableInfobox2 — See how you can scroll horizontally through the extra tabs?

Here is what I put to together: Tabber on my Test Wiki.

This is the code that I used to do this:

.tabbernav > li {
	line-height: 20px !important;
}
.tabbernav {
	padding-bottom: 0px !important;
}

I basically just adjusted the line height of the tabs and removed the padding of the tabber navigation to remove the space between the navigation and the tab boxes.

Christian Sirolli ^{(Talk | Contribs)} 17:54, July 8, 2017 (UTC)

Help Adding tabs to a Table[]

Hello, I was wondering if there was a better way to add tabs to a table. I am using tabber and putting the table inside of it, but it looks really weird with an awkward looking border around it. I was wanting to add the tabs directly to the table if possible, or at least get rid of the extra space around the actual table. This is what is currently looks like [2] BlackDragon 02:02, July 18, 2017 (UTC)

I think I know what you want, and I have some code that can make it better. This is designed to work as long as the tabber is inside of a table. Since that the tabber is originally wrapped in a table, I decided to work with that to choose only the tabbers inside of a table.

So this is what I have so far (see pic to the right), and below is the code to add in MediaWiki:Wikia.css to make it look like that.

td > .tabberlive > .tabbertab {
	padding: 0 !important;
	border: none !important;
}
td > .tabberlive > .tabbertab > table {
	margin-top: -7px;
}

I removed the border on the tabber and made the tables inside of it be close to the tabs. Note for next time, it would probably be better to ask a question like this on the Forum. Christian Sirolli ^{(Talk | Contribs)} 15:15, July 18, 2017 (UTC)

Thank you!!! That is exactly what I was looking for. Thank you so much so the help. Also, I'll make note of the Forum next time I need something :D BlackDragon 18:02, July 18, 2017 (UTC)

Tabbers in Tabbers[]

Every time i put a tabber in a tab, the souurce code always gets messed up when i save. I found a way around this, making the inner tabbers templates, but that gets complicated. Is there an easier way i can directly insert a tabber into another tabber? —The Great Pulty; posted at 05:37, August 16, 2017 (UTC)

Hey, it's a bit messy, but you can take a look at Forum:Please help - Tabber within a Tabber. Alternatively, you can try use Help:Tab view and place tabbers in each page. noreplyz talk 06:33, August 16, 2017 (UTC)

In addition to the link above, check out what I did with it here. Christian Sirolli ^{(Talk | Contribs)} 17:00, August 16, 2017 (UTC)

Updated the link for you, since the previous link wasn't working. :) noreplyz talk 02:10, August 18, 2017 (UTC)

Thanks a lot. These really helped me! —The Great Pulty; posted at 17:49, August 28, 2017 (UTC)

Invisible Tabbers[]

Hello!

I'm Zenki7 and I'm an admin at Kishin Douji Zenki Wikia.

Since yesterday, tabbers haven't been showing properly, when used in comments anymore. The code inside the tabber with the written message and images can be seen via the source code editor, but the tabbers and their content are invisible when viewing the posted comments normally.

Can anybody tell me what causes this or if the tabber feature was changed, why this was done?

Thanks in advance.

Zenki7 (talk) 18:00, September 13, 2017 (UTC)

Can you post a link to a page that shows this issue?

C
>><>>
S

^{(Page | Talk | Contribs)}

18:06, September 13, 2017 (UTC)

Of cause! Here's a link to the manga translation blog on our wiki.

You can see the issue, if you scroll down to Semerone's comment "Translation Reading Samples / Übersetzungsleseproben" and my answer to it. These both should feature tabbers showing images and some text.

Zenki7 (talk) 18:11, September 13, 2017 (UTC)

I've noticed a similar problem on some wikis. While text appears on the page, the tabbers and other features continuously load if there's at least more than two tabs in ab infobox.

What is the issue?

Dry63 (talk) 00:08, September 17, 2017 (UTC)

The problem with tabbers in comment should be fixed next Tuesday. TK-999 (talk) 00:18, September 17, 2017 (UTC)

Thank you so much!

Zenki7 (talk) 22:27, September 17, 2017 (UTC)

I'm still having trouble with the invisible tabs with my laptop, but my tablet has them just fine. It is it a problem with the internet or will it just take longer than anticipated?

Dry63 (talk) 18:56, September 23, 2017 (UTC)

Recent issue with tabs[]

This issue has probably been around since September, but I just noticed that the tabbers no longer fit neatly next to info-boxes.

This page is an example where if the tabbers exceed the width of the text next to the info-box, it is forced to fit underneath, which up until recently didn't do that.

It's rather annoying to be honest, and I'm not sure how to fix it. I'm not sure if it's a bug or what it is. ― C.Syde (talk | contribs) 00:50, October 15, 2017 (UTC)

Code in Titles[]

Is there any way i can add any inline CSS or WikiText in the titles of tabbers? Every time i try, it just shows the raw code. How can i change how the title looks? And also, is it possible to make the title a variable in a template?
--|| Grudgeholderr (Pulty) ||-- 01:36, November 19, 2017 (UTC)

You can format the tabs only through the CSS sheet (e.g. MediaWiki:Common.css). If you want a style to only to one tabber, you can wrap the tabber in another class, e.g.

<div class="tabber-design-1">
   <tabber>
   <!-- tabber contents -->
   </tabber>
</div>

The latter is not possible, unfortunately. noreplyz talk 01:44, November 19, 2017 (UTC)

You can make a variable title through {{#tag:tabber}}. For example, if you want to have a tabber with two tabs with values of {{PAGENAME}} and {{SITENAME}} as titles, you would do

{{#tag:tabber|{{PAGENAME}}=This tab has the page name in its title{{!}}-{{!}}{{SITENAME}}=This tab has the wiki name in its title}}

which would output

This tab has the page name in its title

This tab has the wiki name in its title

-- Cube-shaped garbage can 07:13, November 19, 2017 (UTC)

Thanks a lot, but by variables, i meant things like {{{1}}}.
--|| Grudgeholderr (Pulty) ||-- 23:16, November 19, 2017 (UTC)

Tab title with 2 or more lines, imagemap inside tabber[]

Is there a way, to create tab titles with more than only one line?

I've tried the following, but it works only with the first tab and don't look very nice:

<tabber>
Floor 7 (+1)

(not in game)=
Floor 7
|-|
Floor 6 (Ground Floor)=
Floor 6
|-|
Floor 5 (-1)=
Floor 5
|-|
4 (-2)=
Floor 4
|-|
3 (-3)=
Floor 3
|-|
2 (-4)=
Floor 2
|-|
Floor 1 (-5)=
Floor 1
</tabber>

(the additional empty line in the first tabs title is only to separate the two filled lines, otherwise they won't be nice to read)

gives:

Floor 7

Floor 6

Floor 5

Floor 4

Floor 3

Floor 2

Floor 1

The moment, I try it with the second or more tabs, things went crazy:

Floor 7

Floor 6

Floor 5

Floor 4

Floor 3

Floor 2

Floor 1

respectively:

Floor 7

Floor 6

Floor 5

Floor 4

Floor 3

Floor 2

Floor 1

Seems not possible to display with samples ... hope, it's understandable nevertheless.

Any suggestions?

The second part of my question, I won't display here with an example-code, since it does some really weird things with the sourcecode, and I'm not sure if it may break this help-page: according to Help:Tabber#Usage information, I should be able to insert imagemaps in each tab of a tabber. But if I do so, it kinda "outsource" the imagemaps, when editing the page the next time ... tried it several times, so one may fix it by deleting the "outsourced" code each time before saving the page, but it's still weird.

Cheers

Paladin Aladin (talk) 09:56, March 26, 2020 (UTC)

I should be able to insert imagemaps in each tab of a tabber

I find that {{#tag: is my friend

{{#tag:tabber|
Floor 7 (+1) =
{{#tag:imagemap|

}} <!-- close imagemap -->

{{!}}-{{!}}

Floor 6 =
{{#tag:imagemap|

}} <!-- close imagemap -->

}} <!-- close tabber -->

TableWiz (talk) 11:33, March 26, 2020 (UTC)

It took a while for me, to figure the correct semantics especially for the options for the implemented images (using {{!}} instead of | was the key), but now it works very fine ... thanks a lot.

But still no solution for more than one line in a tabs title?

Cheers

Paladin Aladin (talk) 09:21, March 27, 2020 (UTC)

@TableWiz: your hint with {{#tag:| tempts me, to try such things like

{{#tag:tabber|
{{#tag:title|Floor 7 (+1)

(not in game)
}} <!-- to close that "title"-tag -->
=
{{#tag:imagemap|

}}
{{!}}-{{!}}
...

or alike with "tabtitle" or "tab" or "tabbertitle" or "name" or "tabname" a.s.o., but got always only errormessages for "Unknown extension tag".

So is there a tag inside tabber to "create" the tabs titles, where one could play with ?

Cheers

Paladin Aladin (talk) 09:53, March 30, 2020 (UTC)

Broken[]

Im makin a page on a wiki right now and this code aint workin

<tabber>|-|First Tab Title= First tab sample text. |-|Second Tab Title= Second tab content goes here. |-|Third Tab Title= Third tab content goes here.</tabber>

First tab sample text.

Second tab content goes here.

Third tab content goes here.

—This unsigned comment is by Kaizokusenchorimuru (wall • contribs). Please sign your comments by adding "~~~~" in the source editor.

First, tabber elements should be created using newlines:

<tabber>

|-|Tab 1= Sample text. |-|Tab 2= Another sample text. </tabber>

Second, if you want to give an example code, use the <pre> HTML tag to wrap your code and prevent it from executing ~ Headquarter 8302^yeet G'day mate 05:12, 22 June 2021 (UTC)

Tabber Pushes Text all the Way to the Bottom[]

Hello, I'm having an issue with tabber pushing all the information to the bottom of the picture that's tabbed. Is there a way to wrap the follow quote and text up and around the left side of the picture?

This is the link for the page I'm attempting to edit: https://fatal-fiction.fandom.com/wiki/Superman_(Rebirth)

Lastly, if there is a fix, can I place it in the css of the entire wiki?

Thanks! —This unsigned comment is by Heart of Kings (wall • contribs). Please sign your comments by adding "~~~~" in the source editor.

Doesn't do that for me (at least what I consider to be "not" pushing down content). Has the problem been fixed or is it still appearing on your side? — Headquarter 8302^c 11:50, 13 July 2022 (UTC)

Thanks for the reply! It is still doing it for me. Just as an example, I want the text in the first image to wrap up and around the side of the picture like the second image.

Thanks again for the help.

You can do:

div.tabber.wds-tabber {
  float: right
}

To make the tabber float to the right and make the text flow to the top-left. I can't seem to find the wiki where you provided the second image so I can't really replicate it 1:1. — Headquarter 8302^c 13:05, 13 July 2022 (UTC)

Thanks for the tip! I tried replicating it myself but can't seem to find the source code they used. I'm thinking it's in css somewhere. Is there a way to make the code something that would generate across the entire site if I use the normal wikitext tabber code? x Heart of Steel x (talk)

It seems that they wrapped the image declaration in a floatright div, which only applied the float to the image and not the entire tabber. — Headquarter 8302^c 13:24, 13 July 2022 (UTC)

Is there a way to make that happen in the css? Or does it just need to be implemented every time a picture is uploaded? Thank you again for all your help! x Heart of Steel x (talk)

Sorry to double post, but I've been trying to get this to work and it just isn't. I'm not sure where to put the code for the image to float right so the text can wrap up around it and not the entire tabber. x Heart of Steel x (talk)

Hmm, try to use:

div.tabber.wds-tabber {
  display: inline
}

instead, this will make the image align right but the tabs on their original position. I'm not sure why the previous solution didn't work in your wiki. — Headquarter 8302^c 03:17, 14 July 2022 (UTC)

That was it! Thank you so much for the help. x Heart of Steel x (talk)

Can you choose which tab to start on?[]

Hi, is there a way to choose the default tab to start on in a tabber environment? On my wiki I have added tabs for various image version of the same object, but because it's in order the oldest ones are the default. Is there a way to start on e.g. tab 2 as default? Spatulade (talk) 20:24, 15 October 2022 (UTC)

Tab jump link[]

I noticed that when opening a tab, a hash followed by the tab name is appended to the URL. For example, clicking "Second Tab Title" changes the URL to https://community.fandom.com/wiki/Help:Tabber#Second_Tab_Title. If I were to open the new URL in a new window, then the tab is opened on the page, but the focus doesn't jump down to the section of the page where the tab exists. Can an "id" or "name" property be added to each tab so this jump works? Example, add "id" to the anchor tag: <a id="Second_Tab_Title">. The "id" or "name" value should be unique on the page for it to work, so a note about unique tab names might be needed when multiple tabber templates are used on one page. Isekai108 (talk) 08:56, 5 January 2023 (UTC)

Please file any requests to FANDOM staff. — Headquarter 8302^c 11:46, 5 January 2023 (UTC)

Thanks. A request has been filed. Isekai108 (talk) 20:43, 5 January 2023 (UTC)

Mobile support now that Fandom allows mobile CSS[]

Hi,

Fandom has recently allowed mobile CSS through MediaWiki:FandomMobile.css. Can we expect Tabber to start leveraging that automatically?

If not, is there CSS (existing or in the making) that would allow an admin to get Tabber to work on mobile after they manually put some CSS in the MediaWiki namespace?

Thanks! — Haximus Thunderburp (talk), 13 May 2023

Lists shown strange in tabbers[]

For example, for second and nex tabs lists formatting differ on 2nd tab and after

list1
list2

list1

list2

Seems like there is interaction between the tabber parser and the wikitext list parser. Placing an empty line between "|-| 2 tab=" and "* list1" seems to fix this. But I can't guarantee it won't give side effects. --Kjnoren (talk) 09:06, 8 September 2023 (UTC)

It looks like the <ul> element is strangely missing on the second tab, might be worth passing a ticket. — Headquarter 8302^c 10:38, 8 September 2023 (UTC)

About Tabbers without links/href[]

Hi! Admin from Spanish Medarot/Medabots wiki (Medateca) here! I wonder if you know how to add tabbers in articles like Nurp-Naut without href tags.

I'm using "<tabber>" for my templates but every time I click a label, it works as a link in the page (href). I wanna have class "wds-tabs_tab-label" only with the text, I want to remove the "#" Here's an example: Le_Villain.

I really appreciate your help, thank you!

{{subst::Usuario:201296/Firma}} 17:25, 22 December 2023 (UTC)

tabber added with js[]

How to add tabbers with mw javascript?

Awful[]

Why does this tool freaking exist??? Whoever thought it'd be a good idea to completely break the Visual Editor for the piece of garbage useless tool should be fired immediately. A plague on your house! BOOOOOO! Passionlip (talk) 15:20, 18 March 2024 (UTC)

Feedback on what exactly you are seeing is helpful. Please send it using the contact form, ideally with links to show exactly what was broken and when. Thanks -- Sannse (help forum | blog) 13:58, 19 March 2024 (UTC)

Passionlip, I totally agree with you that it's pretty bad that that tabber editor is so broken but no one went out of their way to break it and there's no need to be so mean about it. Sanne, I think he's referring to how the visual editor only show the first tab of tabbers, all the others only show source code and there's no way to switch. King Seesar (talk) 15:33, 17 May 2024 (UTC)