Close buttons on tabs #518

Closed
akavlie opened this Issue Nov 1, 2011 · 9 comments

Comments

Projects
None yet
9 participants
@akavlie

akavlie commented Nov 1, 2011

I'm trying to implement tabs (actually pills in my case, with less rounding, as the styling is closer to what I want) with a close button to the right, similar to browser tabs. This should be added to Twitter Bootstrap as an option.

Extending current code to do this isn't as clean/easy as it should be because the pill color is on the <a> element rather than the <li>, so anything added after the link falls outside of the visible pill bounds.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Nov 17, 2011

Member

I don't think we'll be adding this as native functionality, but feel free to file an issue later if you wish to add whatever solution you come up with to the wiki for forks/extensions/etc.

Member

mdo commented Nov 17, 2011

I don't think we'll be adding this as native functionality, but feel free to file an issue later if you wish to add whatever solution you come up with to the wiki for forks/extensions/etc.

@mdo mdo closed this Nov 17, 2011

@akavlie

This comment has been minimized.

Show comment
Hide comment
@akavlie

akavlie Nov 18, 2011

I hacked the pills to do what I want, but I'm not super happy with how they look. I plan to find another solution once I've got assistance from a designer. Thanks.

akavlie commented Nov 18, 2011

I hacked the pills to do what I want, but I'm not super happy with how they look. I plan to find another solution once I've got assistance from a designer. Thanks.

@ejain

This comment has been minimized.

Show comment
Hide comment
@ejain

ejain Mar 1, 2012

Contributor

Just ran into this issue as well. Even if Bootstrap doesn't have direct support for closing tabs, it would be rather nice if Bootstrap didn't make it so hard to add this functionality yourself...

Contributor

ejain commented Mar 1, 2012

Just ran into this issue as well. Even if Bootstrap doesn't have direct support for closing tabs, it would be rather nice if Bootstrap didn't make it so hard to add this functionality yourself...

@topherzee

This comment has been minimized.

Show comment
Hide comment
@topherzee

topherzee Mar 6, 2012

Here's how I was able to get this working. I wrapped one anchor around a bootstrap icon (i tag) and the text of the tab... Then I added a click handler to the anchor and one to the (i tag) - in the (i tag) click handler i return false - which stops the event.

`

`

Here's how I was able to get this working. I wrapped one anchor around a bootstrap icon (i tag) and the text of the tab... Then I added a click handler to the anchor and one to the (i tag) - in the (i tag) click handler i return false - which stops the event.

`

`
@potch

This comment has been minimized.

Show comment
Hide comment
@potch

potch Aug 21, 2012

I came up with a pretty short solution for adding close buttons to tabs (the non-pill type):

The HTML:

<ul class="nav nav-tabs">
    <li><a href="javascript:;">
        <button class="close" type="button">×</button> foo
    </a></li>
    ...
</ul>

The CSS:

.nav-tabs > li .close {
    margin: -2px 0 0 10px;
    font-size: 18px;
}

potch commented Aug 21, 2012

I came up with a pretty short solution for adding close buttons to tabs (the non-pill type):

The HTML:

<ul class="nav nav-tabs">
    <li><a href="javascript:;">
        <button class="close" type="button">×</button> foo
    </a></li>
    ...
</ul>

The CSS:

.nav-tabs > li .close {
    margin: -2px 0 0 10px;
    font-size: 18px;
}
@giolvani

This comment has been minimized.

Show comment
Hide comment
@giolvani

giolvani Sep 24, 2012

Nice potch, but for me, it's not work on I.E.
Do you have any suggestion?

Nice potch, but for me, it's not work on I.E.
Do you have any suggestion?

@antonyf

This comment has been minimized.

Show comment
Hide comment
@antonyf

antonyf Oct 13, 2012

I created a dropselect pill/tab.. and appended a close(hide/ fadeout /??) to all the links.. i made this dropselect pill/tab first in the row of pills/tabs.

onselect i run the close function with tab id..
Works on all browsers and for me..

I dynamically create my tabs in a popup window, so i cant post the correct code for YOU! here.. But the idea is very standard..

Hope this helps someone.

antonyf commented Oct 13, 2012

I created a dropselect pill/tab.. and appended a close(hide/ fadeout /??) to all the links.. i made this dropselect pill/tab first in the row of pills/tabs.

onselect i run the close function with tab id..
Works on all browsers and for me..

I dynamically create my tabs in a popup window, so i cant post the correct code for YOU! here.. But the idea is very standard..

Hope this helps someone.

@JeyKeu

This comment has been minimized.

Show comment
Hide comment
@JeyKeu

JeyKeu Jul 27, 2013

@potch and all I sort of did it. please have a look.
Add Remove Tabs in Bootstrap

Demo

JeyKeu commented Jul 27, 2013

@potch and all I sort of did it. please have a look.
Add Remove Tabs in Bootstrap

Demo

@mdo mdo referenced this issue Feb 13, 2014

Closed

v3.1.1 ship list #12492

1 of 1 task complete

DocX pushed a commit to DocX/bootstrap that referenced this issue Sep 16, 2014

mikejr83 pushed a commit to SumTotalSystems/bootstrap that referenced this issue Mar 29, 2016

Merge pull request #518 from christianacca/master
test(tableSpec): increase test coverage
@MatthewVines

This comment has been minimized.

Show comment
Hide comment
@MatthewVines

MatthewVines Aug 26, 2016

@potch the issue here, is that you can't actually nest interactive components like buttons inside anchor tags. Did you ever find a good work around for that?

@potch the issue here, is that you can't actually nest interactive components like buttons inside anchor tags. Did you ever find a good work around for that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment