Right align Kendo-Textboxes in a Dialog

[Russell]

I'm wondering if Telerik has pre-defined CSS to right align a group of kendo-textboxes in a div? I am using a slightly modified default Theme. I'd like these to line up nice and cleanly so it doesn't look jagged like this?

 

 

@{
    ViewData["Title"] = "Modify Patient";
    Layout = null;
}

@{
    var sexesList = new List<SelectListItem>() { new SelectListItem { Text = "Male", Value = "M" }, new SelectListItem { Text = "Female", Value = "F" } };
}
<div>
    <kendo-textbox name="SubjectID" placeholder="" value="" readonly="false" class="k-hidden"/>
    <div>
        <kendo-textbox name="FirstName" placeholder="" value="" readonly="false">
            <textbox-label content="First Name" floating="false" />
        </kendo-textbox>
    </div>
    <div>
        <kendo-textbox name="MiddleName" placeholder="" value="" readonly="false">
            <textbox-label content="Middle Name" floating="false" />
        </kendo-textbox>
    </div>
    
    <div>
        <kendo-textbox name="LastName" placeholder="" value="" readonly="false">
            <textbox-label content="Last Name" floating="false" />
        </kendo-textbox>
    </div>
    <div>
            <kendo-textbox name="MedicalRecordNumber" placeholder="" value="" readonly="false">
                <textbox-label content="MRN" floating="false" />
            </kendo-textbox>
        </div>
    <div>
        <label>Date Of Birth</label>
        <kendo-dateinput name="DateOfBirth" format="MMM/dd/yyyy">
        </kendo-dateinput>
    </div>
    <div>
        <label>Sex</label>
        <kendo-dropdownlist name="Sexes"
                            datatextfield="Text"
                            datavaluefield="Value"
                            bind-to="sexesList">
        </kendo-dropdownlist>
    </div>
    <div>
        <kendo-datasource name="clinic_doctors_list" type="DataSourceTagHelperType.Ajax" server-operation="false">
            <transport>
                <read url="@Url.Action("List_Doctors", "Clinic")" />
            </transport>
        </kendo-datasource>
        <span>
            <label>Doctor:</label>
            <kendo-dropdownlist name="Doctor" option-label="Doctor" placeholder=""
                                datatextfield="FullName"
                                datavaluefield="ClinicUserID"
                                datasource-id="clinic_doctors_list">
            </kendo-dropdownlist>
        </span>
    </div>
    <div>
        <kendo-textbox name="AddressLine1" placeholder="address" value="" readonly="false">
            <textbox-label content="Address Line 1" floating="false" />
        </kendo-textbox>
    </div>
    <div>
        <kendo-textbox name="AddressLine2" placeholder="" value="" readonly="false">
            <textbox-label content="Address Line 2" floating="false" />
        </kendo-textbox>
    </div>

    <div>
        <kendo-textbox name="City" placeholder="" value="" readonly="false">
            <textbox-label content="City" floating="false" />
        </kendo-textbox>
    </div>
    <div>
        <kendo-datasource name="usa_state_list" type="DataSourceTagHelperType.Ajax" server-operation="false">
            <transport>
                <read url="@Url.Action("List_USA_States", "Clinic")" />
            </transport>
        </kendo-datasource>
        <span>
            <label>State:</label>
            <kendo-dropdownlist name="State" option-label="State" placeholder=""
                                datatextfield="StateName"
                                datavaluefield="StateAbbreviation"
                                datasource-id="usa_state_list">
            </kendo-dropdownlist>
        </span>
    </div>
    <div>
        <kendo-textbox name="Country" placeholder="" value="USA" readonly="true">
            <textbox-label content="Country" floating="false" />
        </kendo-textbox>
    </div>
    <div>
        <kendo-textbox name="ZipCode" placeholder="" value="" readonly="false">
            <textbox-label content="Zip" floating="false" />
        </kendo-textbox>
    </div>
    <div>
        <kendo-textbox name="SubjectPhone" placeholder="" value="" readonly="false">
            <textbox-label content=" Phone " floating="false" />
        </kendo-textbox>
    </div>
    <div>
        <kendo-textbox name="SubjectAltPhone" placeholder="" value="" readonly="false">
            <textbox-label content="Alternate Phone Number" floating="false" />
        </kendo-textbox>
    </div>
    <div>
        <kendo-textbox name="SubjectEmail" placeholder="" value="" readonly="false">
            <textbox-label content="Email" floating="false" />
        </kendo-textbox>
    </div>

