Skip to content
Permalink
Browse files

fix(dropdowns): misalignments in editable row of grid for Material Theme

see #351
  • Loading branch information...
elena-gancheva committed Oct 12, 2018
1 parent 4057cc9 commit 172bd3d974b0d08f60ae15d2fb33f14675fb9c6d
Showing with 247 additions and 0 deletions.
  1. +60 −0 packages/material/scss/grid/_layout.scss
  2. +187 −0 tests/visual/grid.html
@@ -170,6 +170,66 @@ $grid-group-drag-clue-opacity: .9 !default;
height: add-three( $button-line-height * 1em, $button-padding-y * 2, -$text-field-border-width );
}
}

.k-multiselect-wrap {
.k-button {
margin-top: $padding-y * 2;
}
> .k-clear-value {
right: $padding-y * 2;
}
}

.k-dropdown-wrap {
> .k-clear-value {
right: $padding-y * 6;
padding: 0 $padding-y;
}
}

.k-dropdown-wrap,
.k-numeric-wrap,
.k-dateinput-wrap,
.k-picker-wrap {
padding-right: $padding-y;
}

.k-dropdown,
.k-combobox,
.k-autocomplete,
.k-multiselect,
.k-datepicker,
.k-timepicker,
.k-datetimepicker,
.k-dateinput,
.k-numerictextbox {
&[dir="rtl"],
.k-rtl & {
.k-dropdown-wrap,
.k-multiselect-wrap,
.k-picker-wrap,
.k-dateinput-wrap,
.k-numeric-wrap {
padding-left: $padding-y;
padding-right: $text-field-padding;
}

.k-dropdown-wrap {
> .k-clear-value {
right: auto;
left: $padding-y * 6;
}
}

.k-multiselect-wrap {
> .k-clear-value {
right: auto;
left: $padding-y * 2;
}
}
}
}

