Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

.tab-pane has no border or padding #19857

Closed
alvipeo opened this issue May 8, 2016 · 9 comments
Closed

.tab-pane has no border or padding #19857

alvipeo opened this issue May 8, 2016 · 9 comments
Labels

Comments

@alvipeo
Copy link

alvipeo commented May 8, 2016

So, when using tabs active tab pane should have a border and padding to look like .. normal.

Here's what seems like right to me:

.tab-pane.active {
    border: 1px solid $nav-tabs-border-color;
    border-top: none;
    padding: $grid-gutter-width / 2;
}
@cvrebert
Copy link
Collaborator

cvrebert commented May 8, 2016

Seems like a matter of taste to me. I can't seem to recall or find any other requests/complaints for such styling.
You can always use a card in the tab pane or around the entire tabs widget to achieve a similar result.
CC: @mdo

@cvrebert cvrebert changed the title tab pane border and padding .tab-pane has no border or padding May 8, 2016
@alvipeo
Copy link
Author

alvipeo commented May 8, 2016

I mean isn't this better:

With border

than this?

Without border

Especially when the tab contains text (or at least starts with text).

@alvipeo
Copy link
Author

alvipeo commented May 8, 2016

Is this possible with cards?

@cvrebert
Copy link
Collaborator

cvrebert commented May 8, 2016

Almost, if you add .card.card-block to .tab-content, but the border still requires extra tweaking.

@cvrebert
Copy link
Collaborator

cvrebert commented May 8, 2016

Especially when the tab contains text (or at least starts with text).

Yeah, I agree at least some padding would be nice in that case, but implementing that properly could be fiddly.

@alvipeo
Copy link
Author

alvipeo commented May 8, 2016

Doing it with cards seems like tuning css with javascript :)

@RyanZim
Copy link

RyanZim commented May 9, 2016

If this is added, it should be entirely opt-in.

Perhaps we could could add a class that would be placed on .tab-content and use a selector like .tab-pane-outline .active for the styling.

@alvipeo
Copy link
Author

alvipeo commented May 10, 2016

ok, opt-in is fine. It just should be there in some way.

@mdo
Copy link
Member

mdo commented Oct 28, 2016

Closing as a won't fix. There are easy padding utilities now that can accomplish all the spacing, and borders are a preference that don't need to be set initially IMO.

@mdo mdo closed this as completed Oct 28, 2016
@twbs twbs locked as resolved and limited conversation to collaborators Jun 27, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

4 participants