[Tab][Label] Add the ability to use labels in tab menus

[ocervell]

I want to put an inline label for one of my tabs, but not the others.
This breaks the vertical alignment between tabs, like shown below:

Quick fix

Adding a circular label with class hidden to all of my tabs and hiding them using opacity css setting. This feels a little hacky though...

CSS Rules:

.ui.secondary.pointing.menu .item {
  padding-bottom: 0.5em !important;
}

.ui.secondary.pointing.menu .item .ui.fitted.circular.hidden.label {
  opacity: 0 !important;
  margin: 0px !important;
  padding: 0px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
  min-width: 0px !important;
}

Result:

[awgv]

Hi @ocervell, you could set the height for all .ui.secondary.pointing.menu .item elements to fix that. What label variation do you use, is it .tiny? Inpecting the .item with the label will tell us that its height is 46px (or whatever it is in your case). The menu component doesn’t set the height, so there’s no variable in the source that we can use, so you’ll have to override it the regular way. Paste the following into installation_folder/src/site/collections/menu.overrides and rebuild the framework:

.ui.secondary.pointing.menu .item {
  min-height: 46px;
}

You can also namespace it if you don’t want to override the defaults, for example: .ui.custom.secondary.pointing.menu .item. If you want the items to be lower, change padding-bottom.

[ocervell]

This fix is working, yes, but shouldn't that be fixed within the framework itself ?

[awgv]

@ocervell I’ll label it as enhancement.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.