RadioButtonList Overflows the Containing RadzenCard

Radzen.Blazor Components
#1

Hi,

I have a vertical RadioButtonLIst that is linked to a data source and is contained within a RadzenCard.

This works fine, except when a large number of radio buttons are created, when the buttons overflow the bottom of the RadzenCard area and write over elements lower on the page.

Is there a way to make the radio buttons appear in a fixed size area, where scroll bars appear if a large number of buttons are created?

Many thanks, Peter

Current implementation

    <RadzenTabsItem Text="Alpaca Device">
        <div class="row">
            <RadzenCard Style="width:600px; margin-bottom: 20px; height:800px; margin-right: 20px">
                <RadzenRadioButtonList ma @bind-Value=@selectedDevice TValue="AscomDevice" Orientation="Orientation.Vertical" Change=@(args => OnDeviceChanged(args)) Data=@ascomDevices TextProperty="DisplayName" ValueProperty="AscomDevice" />
            </RadzenCard>
            <RadzenCard Style="width:600px; margin-bottom: 20px; height:800px; margin-right: 20px">
                <RadzenTextArea Style="line-height:1.3" @bind-Value=@alpacaDevices Cols="300" Rows="40" />
            </RadzenCard>
        </div>
        <RadzenButton Click=@(args => OnAlpacaSearchClick()) Text="Search" Style="margin-bottom: 20px; width: 150px" />
        <RadzenButton Click=@(args => OnSelectDeviceClick("Alpaca")) Text="Select" Style="margin-bottom: 20px; width: 150px" />
    </RadzenTabsItem>
#2

Hi @PeterSimpson ,

You can apply overflow:auto to the RadzenCard and it will display a scrollbar when the content exceeds the specified height.

<RadzenCard Style="width:600px; margin-bottom: 20px; overflow: auto; height:800px; margin-right: 20px">
   <RadzenRadioButtonList ma @bind-Value=@selectedDevice TValue="AscomDevice" Orientation="Orientation.Vertical" Change=@(args => OnDeviceChanged(args)) Data=@ascomDevices TextProperty="DisplayName" ValueProperty="AscomDevice" />
</RadzenCard>
1 Like
#3

So straightforward, works a treat! As is apparent, I'm still getting my head round how / when to use CSS in my first Blazor project. :grinning:

Many thanks, Peter