I am currently building an extended DataGrid with additional filters which can not be handled through
Above the grid I want to render different filters depending on the
DataGrid's data. Therefore I've added a simple flex-layout and ended with
DropDown is not in line with the other ones.
I'm really no css-guy so I don't have any idea where this is coming from nor how to fix it.
To reproduce, the layout is pretty simple (using bootstrap 5)
<div class="d-flex my-2 align-items-center" <div class="me-2"> <div> <label>DatePicker</label> </div> <div> <RadzenDatePicker @* ... *@ /> </div> </div> <div class="me-2"> <div> <label>DropDown</label> </div> <div> <RadzenDropDown @* ... *@ /> </div> </div> <div class="me-2"> <div> <label>TextBox</label> </div> <div> <RadzenTextBox @* ... *@ /> </div> </div> </div>
Could anyone more css-proof help?
After clicking the properties on/off in dev-tabs it seems that the
.rz-multiselect, .rz-dropdown is causing the issue. Its value is set to
hidden which seems to move the
<RadzenDataGrid Style="overflow: unset" @* ... *@ />
does help me in this special case. Not sure if this is a global issue or not. It's the same for the
TemplateForm demo. The gap between CreditCard and Card # is 5px greather than between Card # and Cardholder.