Tabs in modal - Strange display issue

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'
                }
        }
    } 
}

}

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)

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?

Not that I, nor the docs, know of :stuck_out_tongue:

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

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

Do we need to raise an issue for it?

Yeah we do. Could you please create one?

Issue opened on GitHub

1 Like

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?