[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

[Neli]

Hi Russell,

Based on your description and code snippets, it appears that after the upgrade, the dialog’s content and action buttons are overflowing and not staying within the dialog boundaries. Here’s how you can troubleshoot and resolve this:

• Please review any custom CSS applied to .container, .k-edit-form-container, or other wrapper elements around the dialog content, as these styles can override the dialog’s built-in layout and cause the content to overflow. In particular, check for rules affecting height, overflow, or position. As a quick test, temporarily remove those custom styles or override the dialog content area so it can scroll properly, for example:

.k-dialog-content {
    overflow-y: auto;
    max-height: 400px; /* Adjust as needed to fit your dialog */
}

• It is also worth simplifying the partial view structure. Nested .container and .k-edit-form-container wrappers can interfere with the dialog’s sizing behavior, so try removing any unnecessary wrappers and verify whether the layout improves. The partial should only contain the dialog content itself and should not include <html>, <body>, or other duplicated layout markup.
• If the dialog simply contains more content than the available space, the content area should scroll instead of spilling outside the window. You can enforce that with a slightly larger limit if needed:

.k-dialog-content {
    max-height: 500px;
    overflow-y: auto;
}

If the issue still persists, the most reliable next step is to compare the current implementation against a minimal example. Create a basic dialog with only a small amount of content and confirm whether it behaves correctly. If it does, then add the partial’s content back gradually until the element or wrapper causing the layout issue becomes clear.

Let me know in case you have any additional questions or need further assistance on the matter.

Regards,
Neli
Progress Telerik

[Russell Haley]

I removed my partial and used the example code from the demo site and it still is broken.


Codex has identified that my css was generated by themebuilder in 2021 so that's the next thread I am going to pull on.

 Current layout loads:

  @progress/kendo-theme-bootstrap@13.1.1/dist/all.css
  kendo 2026.1.212 JS
  inmedix.css
  site.css

  That means an old 2021 ThemeBuilder-generated inmedix.css is being loaded after the modern Kendo Bootstrap theme, so it can override newer dialog/window layout rules. And yes, inmedix.css contains very
  specific Kendo dialog/window rules like .k-window-content, .k-dialog, .k-dialog-buttongroup, etc.

[Russell Haley]

I created a test CSS in ThemeBuilder and it fixed the problem. It looks like I'll have to re-generate my theme in themebuilder. 

[Neli]

Hi Russel,

I’m glad to hear you were able to resolve the issue, and thank you for providing additional details about how it was fixed.

If you need any further assistance regarding this matter, please don’t hesitate to reach out.

Regards,

Neli