</div>

 

Thanks,

Russ

[Alexander]

Hi, Russell

Thank you for the provided screenshot and code snippet. Indeed you can achieve the desired result using classes provided by Kendo.

View: 

@{
    ViewData["Title"] = "Home Page";
    var sexesList = new List<SelectListItem>() { new SelectListItem { Text = "Male", Value = "M" }, new SelectListItem { Text = "Female", Value = "F" } };

}

<div class="container">
    <h2 class="text-center">@ViewData["Title"]</h2>
    <div class="k-widget k-window">
        <div class="k-edit-form-container">
            <kendo-textbox name="SubjectID" placeholder="" value="" readonly="false" class="k-hidden" />
            <div class="k-edit-label">
                <label for="FirstName">First Name</label>
            </div>
            <div class="k-edit-field">
                <kendo-textbox name="FirstName" placeholder="" value="" readonly="false">
                </kendo-textbox>
            </div>
            <div class="k-edit-label">
                <label for="MiddleName">Middle Name</label>
            </div>
            <div class="k-edit-field">
                <kendo-textbox name="MiddleName" placeholder="" value="" readonly="false">
                </kendo-textbox>
            </div>
            <div class="k-edit-label">
                <label for="LastName">Last Name</label>
            </div>
            <div class="k-edit-field">
                <kendo-textbox name="LastName" placeholder="" value="" readonly="false">
                </kendo-textbox>
            </div>
            <div class="k-edit-label">
                <label for="Wage">Wage</label>
            </div>
            <div class="k-edit-field">
                <kendo-numerictextbox name="kNumBox" format="c" min="3" max="5">
                </kendo-numerictextbox>
            </div>
            <div class="k-edit-label">
                <label for="MedicalRecordNumber">MBR</label>
            </div>
            <div class="k-edit-field">
                <kendo-textbox name="MedicalRecordNumber" placeholder="" value="" readonly="false">
                </kendo-textbox>
            </div>
            <div class="k-edit-label">
                <label for="Gender">Gender</label>
            </div>
            <div class="k-edit-field">
                <kendo-dropdownlist name="Sexes"
                                    datatextfield="Text"
                                    datavaluefield="Value"
                                    bind-to="sexesList">
                </kendo-dropdownlist>
            </div>
        </div>
    </div>
</div>

 

In this example I have extracted the labels for the components and the components into separate div elements with classes "k-edit-label" and "k-edit-field" applied respectively. I also wrapped all of the labels and components in a container with class "k-edit-form-container". These classes are used in the Popup edit window for the Grid, for example, and you can notice this if you inspect the edit window in the Grid Popup Editing Demo Link to demo.

In addition, you can find some other common CSS classes used in the themes here.

Finally, I am attaching a sample project for you to review.

Regards, Alexander Progress Telerik

[Russell]

Thank you for the solution. Also, that CSS class listing is gold, thank you!

So close... Do I need to adjust the height of my dialog box or is there anything built in?

 

 

Update: Setting the min-height of the dialog is working for me.

    #itemDialog {
        min-height: 600px;
    }

 

Cheers,

Russ

[Alexander]

Hi Russell,

If you're using the dialog, you can set the .Height() method as you prefer. More configuration methods on the dialog are available here.

Please let me know if you have any further questions, and I'll be glad to answer them.

 

Regards, Alexander Progress Telerik