Tabs in Modal

[NeoCoderMatrix86]

Hello :),

I would like to have tabs in a modal dialog (options). Following the examples (https://blazorise.com/docs/components/tab/) I only get the result attached. I'm missing the borders?! What did I do wrong?
Code:

<Tabs SelectedTab="@selectedOptionsTab" Pills="true">
                <Items>
                    <Tab Name="common">@localizer["CommonSettings"]</Tab>
                    <Tab Name="textImport">@localizer["TextimportSettings"]</Tab>
                    <Tab Name="recording">@localizer["RecordSettings"]</Tab>
                </Items>
                <Content>
                    <TabPanel Name="common">
                        <Field Horizontal="true">
                            <FieldLabel ColumnSize="ColumnSize.Is5">@localizer["CultureSetting"]</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is7">
                                <Select TValue="String" @bind-SelectedValue="@optionsController.Options.CultureName">
                                    @foreach (var culture in OptionsController.AvailableCultures)
                                    {
                                        <SelectItem Value="@culture">@culture.DisplayName</SelectItem>
                                    }
                                </Select>
                            </FieldBody>
                        </Field>
                        <Field Horizontal="true">
                            <FieldLabel ColumnSize="ColumnSize.Is5">@localizer["DefaultViewMode"]</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is7">
                                <Select TValue="String" @bind-SelectedValue="@optionsController.Options.ViewModeName">
                                    @foreach (var name in Enum.GetNames(typeof(ViewMode)))
                                    {
                                        <SelectItem Value="@name">@localizer[name]</SelectItem>
                                    }
                                </Select>
                            </FieldBody>
                        </Field>
                        <Field Horizontal="true">
                            <FieldLabel ColumnSize="ColumnSize.Is5">@localizer["CuesheetFileName"]</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is7">
                                <TextEdit @bind-Text="optionsController.Options.CuesheetFileName" />
                            </FieldBody>
                        </Field>
                        <Field Horizontal="true">
                            <FieldLabel ColumnSize="ColumnSize.Is5">@localizer["AutomaticallyLinkTracks"]</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is7">
                                <Check TValue="Boolean?" @bind-Checked="optionsController.Options.LinkTracksWithPreviousOne">@localizer["AutomaticallyLinkTracksWithPrevious"]</Check>
                            </FieldBody>
                        </Field>
                    </TabPanel>
                    <TabPanel Name="textImport">
                        <Field Horizontal="true">
                            <FieldLabel ColumnSize="ColumnSize.Is5">@localizer["TextImportSchemeCuesheet"]</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is7">
                                <TextEdit @bind-Text="optionsController.Options.TextImportScheme.SchemeCuesheet" />
                            </FieldBody>
                        </Field>
                        <Field Horizontal="true">
                            <FieldLabel ColumnSize="ColumnSize.Is5">@localizer["TextImportSchemeTrack"]</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is7">
                                <TextEdit @bind-Text="optionsController.Options.TextImportScheme.SchemeTracks" />
                            </FieldBody>
                        </Field>
                    </TabPanel>
                    <TabPanel Name="recording">
                        <Field Horizontal="true">
                            <FieldLabel ColumnSize="ColumnSize.Is5">@localizer["AudioFileNameRecording"]</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is7">
                                <TextEdit @bind-Text="optionsController.Options.AudioFileNameRecording" />
                            </FieldBody>
                        </Field>
                        <Field Horizontal="true">
                            <FieldLabel ColumnSize="ColumnSize.Is5">@localizer["EnableAudioRecoding"]</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is7">
                                <Check TValue="Boolean" @bind-Checked="optionsController.Options.RecodeAudioRecording">@localizer["RecodeAudioAfterRecording"]</Check>
                            </FieldBody>
                        </Field>
                        <Field Horizontal="true">
                            <FieldLabel ColumnSize="ColumnSize.Is5">@localizer["AudioCodec"]</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is7">
                                <Select TValue="String" @bind-SelectedValue="optionsController.Options.AudioCodecName">
                                    @foreach (var audioCodec in AudioFile.AudioCodecs)
                                    {
                                        <SelectItem Value="audioCodec.Name">@localizer[audioCodec.Name]</SelectItem>
                                    }
                                </Select>
                            </FieldBody>
                        </Field>
                    </TabPanel>
                </Content>
            </Tabs>

[stsrki]

Not sure what borders you meant. Maybe you don't need pills buttons, so remove Pills="true".

Also, try adding some padding on panes. <TabPanel Name="common" Padding="Padding.Is3.OnY">

[stsrki]

Basically, the same code that I have. So, it shows tabs correctly but you're not able to switch between?

[NeoCoderMatrix86]

Correct. I found an issue that seems to handle the fact: #773

[stsrki]

So I tried the code in #773 and it works for me. It seems I did something that fixed it in 0.9.3. And I have indeed made some refactoring lately so as a result it now works as expected.

FYI, I plan to release a new version by the end of this week.

[NeoCoderMatrix86]

Ok, thanks :)

[stsrki]

In the meantime, you can try preview to confirm that it is indeed fixed on your side also: https://github.com/stsrki/Blazorise#try-preview

In case something is still wrong we will have enough time to fix it.