Height/Width issue when inside tab

[jscarle]

When placing checkboxes inside a tab, the width and height become 0px.

[esyriani]

I have the same problem. Is there a quick fix?

[casually-creative]

Experiencing the same. I placed the toggle button inside a bootstrap dropdown menu, and the width becomes 0px. For comparison I placed it in a high level element, and it worked perfectly. I've double checked and there's none of my custom css in effect. It seems like the script that dynamically sets the width and height in pixels, is just not working in some scenarios.

[gitbrent]

Duplicate of Issue #15

The next release will prevent controls from being 0px

[vincentasakura-ms]

The width problem also occurs on hidden Bootstrap tabs. The < label > elements become too short and the text inside it gets cut off.

[vincentasakura-ms]

Update: As some kind of workaround I applied some custom CSS on my Bootstrap tabs when they're hidden. Inspired by https://stackoverflow.com/a/23267110, I added this CSS

.tab-content.width-fix > .tab-pane:not(.active),
.pill-content.width-fix > .pill-pane:not(.active)
{
    display: block;
    height: 0;
    overflow-y: hidden;
}

and added the class "width-fix" to my tab-content <div>, thus:

<div class="tab-content width-fix">
    <div class="tab-pane">... [toggles somewhere here] ...</div>
    ...
</div>

This way, the CSS fix only applies to elements I explicitly want to render differently in that regard.

[deltemp]

My workaround was to copy the width and height values from somewhere else, where it worked, and put it on the DOM ready event, like below:

$(document).ready(function(){ $('[data-toggle="toggle"]').css({'width':'73.3359px', 'height':'38px'}); });

I know that's not ideal, but it worked!

[mashedkeyboard]

Hi @gitbrent, hope you're okay, and thanks for maintaining this amazing library :)

Do you know when the next release will be - and/or any ideas as to how we could help get this issue resolved? Happy to sort out a PR myself if it'd be convenient, but I'd need to root around to find where the actual problem is, so if you know already, any pointers would be appreciated :D

Cheers!

[meduzapat]

my temporary fix until the issue is fixed:

#myTabs .toggle.btn-sm {
    min-width: 79.1333px;
    min-height: 31px;
}

replace the values to match your needs, also you can use different sizes for different "sections"