Multiple inputs in single toolbar item?

I'd like to have a toolbar that has two checkboxes, one on top of the other, but I can't seem to make the checkboxes line break, is it not possible to have a single toolbar item with multiple inputs?

                            <ToolbarItem Type="ItemType.Input">
                                <Template>
                                    <p><SfCheckBox TChecked=" bool" @bind-Checked="EastSideChecked" ValueChange="@OnOrgLocationFilterChange" Label="East Side"></SfCheckBox></p>
                                    <p><SfCheckBox TChecked="bool" @bind-Checked="WestSideChecked" ValueChange="@OnOrgLocationFilterChange" Label="West Side"></SfCheckBox></p>
                                </Template>
                            </ToolbarItem>





4 Replies 1 reply marked as answer

BB Ben Becker February 22, 2021 05:03 AM UTC



NR Nevitha Ravi Syncfusion Team February 23, 2021 11:39 AM UTC

Hi Ben, 

Greetings from Syncfusion Support. 

You can’t use two inputs in single toolbar item which may cause improper values to the respective inputs. So we suggest you to use separate items for both the inputs and customize it using CSS. We have prepared a sample for your reference which can be downloaded from the following link. 
 
        <ToolbarItem Type="ItemType.Input" CssClass="test1"> 
            <Template> 
                <SfCheckBox Checked="true" Label="Test1"></SfCheckBox> 
            </Template> 
        </ToolbarItem> 
        <ToolbarItem Type="ItemType.Input" CssClass="test2"> 
            <Template> 
                <SfCheckBox Checked="false" Label="Test2"></SfCheckBox> 
            </Template> 
        </ToolbarItem>

<
style> 
    .e-toolbar .e-toolbar-items .e-toolbar-item.test1 { 
        height: 10px; 
        top: 10px; 
        position: absolute; 
    } 
    .e-toolbar .e-toolbar-items .e-toolbar-item.test2 { 
        left: 552px; 
        height: 10px; 
        top: 33px; 
        position: absolute; 
    } 
</style> 
 
Please try the above solution and get back to us if you need any further assistance. 

Regards, 
Nevitha  


Marked as answer

BB Ben Becker February 23, 2021 05:34 PM UTC

This makes sense and will work perfect, thank you!


VM Vengatesh Maniraj Syncfusion Team February 24, 2021 08:24 AM UTC

Hi Ben, 
 
You are most welcome. 
 
Please get in touch with us if you need any further assistance. 
 
Regards, 
Vengatesh  


Loader.
Up arrow icon