Questions tagged [bootstrap-tabs]

Bootstrap tabs provide an easy way to create elegant and dynamic tabs to manage the content of web pages without writing any JavaScript code.

201 questions
39
votes
10 answers

AngularJS UI Bootstrap Tabs that support routing

I would like to use AngularJS UI Bootstrap Tabs in my project, but I need it to support routing. For example: Tab URL -------------------- Jobs /jobs Invoices /invoices Payments /payments As far as I can tell from the source code,…
36
votes
5 answers

How to tell which bootstrap tab is selected in Angular-UI

Is there a way to tell which tab that has been selected when using the Bootstrap tabs in Angular UI? I tried watching the panes array but it deosn't seem to be updated when switching tab. Can one specify a callback function when a tab is…
24
votes
3 answers

How to add a close icon in bootstrap tabs?

I want to add a close icon in bootstrap tabs and then I can close the tab by click the icon. I try below but the "X" is displayed not on the same line as tab title. .close { font-size: 20px; font-weight: bold; line-height: 18px; …
sureone
  • 831
  • 2
  • 14
  • 25
19
votes
7 answers

NVD3 Charts not rendering correctly in hidden tab

I am building a page which contains many charts, which are displayed one at a time depending on which tab you are looking at. The chart in the initially active tab renders correctly. However when I click to another tab, the chart is not rendered…
metaColin
  • 1,973
  • 2
  • 22
  • 37
13
votes
7 answers

When screen size made smaller bootstrap tabs are overlapping

When screen size made smaller bootstrap tabs are overlapping like image. I used col-sm and my angular HTML is like this (but any non-angular HTML solution is fine too):
Kle
  • 1,003
  • 2
  • 14
  • 24
12
votes
2 answers

Morris.js chart not working inside of a bootstrap tab

I have a situation where I am trying to use MorrisJS charts inside two different bootstrap tabs. The chart loads fine in the first (default) tab but when I click into the second tab the chart doesn't load properly at all. It is very odd as I am…
zgirod
  • 4,189
  • 3
  • 28
  • 36
11
votes
3 answers

Adding Dynamic Tab in BootStrap Tabs

I am using Twiter Bootstrap Tabs on my page. I want to dynamically add tabs in the view. Currently I am using this code, which is not working $('#tab').append('
  • Tab…
  • Saqib
    • 2,470
    • 3
    • 19
    • 32
    8
    votes
    0 answers

    Morris Donut - Throws a Matrix NaN error when choosing other tab and resizing

    I've been encountered in an issue that was very illusive. I have two tabs: "Dashboard", "Edit App". In "Dashboard" I have a Morris Donut chart. In "Edit App" there's no Morris charts at all. The issue is that when I choose "Edit App" and resize the…
    Eli Van Rock
    • 157
    • 1
    • 1
    • 15
    8
    votes
    2 answers

    Toggle Bootstrap Tabs to Dropdown in Mobile view

    I have a website developing with Bootsrtap 3, I have tab element there. I have to make tabbed items as drop downs when browsing from mobile deveice. Is it possible?
    7
    votes
    4 answers

    Bootstrap 3 Tabs Not Switching Active State Properly

    I have this bit of code - just tabbed panels with separate graphs in each tabbed panel. When I switch tabs the content is not loading correctly. The active state of the panel is not changing when I click another tab, can you help a brotha figure…
    Sabolis
    • 327
    • 1
    • 3
    • 13
    5
    votes
    2 answers

    bootstrap tab click preventDefault not working

    I am using bootstrap 3.3 and following the documents for tabs. The simplest code given in the documentation is not working for me and I am unable to figure out why. $('#mainTabs a').click(function (e) { e.preventDefault() …
    Stacy J
    • 2,721
    • 15
    • 58
    • 92
    5
    votes
    1 answer

    The ACTIVE selector in the Tab control is finding active child elements of the tab-pane during activation which breaks the tab navigation

    I am using bootstrap v-4. I first noticed this when using bootstrap-select version 13 with inside of a tabbed navigation. I narrowed it down to the Tab control finding the active page link in the bootstrap-select "active" and updating it rather than…
    5
    votes
    3 answers

    Bootstrap tabs are not working via AJAX in a modal

    It working fine without modal and ajax. But when I load tabbed panel in modal using ajax it does not select Tab Panes.
    5
    votes
    2 answers

    Remove data-toggle attribute when disabled

    I have a list of tabs with elements that can be disabled - i.e. non-clickable. And when 'disabled' is added as a class, then the mouse over on the element is indicating that the tab is non-clickable. Unfortunately the element is clickable. I am…
    peterbf
    • 217
    • 2
    • 5
    • 12
    4
    votes
    2 answers

    Bootstrap tab for buttons?

    I have a sign up page divided into two sections. I just want to show each section content hiding in current page when someone click these major buttons. The concept is similar to bootstrap tabs, but I'm not using tabs here. These are simple…
    MrWeb
    • 91
    • 2
    • 2
    • 9
    1
    2 3
    13 14