I am currently building an extended DataGrid with additional filters which can not be handled through DataGrid
's filter-options.
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?
Possible workaround
After clicking the properties on/off in dev-tabs it seems that the overflow
-property in .rz-multiselect, .rz-dropdown
is causing the issue. Its value is set to hidden
which seems to move the DropDown
somehow.
<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.