Weird alignment: Switch and DropDownlList

[DoomerDGR8]

I have this:

	<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>

And that renders:

<div class="row mt-3">
	<div class="col-lg-1">
		<div style="text-align: center; vertical-align: center;">
			<span class="k-switch k-switch-lg k-rounded-full k-switch-on" role="switch" tabindex="0" aria-checked="true" style=""><input data-val="true" data-val-required="The OverrideLetter field is required." id="OverrideLetter" name="OverrideLetter" type="checkbox" value="true" data-role="switch" style="display: none;" checked="checked"><span class="k-switch-track k-rounded-full"><span class="k-switch-label-on">On</span><span class="k-switch-label-off" aria-hidden="true">Off</span></span><span class="k-switch-thumb-wrap"><span class="k-switch-thumb k-rounded-full"></span></span></span><input name="OverrideLetter" type="hidden" value="false"><script>kendo.syncReady(function(){jQuery("#OverrideLetter").kendoSwitch({"change":OverrideLetter_OnChange,"checked":false,"size":"large","trackRounded":"full","thumbRounded":"full"});});</script>
		</div>
	</div>

	<div class="col-lg-11">
		<span title="" class="k-picker k-dropdownlist k-picker-outline k-picker-md k-rounded-md" unselectable="on" role="combobox" aria-expanded="false" aria-controls="OverriddenLetter_listbox" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-busy="false" aria-describedby="e2f4301b-c2b1-45e8-84ff-7885e4e3a766" tabindex="0" aria-activedescendant="f8b0ffca-e902-4c18-be20-ababce4f16a4"><span id="e2f4301b-c2b1-45e8-84ff-7885e4e3a766" unselectable="on" class="k-input-inner"><span class="k-input-value-text"><span class="selected-value"></span><span>COMM/RL/17-1</span></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 id="OverriddenLetter" name="OverriddenLetter" style="width: 100%; display: none;" type="text" value="" data-role="dropdownlist"></span><script>kendo.syncReady(function(){jQuery("#OverriddenLetter").kendoDropDownList({"dataTextField":"RefNumber","dataValueField":"Id","enable":false,"height":500,"optionLabel":"Select RL to override...","template":"\u003cspan class=\"k-state-default\"\u003e\u003cstrong\u003e#: data.RefNumber #\u003c/strong\u003e\u003cp\u003e#: data.Subject #\u003c/p\u003e\u003c/span\u003e","valueTemplate":"\u003cspan class=\"selected-value\"\u003e\u003c/span\u003e\u003cspan\u003e#:data.RefNumber#\u003c/span\u003e","filter":"contains","size":"medium","rounded":"medium","fillMode":"outline","dataSource":{"transport":{"read":{"url":"/Api/GetLookupLetterQuick"},"prefix":""},"schema":{"errors":"Errors"}}});});</script>
	</div>
</div>

Which looks like this:

How to make the Switch either bigger in width and height or simply align its center horizontally and vertically?

[Mihaela]

Hello Hassan,

You can adjust the size of the Switch by using the Size() method. It increases its width and height. Also, you could set a specific width through the Width() method:

            @(Html.Kendo().Switch()
                .Name("OverrideLetter")
                .Size(ComponentSize.Large)
                .Width(50)
            )

 

To align the Switch and the DropDownList horizontally, I would suggest applying the CSS style to the "col-lg-1" class:

<style>
    .col-lg-1 {
        display: flex;
        align-items: center;
    }
</style>

 

Check out the REPL example below:

https://netcorerepl.telerik.com/mQaMcSlz16wkzOW402

 

Regards, Mihaela Progress Telerik