Grid Popup Edit Template Button Div Width

[Reid]

I have an issue where the DIV on the bottom of the edit templates is not filling the width of the window.  Please see attached.

I have added the following .css which seems to control it but if the width is set to "auto" or "100%" it looks like the attachment.  If I change to to a specific pixel width it sizes but as I remember this should not need to be manually handled.

<style>
   div.k-edit-buttons.k-state-default{
     /*width:560px;*/
     width:100%;
    }
</style>

 

The grid does have the height and width set in the column declarations

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Template").Window(x => x.Width(600).Height(500)))

 

Please advise

 

[Reid]

I forgot to actually attach the screen shot to the last post.

Here it is.

[Viktor Tachev]

Hello Reid,

For making the edit form to stretch to the entire width of the popup window you can use the CSS below:

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

Give it a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik

[Reid]

Hi Viktor,

That solves it.  Thank you for that.

Question though, why do we have to add that style?  Should it not be default?
For instance if you look at this demo page that section is sized correctly but there is no explicit style that you mentioned above.
Grid / Popup editing

[Viktor Tachev]

Hi Reid,

In the example the default width is used by the popup window and there is no need to adjust the width of the edit form container. However, if the width of the popup is changed the additional CSS will also be required. Check out the dojo sample below for reference:

• https://dojo.telerik.com/oMARuFON/2

Regards,
Viktor Tachev
Progress Telerik

[Reid]

Thank you for clarifying that.  I will remember that in the future.