Dropdown doesn't respond to alignment commands

Hi,
It appears to me that the RadzenDropdown component always renders in the top left corner of the container and doesn't respond to alignment commands. Is there a way to have the dropdown vertically centered, for example? I've tried Bootstrap alignment classes with no success.

Just tried to right align DropDown in a column with Radzen and worked normally for me:

Hi @enchev,
Thanks for the reply! How would you define vertical alignment for the elements in the screenshot below?

..and the code:

<div class="row aw-col-border2 text-light awbg-light align-items-baseline">
		<div class="col-12 p-2 align-items-baseline align-self-baseline">
			<RadzenDropDown AllowClear="false" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" @bind-Value="@selectedGroupID"
							Multiple="false" Data="@groups" TextProperty="Name" ValueProperty="ID" Style="width:500px;" Change="@ChangeGroup" />
			<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Add new group" @onclick="OnAddGroup">Add</button>
			@if (IsGroupDeletingEnabled)
			{
				<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Delete selected group" @onclick="OnDeleteGroup">Delete</button>
			}
			else
			{
				<button type="button" class="btn btn-secondary" disabled data-toggle="tooltip" data-placement="top" title="Delete selected group" @onclick="OnDeleteGroup">Delete</button>
			}
			<RadzenTextBox @bind-Value="@groupName" MaxLength="30" />
			<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Save group name" @onclick="OnSaveGroupName">Save</button>
		</div>
	</div>

It's currently align-items-baseline but align-items-center doesn't have the desired outcome either.

Those Bootstrap classes align the element themselves and not their content. I recommend referring to the Bootstrap documentation.

You're right, d-flex was missing. I'm new to web development as you might tell. Thanks!

Hello Radzen Team,

I can't believe I can't get my dropdown to align with these buttons that were automatically generated, and am surprised that this isn't a very common issue.

So I need to do something with dflex? Is that something I'd set on the containing row, or on the dropdown, or...?

Thanks for any help,
Slosuenos

Use the suggestion that @enchev gave. Put them inside a Column component and set its vertical alignment to Center.

This happens because HTML and CSS follow some rules which are sometimes hard to reason(vertical alignment especially). Check this StackOverflow question for an example which is similar to this case: https://stackoverflow.com/questions/44933315/two-divs-with-inline-block-style-not-aligned. The solution is to either set the vertical alignment of all inline-block elements to something other than the default (baseline) or put them in an element with a flex display and set the vertical alignment (which is the solution I provided).

@korchev thank you! And thanks for providing an explanation...

Slosuenos

Hi,
Let me also paste my code as it is currently working, should someone still have the same issue.

<div class="row aw-col-border2 text-light awbg-light">
		<div class="col-12 p-2 d-flex align-items-center">
			<RadzenDropDown AllowClear="false" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" @bind-Value="@selectedGroupID"
							Multiple="false" Data="@groups" TextProperty="Name" ValueProperty="ID" Style="width:500px;" Change="@ChangeGroup" />
			<span>&nbsp;</span>
			<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Add new group" @onclick="OnAddGroup">Add</button>
			<span>&nbsp;</span>
			@if (IsGroupDeletingEnabled)
			{
				<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Delete selected group" @onclick="OnDeleteGroup">Delete</button>
			}
			else
			{
				<button type="button" class="btn btn-secondary" disabled data-toggle="tooltip" data-placement="top" title="Delete selected group" @onclick="OnDeleteGroup">Delete</button>
			}
			<span>&nbsp;</span>
			<RadzenTextBox @bind-Value="@groupName" MaxLength="30" />
			<span>&nbsp;</span>
			<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Save group name" @onclick="OnSaveGroupName">Save</button>
		</div>
	</div>

So there should be the d-flex class in the column component, after which align-items-center will work.

1 Like