Custom Popup Editor Layout Issue

8 posts, 0 answers
  1. Arun Kumar
    Arun Kumar avatar
    60 posts
    Member since:
    Nov 2009

    Posted 09 Jul 2014 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 11 Jul 2014 Link to this post

    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
     

    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. UI for ASP.NET MVC is VS 2017 Ready
  4. Arun Kumar
    Arun Kumar avatar
    60 posts
    Member since:
    Nov 2009

    Posted 16 Jul 2014 in reply to Dimo Link to this post

    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.
  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 16 Jul 2014 Link to this post

    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
     

    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.

     
  6. Arun Kumar
    Arun Kumar avatar
    60 posts
    Member since:
    Nov 2009

    Posted 16 Jul 2014 in reply to Dimo Link to this post

    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.

  7. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 17 Jul 2014 Link to this post

    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
     

    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.

     
  8. Rubens
    Rubens avatar
    4 posts
    Member since:
    Oct 2012

    Posted 12 Apr Link to this post

    Any news about this issue? 
  9. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 14 Apr Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready