Scrollbar not shown when Select All option enabled

[Chris Marshall]

We have multiple SfListBox controls on our dialog, all of these are specific heights setup, however the SfListBox controls that have the Select All option do not work correctly and instead the items are shown outside the bounds of the control, I have added a redline where the box should have added and you can see from the image that the side of the SfListBox did stop drawing at that point.

Below is the code for the screen, are we missing something in the setup of the control?

            <table width="100%" height="100%">

                <tr>

                    <td width="30%" height="100%" valign="top">

                        <OfSection SectionTitle="Working Locations" Style="height: 400px;" IsCollapsible="false">

                            <ChildContent>

                                <OfRow>

                                    <OfFormControl Label="Working Location Type">

                                        <SfDropDownList @bind-Value="@CurrentUserModel.WorkingLocationType" DataSource="@AvailableWorkingLocationTypes" TValue="string" TItem="string" ShowClearButton="false">

                                            <DropDownListEvents TValue="string" TItem="string" ValueChange="OnWorkingLocationTypeChanged"></DropDownListEvents>

                                        </SfDropDownList>

                                    </OfFormControl>

                                </OfRow>

                                <OfRow Style="@availableLocationsVisible">

                                    <OfFormControl Label="Assigned Locations">

                                        <SfListBox Value="@CurrentUserModel.SelectedLocations" DataSource="@AvailableLocations" TItem="LocationModel" TValue="int[]" Height="250px">

                                            <ListBoxSelectionSettings ShowCheckbox="true" ShowSelectAll="true" ></ListBoxSelectionSettings>

                                            <ListBoxFieldSettings Text="LocationName" Value="LocationId"></ListBoxFieldSettings>

                                        </SfListBox>

                                    </OfFormControl>

                                </OfRow>

                                <OfRow Style="@availableLocationGroupsVisible">

                                    <OfFormControl Label="Assigned Location Groups">

                                        <SfListBox Value="@CurrentUserModel.SelectedLocationGroups" DataSource="@AvailableLocationGroups" TItem="LocationGroupModel" TValue="string[]" Height="250px">

                                            <ListBoxSelectionSettings ShowCheckbox="true" ShowSelectAll="true"></ListBoxSelectionSettings>

                                            <ListBoxFieldSettings Text="LocationGroupName" Value="LocationGroupName"></ListBoxFieldSettings>

                                        </SfListBox>

                                    </OfFormControl>

                                </OfRow>

                            </ChildContent>

                        </OfSection>

                    </td>

                    <td width="70%" height="100%" valign="top">

                        <OfSection SectionTitle="Workflows" Style="height: 400px;" IsCollapsible="false">

                            <ChildContent>

                                <div>

                                    <table width="100%">

                                        <tr>

                                            <td width="3%"></td>

                                            <td valign="top" width="45%">

                                                <div style="padding-top: 5px; padding-bottom: 5px;"><strong>Assigned Workflows</strong></div>

                                                <div style="padding-top: 5px; padding-bottom: 5px;">

                                                    <SfListBox Value="@CurrentUserModel.SelectedWorkflows" DataSource="@AvailableWorkflows" TItem="WorkflowModel" TValue="string[]" Height="280px">

                                                        <ListBoxSelectionSettings ShowCheckbox="true"></ListBoxSelectionSettings>

                                                        <ListBoxFieldSettings Text="WorkflowName" Value="WorkflowName"></ListBoxFieldSettings>

                                                    </SfListBox>

                                                </div>

                                            </td>

                                            <td width="4%"></td>

                                            <td valign="top" width="45%">

                                                <div style="padding-top: 5px; padding-bottom: 5px;"><strong>Available Operations</strong></div>

                                                <div style="padding-top: 5px; padding-bottom: 5px;">

                                                    <SfDropDownList @bind-Value="@SelectedWorkflow" DataSource="@AvailableWorkflowsWithOperations" TValue="string" TItem="string" ShowClearButton="false">

                                                        <DropDownListEvents TValue="string" TItem="string" ValueChange="OnWorkflowChanged"></DropDownListEvents>

                                                    </SfDropDownList>

                                                </div>

                                                <div style="padding-top: 5px; padding-bottom: 5px;">

                                                    <SfListBox Value="@SelectedOperations" DataSource="@AvailableOperations" TItem="WorkflowOperationModel" TValue="string[]" Height="200px">

                                                        <ListBoxSelectionSettings ShowCheckbox="true"></ListBoxSelectionSettings>

                                                        <ListBoxFieldSettings Text="OperationName" Value="OperationName"></ListBoxFieldSettings>

                                                    </SfListBox>

                                                </div>

                                            </td>

                                            <td width="3%"></td>

                                        </tr>

                                    </table>

                                </div>

                            </ChildContent>

                        </OfSection>

                    </td>

                </tr>

            </table>

[Chris Marshall]

I was able to fix this by adding a HtmlAttributes reference to the SfListBox entry and then setting the overflow style

private Dictionary<string, object> AssignedLocationsHtmlAttributes = new Dictionary<string, object>() { { "style", "overflow: auto;" } };

[Gayathri KarunaiAnandam]

Hi Chris, 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

Regards, 

Gayathri K