Popup editor Multi-column layout problem

4 posts, 0 answers
  1. Michel
    Michel avatar
    44 posts
    Member since:
    Sep 2011

    Posted 12 Feb 2017 Link to this post

    I'm using a grid with a popup editor and use bootstrap layout.

    I have done the right styling override but the right margin is not there. Any suggestions.

    In the Razor view of the grid

    <style>
      .k-edit-form-container {
        width: auto;
        padding:10px;
      }
     
        .k-edit-form-container div {
          box-sizing: border-box;
        }
    </style>

    In the popup editor

    <div class="row">
      <div class="col-md-3">
        <div class="form-group form-group-sm">
          <label asp-for="NAME_RES" class="control-label"></label>
          <div>
            <input asp-for="NAME_RES" class="form-control" />
            <span asp-validation-for="NAME_RES" class="text-danger" />
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group form-group-sm">
          <label asp-for="TYPE_RES" class="control-label"></label>
          <div>
            <select asp-for="TYPE_RES" asp-items=@ViewBag.arType class="form-control"></select>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group form-group-sm">
          <label asp-for="ROLE_RES" class="control-label"></label>
          <div>
            <select asp-for="ROLE_RES" asp-items=@ViewBag.arRole class="form-control"></select>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group form-group-sm">
          <label asp-for="IDENTNUMBER_RES" class="control-label"></label>
          <div>
            <input asp-for="IDENTNUMBER_RES" class="form-control" />
            <span asp-validation-for="IDENTNUMBER_RES" class="text-danger" />
          </div>
        </div>
      </div>
    </div>

     

    Thanks

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 14 Feb 2017 Link to this post

    Hello Michel,

    You will also need to remove the padding from the wrapping element:
    .k-window>div.k-popup-edit-form{
          padding: 0;
        }

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Michel
    Michel avatar
    44 posts
    Member since:
    Sep 2011

    Posted 14 Feb 2017 in reply to Konstantin Dikov Link to this post

    Hi Konstantin,

    Thank you for your fast reply but the result is the same even in dojo. There is no right margin between the end of the controls and the border of the popup editor windows.

    Am I wrong ?

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 16 Feb 2017 Link to this post

    Hello Michel,

    You can further adjust the padding of the container, so that it can take into account the vertical scrollbar:

    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top