Skip to content

Commit

Permalink
fix(forms): apply max-width to form-field-wrap
Browse files Browse the repository at this point in the history
  • Loading branch information
@PreslavKozovski @joneff
PreslavKozovski authored and joneff committed Feb 25, 2021
1 parent 1137e57 commit bee6f6d
Show file tree
Hide file tree
Showing 8 changed files with 188 additions and 15 deletions.
2 changes: 2 additions & 0 deletions packages/bootstrap/scss/forms/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ $horizontal-form-label-margin-x: 10px !default;
$horizontal-form-label-width: 25% !default;
$horizontal-form-label-align: flex-end !default;

$horizontal-form-field-wrap-max-width: calc( ( 100% - #{$horizontal-form-label-width} ) - #{$horizontal-form-label-margin-x} ) !default;

$inline-form-element-width: 25% !default;

$forms-invalid-color: $error !default;
Expand Down
2 changes: 2 additions & 0 deletions packages/classic/scss/forms/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ $horizontal-form-label-margin-x: 10px !default;
$horizontal-form-label-width: 25% !default;
$horizontal-form-label-align: flex-end !default;

$horizontal-form-field-wrap-max-width: calc( ( 100% - #{$horizontal-form-label-width} ) - #{$horizontal-form-label-margin-x} ) !default;

$inline-form-element-width: 25% !default;

$forms-invalid-color: $error !default;
Expand Down
3 changes: 2 additions & 1 deletion packages/default/scss/forms/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,8 @@
}

.k-form-field-wrap {
flex: 1;
max-width: $horizontal-form-field-wrap-max-width;
flex: 1 1 auto;
}

.k-form-buttons {
Expand Down
2 changes: 2 additions & 0 deletions packages/default/scss/forms/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ $horizontal-form-label-margin-x: 10px !default;
$horizontal-form-label-width: 25% !default;
$horizontal-form-label-align: flex-end !default;

$horizontal-form-field-wrap-max-width: calc( ( 100% - #{$horizontal-form-label-width} ) - #{$horizontal-form-label-margin-x} ) !default;

$inline-form-element-width: 25% !default;

$forms-invalid-color: $error !default;
Expand Down
2 changes: 2 additions & 0 deletions packages/material/scss/forms/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ $horizontal-form-label-margin-x: 10px !default;
$horizontal-form-label-width: 25% !default;
$horizontal-form-label-align: flex-end !default;

$horizontal-form-field-wrap-max-width: calc( ( 100% - #{$horizontal-form-label-width} ) - #{$horizontal-form-label-margin-x} ) !default;

$inline-form-element-width: 25% !default;

$forms-invalid-color: inherit !default;
Expand Down
64 changes: 60 additions & 4 deletions tests/visual/form-field-inputs-angular-rtl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,13 +208,41 @@ <h3 class="test-heading">Vertical Form (Angular)</h3>
<label class="k-label">Upload</label>
</kendo-label>
<div>
<kendo-upload class="k-widget k-upload" dir="rtl">
<kendo-upload class="k-widget k-upload">
<div class="k-dropzone">
<div class="k-button k-upload-button">
<input> <span>Select files...</span>
<input />
<span>Select files...</span>
</div>
<kendo-upload-status-total class="k-upload-status k-upload-status-total ng-star-inserted">
<span class="k-icon k-i-checkmark"></span>
Done
</kendo-upload-status-total>
<div class="k-dropzone-hint">Drop files here to upload</div>
</div>
<ul class="k-upload-files k-reset ng-star-inserted">
<li class="k-file ng-star-inserted k-file-success">
<kendo-upload-file-list-single-item class="k-file-single ng-tns-c0-0 ng-star-inserted">
<div class="k-progressbar ng-trigger ng-trigger-progressState" style="opacity: 0;">
<span class="k-progress" style="width: 100%;"></span>
</div>
<span class="k-file-group-wrapper">
<span class="k-file-group k-icon k-i-file-pdf"></span>
</span>
<span class="k-file-name-size-wrapper">
<span class="k-file-name ng-tns-c0-0 ng-star-inserted">test long long long long long long long long long long long long long.pdf</span>
<span class="ng-tns-c0-0 ng-star-inserted k-text-success k-file-information">File successfully uploaded.</span>
</span>
<kendo-upload-file-list-item-action-button class="ng-tns-c0-0">
<strong class="k-upload-status">
<button class="k-button k-button-icon k-flat k-upload-action ng-star-inserted">
<span class="k-icon k-delete k-i-x"></span>
</button>
</strong>
</kendo-upload-file-list-item-action-button>
</kendo-upload-file-list-single-item>
</li>
</ul>
</kendo-upload>
</div>
</kendo-form-field>
Expand Down Expand Up @@ -411,13 +439,41 @@ <h3 class="test-heading">Horizontal Form (Angular)</h3>
</kendo-label>
<div class="k-form-field-wrap">
<div>
<kendo-upload class="k-widget k-upload" dir="rtl">
<kendo-upload class="k-widget k-upload">
<div class="k-dropzone">
<div class="k-button k-upload-button">
<input> <span>Select files...</span>
<input />
<span>Select files...</span>
</div>
<kendo-upload-status-total class="k-upload-status k-upload-status-total ng-star-inserted">
<span class="k-icon k-i-checkmark"></span>
Done
</kendo-upload-status-total>
<div class="k-dropzone-hint">Drop files here to upload</div>
</div>
<ul class="k-upload-files k-reset ng-star-inserted">
<li class="k-file ng-star-inserted k-file-success">
<kendo-upload-file-list-single-item class="k-file-single ng-tns-c0-0 ng-star-inserted">
<div class="k-progressbar ng-trigger ng-trigger-progressState" style="opacity: 0;">
<span class="k-progress" style="width: 100%;"></span>
</div>
<span class="k-file-group-wrapper">
<span class="k-file-group k-icon k-i-file-pdf"></span>
</span>
<span class="k-file-name-size-wrapper">
<span class="k-file-name ng-tns-c0-0 ng-star-inserted">test long long long long long long long long long long long long long.pdf</span>
<span class="ng-tns-c0-0 ng-star-inserted k-text-success k-file-information">File successfully uploaded.</span>
</span>
<kendo-upload-file-list-item-action-button class="ng-tns-c0-0">
<strong class="k-upload-status">
<button class="k-button k-button-icon k-flat k-upload-action ng-star-inserted">
<span class="k-icon k-delete k-i-x"></span>
</button>
</strong>
</kendo-upload-file-list-item-action-button>
</kendo-upload-file-list-single-item>
</li>
</ul>
</kendo-upload>
</div>
</div>
Expand Down
60 changes: 58 additions & 2 deletions tests/visual/form-field-inputs-angular.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,10 +211,38 @@ <h3 class="test-heading">Vertical Form (Angular)</h3>
<kendo-upload class="k-widget k-upload">
<div class="k-dropzone">
<div class="k-button k-upload-button">
<input> <span>Select files...</span>
<input />
<span>Select files...</span>
</div>
<kendo-upload-status-total class="k-upload-status k-upload-status-total ng-star-inserted">
<span class="k-icon k-i-checkmark"></span>
Done
</kendo-upload-status-total>
<div class="k-dropzone-hint">Drop files here to upload</div>
</div>
<ul class="k-upload-files k-reset ng-star-inserted">
<li class="k-file ng-star-inserted k-file-success">
<kendo-upload-file-list-single-item class="k-file-single ng-tns-c0-0 ng-star-inserted">
<div class="k-progressbar ng-trigger ng-trigger-progressState" style="opacity: 0;">
<span class="k-progress" style="width: 100%;"></span>
</div>
<span class="k-file-group-wrapper">
<span class="k-file-group k-icon k-i-file-pdf"></span>
</span>
<span class="k-file-name-size-wrapper">
<span class="k-file-name ng-tns-c0-0 ng-star-inserted">test long long long long long long long long long long long long long.pdf</span>
<span class="ng-tns-c0-0 ng-star-inserted k-text-success k-file-information">File successfully uploaded.</span>
</span>
<kendo-upload-file-list-item-action-button class="ng-tns-c0-0">
<strong class="k-upload-status">
<button class="k-button k-button-icon k-flat k-upload-action ng-star-inserted">
<span class="k-icon k-delete k-i-x"></span>
</button>
</strong>
</kendo-upload-file-list-item-action-button>
</kendo-upload-file-list-single-item>
</li>
</ul>
</kendo-upload>
</div>
</kendo-form-field>
Expand Down Expand Up @@ -414,10 +442,38 @@ <h3 class="test-heading">Horizontal Form (Angular)</h3>
<kendo-upload class="k-widget k-upload">
<div class="k-dropzone">
<div class="k-button k-upload-button">
<input> <span>Select files...</span>
<input />
<span>Select files...</span>
</div>
<kendo-upload-status-total class="k-upload-status k-upload-status-total ng-star-inserted">
<span class="k-icon k-i-checkmark"></span>
Done
</kendo-upload-status-total>
<div class="k-dropzone-hint">Drop files here to upload</div>
</div>
<ul class="k-upload-files k-reset ng-star-inserted">
<li class="k-file ng-star-inserted k-file-success">
<kendo-upload-file-list-single-item class="k-file-single ng-tns-c0-0 ng-star-inserted">
<div class="k-progressbar ng-trigger ng-trigger-progressState" style="opacity: 0;">
<span class="k-progress" style="width: 100%;"></span>
</div>
<span class="k-file-group-wrapper">
<span class="k-file-group k-icon k-i-file-pdf"></span>
</span>
<span class="k-file-name-size-wrapper">
<span class="k-file-name ng-tns-c0-0 ng-star-inserted">test long long long long long long long long long long long long long.pdf</span>
<span class="ng-tns-c0-0 ng-star-inserted k-text-success k-file-information">File successfully uploaded.</span>
</span>
<kendo-upload-file-list-item-action-button class="ng-tns-c0-0">
<strong class="k-upload-status">
<button class="k-button k-button-icon k-flat k-upload-action ng-star-inserted">
<span class="k-icon k-delete k-i-x"></span>
</button>
</strong>
</kendo-upload-file-list-item-action-button>
</kendo-upload-file-list-single-item>
</li>
</ul>
</kendo-upload>
</div>
</div>
Expand Down
68 changes: 60 additions & 8 deletions tests/visual/form-field-inputs-react.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,13 +170,39 @@ <h3 class="test-heading">Vertical Form (React)</h3>

<div class="k-form-field">
<label class="k-label">Upload</label>
<div class="k-widget k-upload k-header">
<div class="k-widget k-upload">
<div class="k-dropzone">
<div class="k-button k-upload-button">
<input /><span>Select files...</span>
<div role="button" class="k-button k-upload-button">
<input />
<span>Select files...</span>
</div>
<div class="k-upload-status k-upload-status-total">
<span class="k-i-checkmark k-icon"></span>
Done
</div>
<div class="k-dropzone-hint">Drop files here to upload</div>
</div>
<ul class="k-upload-files k-reset">
<li class="k-file k-file-success">
<div class="k-file-single">
<div class="k-progressbar" style="transition: opacity 1s ease-in-out 0s; opacity: 0;">
<span class="k-progress" style="width: 100%;"></span>
</div>
<span class="k-file-group-wrapper">
<span class="k-file-group k-icon k-i-file-pdf"></span>
<span class="k-file-state"></span>
</span>
<span class="k-file-name-size-wrapper">
<span class="k-file-name">test long long long long long long long long long long long long long.pdf</span>
<span class="k-file-validation-message k-text-success">File(s) successfully uploaded.</span>
</span>
<strong class="k-upload-status">
<button type="button" class="k-button k-button-icon k-flat k-upload-action">
<span class="k-icon k-delete k-i-x"></span>
</button>
</strong>
</div>
</li>
</ul>
</div>
</div>

Expand Down Expand Up @@ -365,13 +391,39 @@ <h3 class="test-heading">Horizontal Form (React)</h3>
<div class="k-form-field">
<label class="k-label">Upload</label>
<div class="k-form-field-wrap">
<div class="k-widget k-upload k-header">
<div class="k-widget k-upload">
<div class="k-dropzone">
<div class="k-button k-upload-button">
<input /><span>Select files...</span>
<div role="button" class="k-button k-upload-button">
<input />
<span>Select files...</span>
</div>
<div class="k-upload-status k-upload-status-total">
<span class="k-i-checkmark k-icon"></span>
Done
</div>
<div class="k-dropzone-hint">Drop files here to upload</div>
</div>
<ul class="k-upload-files k-reset">
<li class="k-file k-file-success">
<div class="k-file-single">
<div class="k-progressbar" style="transition: opacity 1s ease-in-out 0s; opacity: 0;">
<span class="k-progress" style="width: 100%;"></span>
</div>
<span class="k-file-group-wrapper">
<span class="k-file-group k-icon k-i-file-pdf"></span>
<span class="k-file-state"></span>
</span>
<span class="k-file-name-size-wrapper">
<span class="k-file-name">test long long long long long long long long long long long long long.pdf</span>
<span class="k-file-validation-message k-text-success">File(s) successfully uploaded.</span>
</span>
<strong class="k-upload-status">
<button type="button" class="k-button k-button-icon k-flat k-upload-action">
<span class="k-icon k-delete k-i-x"></span>
</button>
</strong>
</div>
</li>
</ul>
</div>
</div>
</div>
Expand Down

0 comments on commit bee6f6d

Please sign in to comment.