Weird alignment

[DoomerDGR8]

I have

	<div class="row mt-3">
		<div class="col-lg-4">
			@(Html.Kendo().DropDownListFor(m => m.AwardTypeId)
			      .Size(ComponentSize.Medium)
			      .Rounded(Rounded.Medium)
			      .FillMode(FillMode.Outline)
			      .OptionLabel("Select Award Type...")
			      .HtmlAttributes(new { style = "width: 100%" })
			      .DataTextField("Name")
			      .DataValueField("Id")
			      .DataSource(source =>
			      {
				      source.Read(read =>
				      {
					      read.Action("GetLookupAwardTypes", "Api");
				      });
			      })
			      .Events(e =>
			      {
					e.Select("AwardTypeId_OnSelect");
			      })
				)
		</div>

		<div class="col-lg-8">
			<kendo-textbox for="TenderNumber" size="ComponentSize.Medium" rounded="Rounded.Medium" fill-mode="FillMode.Outline" enable="false">
				<textbox-label content="@nameof(Model.TenderNumber)" floating="true"/>
			</kendo-textbox>
		</div>
	</div>

Renders:

<div class="row mt-3">
		<div class="col-lg-4">
			<span title="" class="k-picker k-dropdownlist k-picker-outline k-picker-md k-rounded-md" unselectable="on" role="combobox" aria-expanded="false" tabindex="0" aria-controls="AwardTypeId_listbox" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-busy="false" aria-describedby="d51a34cd-9a61-4c07-af6f-dd41980be3a7" aria-activedescendant="c66cf112-868e-4f3d-bcfa-ad32c0cf3f7e"><span id="d51a34cd-9a61-4c07-af6f-dd41980be3a7" unselectable="on" class="k-input-inner"><span class="k-input-value-text">Tender</span></span><button type="button" tabindex="-1" unselectable="on" class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button" aria-label="select"><span class="k-icon k-i-arrow-s k-button-icon"></span></button><input data-val="true" data-val-required="The AwardTypeId field is required." id="AwardTypeId" name="AwardTypeId" style="width: 100%; display: none;" type="text" value="0" data-role="dropdownlist"></span><script>kendo.syncReady(function(){jQuery("#AwardTypeId").kendoDropDownList({"select":AwardTypeId_OnSelect,"dataTextField":"Name","dataValueField":"Id","optionLabel":"Select Award Type...","value":"0","size":"medium","rounded":"medium","fillMode":"outline","dataSource":{"transport":{"read":{"url":"/Api/GetLookupAwardTypes"},"prefix":""},"schema":{"errors":"Errors"}}});});</script>
		</div>

		<div class="col-lg-8">
			<span data-role="floatinglabel" class="k-floating-label-container k-state-empty k-focus"><label class="k-label k-input-label" for="TenderNumber">TenderNumber</label><span class="k-input k-textbox k-input-outline k-input-md k-rounded-md" style=""><input id="TenderNumber" name="TenderNumber" type="text" value="" data-role="textbox" aria-disabled="false" class="k-input-inner" autocomplete="off" style="width: 100%;"></span></span>
				
			<script>kendo.syncReady(function(){jQuery("#TenderNumber").kendoTextBox({"enable":false,"label":{"content":"TenderNumber","floating":true},"size":"medium","rounded":"medium","fillMode":"outline"});});</script>
		</div>
	</div>

That looks like this:And floating label:

How to align them properly? I'm using the Material Main theme.

[Mihaela]

Hello Hassan,

Because of the floating label container (class "k-floating-label-container") that is positioned with "padding-top: 20px", the TextBox is not aligned with the DropDownList.

I would suggest applying the following CSS style to align the controls horizontally:

<style>
    .k-dropdownlist {
        margin-top: 20px;
    }
</style>

Here is a REPL example for your reference:

https://netcorerepl.telerik.com/QGOicylo31P3pAlU40

 

 

Regards, Mihaela Progress Telerik