.k-textbox,
.k-textbox.k-input, {
height: button-size();
@@ -82,6 +82,192 @@

</div>

<div class="section">
<kendo-grid class="k-widget k-grid k-grid-no-scrollbar" style="width: 800px;">
<div class="k-grid-aria-root">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>
<colgroup>
<col style="width: 68px;">
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th class="k-header">
</th>
<th class="k-header">
Autocomplete
</th>
<th class="k-header">
Combobox
</th>
<th class="k-header">
Dropdown
</th>
<th class="k-header">
Multiselect
</th>
</tr>

<tr class="k-grid-edit-row">
<td>LTR</td>
<td>
<span class="k-widget k-autocomplete"><input type="text" class="k-input" placeholder="Autocomplete..."></span>
</td>
<td>
<span class="k-widget k-combobox"><span class="k-dropdown-wrap"><input class="k-input" type="text" placeholder="Combo..."><span class="k-icon k-clear-value k-i-close" title="clear"></span><span class="k-select"><span class="k-icon k-i-arrow-60-down"></span></span></span></span>
</td>
<td>
<span class="k-widget k-dropdown"><span class="k-dropdown-wrap"><span class="k-input">Dropdown...</span><span class="k-select"><span class="k-icon k-i-arrow-60-down"></span></span></span></span>
</td>
<td>
<span class="k-widget k-multiselect"><div class="k-multiselect-wrap k-floatwrap"><span class="k-icon k-clear-value k-i-close" title="clear"></span><input class="k-input" type="text" placeholder="Multiselect..."></div></span>
</td>
</tr>

<tr class="k-grid-edit-row">
<td>RTL</td>
<td>
<span class="k-widget k-autocomplete" dir="rtl"><input type="text" class="k-input" placeholder="Autocomplete..."></span>
</td>
<td>
<span class="k-widget k-combobox" dir="rtl"><span class="k-dropdown-wrap"><input class="k-input" type="text" placeholder="Combo..."><span class="k-icon k-clear-value k-i-close" title="clear"></span><span class="k-select"><span class="k-icon k-i-arrow-60-down"></span></span></span></span>
</td>
<td>
<span class="k-widget k-dropdown" dir="rtl"><span class="k-dropdown-wrap"><span class="k-input">Dropdown...</span><span class="k-select"><span class="k-icon k-i-arrow-60-down"></span></span></span></span>
</td>
<td>
<div class="k-widget k-multiselect" dir="rtl"><div class="k-multiselect-wrap k-floatwrap"><span class="k-icon k-clear-value k-i-close" title="clear"></span><input class="k-input" type="text" placeholder="Multiselect..."></div></div>
</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
</kendo-grid>
</div>

<div class="section">
<kendo-grid class="k-widget k-grid k-grid-no-scrollbar" style="width: 800px;">
<div class="k-grid-aria-root">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>
<colgroup>
<col style="width: 68px;">
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th class="k-header">
</th>
<th class="k-header">
Datepicker
</th>
<th class="k-header">
Timepicker
</th>
<th class="k-header">
Datetime
</th>
<th class="k-header">
Dateinput
</th>
</tr>

<tr class="k-grid-edit-row">
<td>LTR</td>
<td>
<span class="k-widget k-datepicker"><span class="k-picker-wrap"><input type="text" class="k-input" placeholder="Datepicker..."><span class="k-select"><span class="k-icon k-i-calendar"></span></span></span></span>
</td>
<td>
<span class="k-widget k-timepicker"><span class="k-picker-wrap"><input type="text" class="k-input" placeholder="Timepicker..."><span class="k-select"><span class="k-icon k-i-clock"></span></span></span></span>
</td>
<td>
<span class="k-widget k-datetimepicker"><span class="k-picker-wrap"><input type="text" class="k-input" placeholder="Datetime..."><span class="k-select"><span class="k-link k-link-date"><span class="k-icon k-i-calendar"></span></span><span class="k-link k-link-time"><span class="k-icon k-i-clock"></span></span></span></span></span>
</td>
<td>
<span class="k-widget k-dateinput"><span class="k-dateinput-wrap"><input type="text" class="k-input" placeholder="Dateinput..."><span class="k-select"><span class="k-link k-link-increase"><span class="k-icon k-i-arrow-n"></span></span><span class="k-link k-link-decrease"><span class="k-icon k-i-arrow-s"></span></span></span></span></span>
</td>
</tr>

<tr class="k-grid-edit-row">
<td>RTL</td>
<td>
<span class="k-widget k-datepicker" dir="rtl"><span class="k-picker-wrap"><input type="text" class="k-input" placeholder="Datepicker..."><span class="k-select"><span class="k-icon k-i-calendar"></span></span></span></span>
</td>
<td>
<span class="k-widget k-timepicker" dir="rtl"><span class="k-picker-wrap"><input type="text" class="k-input" placeholder="Timepicker..."><span class="k-select"><span class="k-icon k-i-clock"></span></span></span></span>
</td>
<td>
<span class="k-widget k-datetimepicker" dir="rtl"><span class="k-picker-wrap"><input type="text" class="k-input" placeholder="Datetime..."><span class="k-select"><span class="k-link k-link-date"><span class="k-icon k-i-calendar"></span></span><span class="k-link k-link-time"><span class="k-icon k-i-clock"></span></span></span></span></span>
</td>
<td>
<span class="k-widget k-dateinput" dir="rtl"><span class="k-dateinput-wrap"><input type="text" class="k-input" placeholder="Dateinput..."><span class="k-select"><span class="k-link k-link-increase"><span class="k-icon k-i-arrow-n"></span></span><span class="k-link k-link-decrease"><span class="k-icon k-i-arrow-s"></span></span></span></span></span>
</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
</kendo-grid>
</div>

<div class="section">
<kendo-grid class="k-widget k-grid k-grid-no-scrollbar" style="width: 800px;">
<div class="k-grid-aria-root">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>
<colgroup>
<col style="width: 68px;">
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th class="k-header">
</th>
<th class="k-header">
Numeric
</th>
<th class="k-header">
</th>
<th class="k-header">
</th>
</tr>
<tr class="k-grid-edit-row">
<td>LTR</td>
<td>
<span class="k-widget k-numerictextbox"><span class="k-numeric-wrap"><input type="text" class="k-input" placeholder="Numeric..."><span class="k-select"><span class="k-link k-link-increase"><span class="k-icon k-i-arrow-60-up"></span></span><span class="k-link k-link-decrease"><span class="k-icon k-i-arrow-60-down"></span></span></span></span></span>
</td>
<td></td>
<td></td>
</tr>
<tr class="k-grid-edit-row">
<td>RTL</td>
<td>
<span class="k-widget k-numerictextbox" dir="rtl"><span class="k-numeric-wrap"><input type="text" class="k-input" placeholder="Numeric..."><span class="k-select"><span class="k-link k-link-increase"><span class="k-icon k-i-arrow-60-up"></span></span><span class="k-link k-link-decrease"><span class="k-icon k-i-arrow-60-down"></span></span></span></span></span>
</td>
<td></td>
<td></td>
</tr>
</thead>
</table>
</div>
</div>
</div>
</kendo-grid>
</div>

<div class="section">
<!-- filter row, checkbox selection -->
<kendo-grid class="k-widget k-grid k-grid-no-scrollbar" style="width: 800px;">
@@ -109,6 +295,7 @@
Numeric column
</th>
</tr>

<tr class="k-filter-row">
<td>
</td>

0 comments on commit 172bd3d

Please sign in to comment.
You can’t perform that action at this time.