[Solved] Popup Mode Editing In Grid Alaignment Issue When Using Large No Of Fields

[Pradeep N]

Hi,
I am using Nested Grid- Popup mode editing/add feature.
If the fields are less than 5 the alignments are correct, If more than that insert button is displaying at the 5th row which messes the alignment.
I have attached the screen shot for your reference.

I have added the following css from the online demo.

/* in-form editing */
    .t-edit-form-container
    {
        width: 350px;
        margin: 1em;
    }

    .t-edit-form-container .editor-label,
    .t-edit-form-container .editor-field
    {
        padding-bottom: 1em;
        float: left;
    }

    .t-edit-form-container .editor-label
    {
        width: 30%;
        text-align: right;
        padding-right: 3%;
    }

    .t-edit-form-container .editor-field
    {
        width: 60%;
    }

Thanks,
Pradeep.

[Alex Gyoshev]

Hi Pradeep,

The issue is caused by the long field name (and specifically, its label). You can address the problem either by adding clear: left; to the .t-edit-form-container .editor-label rule, like this:

.t-edit-form-container .editor-label
{
    width: 30%;
    text-align: right;
    padding-right: 3%;
    clear: left;
}

Greetings,
Alex Gyoshev
the Telerik team

[Pradeep N]

Hi,
That fixed the my problem.
Thanks for the resolution.
Regards,
Pradeep.