Custom Popup Editor Layout Issue

[Arun Kumar]

Hi,

I am using the following css rule to set popup window width. I got it from support thread.

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

    div.k-edit-form-container div.editor-field textarea, input.k-textbox {
        width: 100%;
        max-width: none;
    }

But still layout is not rendered properly. I am using bootstrap "form-control" class.

Thanks in advance.

[Dimo]

Hello Arun,

You need to enforce border-box box-sizing on the Bootstrap-related HTML elements in the edit form. Please refer to our documentation:

http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap#nesting-kendo-ui-widgets-and-bootstrap-grid-layout

Please note that if you apply border-box box-sizing styles to Kendo UI widgets, this may break their appearance.

Regards,
Dimo
Telerik

 

 

[Arun Kumar]

Hello Dimo,

I have added border-box box-sizing css rule. Now layout issue is gone. I face another issue of textbox width. If I add the below css style single line textbox width rendered properly but multi-line textbox width is not rendered properly.

div.k-edit-form-container .form-control {
      width: 90%;
      height: auto;
  }

Any help would be appreciated.

Thanks in advance.

[Dimo]

Hello Arun,

This issue does not seem related to Kendo UI, but to general CSS styling. Do you manage to achieve the desired layout if the form is outside a Kendo UI Window (Grid popup edit form) ? If yes, then please provide the form HTML and all relevant CSS code.

Regards,
Dimo
Telerik

 

 

[Arun Kumar]

Hello Dimo,

Attached image is same layout without Kendo window. Here I am NOT using any custom css style only bootstrap and kendo styles. Only inside window I have added that border-box box-sizing css rule as per your suggestion.

[Dimo]

Hello Arun,

Please provide a runnable example or a live URL, which outputs the form that you have shown on the screenshot and includes all relevant CSS styling. In this way I will be able to check what causes the misalignment and provide further advice.

Regards,
Dimo
Telerik

 

 

[Rubens]

Any news about this issue? 

[Dimo]

Hi Rubens,

The previously provided documentation article about nesting Kendo UI and Bootstrap layouts is still applicable:

http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nest-widgets-and-bootstrap-grid-layout

In case you are experiencing another issue, please provide an example for inspection.

Regards,
Dimo
Telerik