[Solved] Form In Partial Rendering Incorrectly

[Russell Haley]

Hello, I am working on a ASPNET MVC application. We have a number of pages that use dialog boxes for edit dialogs. After a recent upgrade, it stopped rendering correctly. Here is the outer page that defines the button and calls the dialog:

SearchSubjectPartial.cshtml 
...
<script>
        function showDialog(mode, title) {
            IMX.session.reset(window.duration || 30);
            state.dialogMode = mode;
            if (mode === 'edit' && window.model) {
                state.model = $.extend({}, window.model);
            }
            var dialog = $('#clinicSubjectsItemDialog').data('kendoDialog');
            dialog.title(title);
            dialog.open();
        }
</script>

<script id="add-patients-template" type="text/kendo-tmpl">
      <button cy-data="subj-add-btn" id="patientButton" name="showNewBtn" class="hide-on-narrow k-button" >Add Patient</button>
</script>

    <div>
        <kendo-dialog id="clinicSubjectsItemDialog" name="ItemDialog" visible="false" width="600" height="600" modal="true" on-close="onCloseSubject" on-open="onOpenSubject" title="Add New Patient">
            <content>
                <partial name="AddEditSubjectPartial" />
            </content>
            <actions>
                <action  text="Submit" primary="true" action="submitPatient" />
                <action  text="Cancel" action="onCloseSubject" />    
            </actions>
        </kendo-dialog>
    </div>

And here is the partial that renders inside it:

AddEditSubjectPartial.cshtml:

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

@{ var sexesList = new List<SelectListItem>() { new SelectListItem { Text = "Male", Value = "M" }, new SelectListItem { Text = "Female", Value = "F" } }; }
<div class="container">
    <div class="js-modify-subject-form">
        <div class="k-edit-form-container">
             <kendo-datasource name="clinic_doctors_list" type="DataSourceTagHelperType.Ajax" server-operation="false">
                <transport>
                    <read url="@Url.Action("List_Doctors", "Clinic")" />
                </transport>
            </kendo-datasource>
            <kendo-datasource name="usa_state_list" type="DataSourceTagHelperType.Ajax" server-operation="false">
                <transport>
                    <read url="@Url.Action("List_USA_States", "Clinic")" />
                </transport>
            </kendo-datasource>
            <kendo-textbox cy-data="edit-subj-id" name="SubjectID" placeholder="" value="0" readonly="false" class="k-hidden" />

            <div class="k-edit-label">
                <label for="FirstName">First Name*</label>
            </div>
            <div class="k-edit-field">
                <kendo-textbox cy-data="edit-subj-firstname" name="FirstName" placeholder="" value="" readonly="false">
                </kendo-textbox>
            </div>
...
        </div>
    </div>
</div>

The dialog doesn't render correctly. Here is the buttons spilling out the bottom of the dialog:



If there is more data, it spills out the bottom. It's a big old mess...



Any help or suggestions would be really useful right about now? 

Thanks,

Russ