Increase the width of editor controls in grid popup

3 posts, 1 answers
  1. Shameer
    Shameer avatar
    9 posts
    Member since:
    May 2013

    Posted 10 Apr 2014 Link to this post

    Hello,

    I am using Kendo UI for ASP.NET MVC and I am very new to it. I am trying to increase the width of the editor controls in the grid popup editor. Even though I could increase the width of the popup window using 
    .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("CustomEdit").Window(w => w.Title("Edit").Name("customedit").Width(1000)))
    the controls inside the window are not widened with it.

    Can anyone please advise me how it can be done?

    Thanks

    Shameer
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 11 Apr 2014 Link to this post

    Hi Shameer,

    The form container inside the popup window has a default width of 400px. You can override/remove it by placing the following CSS rule on the page:

    div.k-edit-form-container
    {
        width: auto;
    }


    Regards,
    Dimo
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Shameer
    Shameer avatar
    9 posts
    Member since:
    May 2013

    Posted 15 Apr 2014 in reply to Dimo Link to this post

    Thanks Dimo. I could increase the width of the form and input controls inside it using the following styles

    <style type="text/css">
        div.k-edit-form-container {
            width: 80%;
        }
     
            div.k-edit-form-container div.editor-field textarea, input.k-textbox {
                width: 100%;
                max-width: none;
            }
    </style>

    I appreciate your help.

    Thanks

    Shameer
Back to Top