Tabs in modal - Strange display issue

[GoGorilla]

I am trying to add some tabs to a modal, which works OK, but a scroll bar is always displayed on the initial load:

As soon as one of the Tabs are clicked it behaves as expected:

This only happens in a modal, the same code on a page works fine. Example page below:

New-UDPage -Name “test” -Icon baseball_ball -Content{

New-UDTabContainer -Tabs {
    New-UDTab -Text 'Tab1' -Content{
        New-UDParagraph -Text 'This is Tab1'
    }

    New-UDTab -Text 'Tab2' -Content{
        New-UDParagraph -Text 'This is Tab2'
    }

    New-UDTab -Text 'Tab3' -Content{
        New-UDParagraph -Text 'This is Tab3'
    }
}

New-UDButton -Text 'More Tabs' -Icon baseball_ball -onclick{
    Show-UDModal -Content{
            New-UDTabContainer -Tabs {
                New-UDTab -Text 'Tab1.1' -Content{
                    New-UDParagraph -Text 'This is Tab1.1'
                }
        
                New-UDTab -Text 'Tab2.1' -Content{
                    New-UDParagraph -Text 'This is Tab2.1'
                }
        
                New-UDTab -Text 'Tab3.1' -Content{
                    New-UDParagraph -Text 'This is Tab3.1'
                }
        }
    } 
}

}

[PorreKaj]

This also happens (Edit: sometimes apparently) when the tabs exceed the screen width, and during resizing of the browser.

I wonder if this happens if the Tabcontrol is placed in a Card for example. (does not)

[GoGorilla]

I have just tested this, it does not happen inside a card on the page, but it does happen in a card inside a modal.

Is there a way to control the size of the tab container?

[PorreKaj]

Not that I, nor the docs, know of

[adam]

I just noticed this same issue with tabs! Is a bug…

[GoGorilla]

Thanks for confirming Adam (Glad it’s not just me)

Do we need to raise an issue for it?

[adam]

Yeah we do. Could you please create one?

[GoGorilla]

Issue opened on GitHub

Tabs in Modal Display issue

[psDevUK]

I was just thinking I know this has been classifed as a bug, but if you only want to use TABS in a modal on your dashboard then I am sure tweaking the padding or margin on the tab in css would fix the issue…it’s like 23:59 where I am but if I get time tomorrow, as you kindly posted you code will see if I can produce a hack fix…although if you use tabs elsewhere this then may cause them to look weird…if you get me?

[mylabonline]

Hey - I confirmed the same thing with Tabs and Modals.

I have a workaround thats works great for me, but the only problem with this workaround is if you have more tabs then fit in your Modal, the scroll bar will not appear.

quick fix (workaround) - add this to your theme file

'.tabs' = @{
    'overflow-x' = 'hidden !important'
}