This is a migrated thread and some comments may be shown as answers.

Popup editor Multi-column layout problem

3 Answers 248 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michel
Top achievements
Rank 1
Michel asked on 12 Feb 2017, 10:03 PM

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

 

3 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 14 Feb 2017, 12:01 PM
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.
0
Michel
Top achievements
Rank 1
answered on 14 Feb 2017, 07:51 PM

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 ?

0
Konstantin Dikov
Telerik team
answered on 16 Feb 2017, 09:22 AM
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.
Tags
Grid
Asked by
Michel
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Michel
Top achievements
Rank 1
Share this question
or