Fix editors

DevExpress · Nov 15, 2023 · 348e794 · 348e794
1 parent 093cc21
commit 348e794
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 22 deletions.
diff --git a/src/app/preview/editors/editors.component.css b/src/app/preview/editors/editors.component.css
@@ -31,7 +31,7 @@
 
 .editors .block .field {
     margin: 0 10px 20px 0;
-    flex: 1 0 180px;
+    flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -135,15 +135,15 @@
     display: flex;
 }
 
-.last-fields {
+.grouped-fields {
     display: flex;
     width: 100%;
 }
 
-.editors .last-fields .field.validation {
+.editors .grouped-fields .field.validation {
     flex-basis: 32%;
 }
 
-.editors .last-fields .field.daterangebox {
+.editors .grouped-fields .field.daterangebox {
     flex-basis: 66%;
 }
diff --git a/src/app/preview/editors/editors.component.html b/src/app/preview/editors/editors.component.html
@@ -22,27 +22,31 @@
         <div class="block editors">
             <div class="header">Text Editors</div>
             <div class="block outlined">
-                <div class="field">
-                    <dx-text-box [stylingMode]="stylingModeValue" value="Outlined" label="Text Box"></dx-text-box>
-                </div>
-                <div class="field">
-                    <dx-select-box [stylingMode]="stylingModeValue" [items]="['Outlined', 'Filled', 'Underlined']" value="Outlined" label="Select Box"></dx-select-box>
-                </div>
-                <div class="field">
-                    <dx-color-box [stylingMode]="stylingModeValue" value="#333" label="Color Box"></dx-color-box>
-                </div>
-                <div class="field">
-                    <dx-number-box [stylingMode]="stylingModeValue" [showSpinButtons]="true" value="123" label="Number Box"></dx-number-box>
-                </div>
-                <div class="field">
-                    <div class="value">
-                        <dx-tag-box [stylingMode]="stylingModeValue" [items]="['Outlined', 'Filled', 'Underlined']" [value]="['Outlined']" label="Tag Box"></dx-tag-box>
+                <div class="grouped-fields">
+                    <div class="field">
+                        <dx-text-box [stylingMode]="stylingModeValue" value="Outlined" label="Text Box"></dx-text-box>
+                    </div>
+                    <div class="field">
+                        <dx-select-box [stylingMode]="stylingModeValue" [items]="['Outlined', 'Filled', 'Underlined']" value="Outlined" label="Select Box"></dx-select-box>
+                    </div>
+                    <div class="field">
+                        <dx-color-box [stylingMode]="stylingModeValue" value="#333" label="Color Box"></dx-color-box>
                     </div>
                 </div>
-                <div class="field">
-                    <dx-lookup [stylingMode]="stylingModeValue" [items]="['Outlined', 'Filled', 'Underlined']" value="Outlined" label="Lookup"></dx-lookup>
+                <div class="grouped-fields">
+                    <div class="field">
+                        <dx-number-box [stylingMode]="stylingModeValue" [showSpinButtons]="true" value="123" label="Number Box"></dx-number-box>
+                    </div>
+                    <div class="field">
+                        <div class="value">
+                            <dx-tag-box [stylingMode]="stylingModeValue" [items]="['Outlined', 'Filled', 'Underlined']" [value]="['Outlined']" label="Tag Box"></dx-tag-box>
+                        </div>
+                    </div>
+                    <div class="field">
+                        <dx-lookup [stylingMode]="stylingModeValue" [items]="['Outlined', 'Filled', 'Underlined']" value="Outlined" label="Lookup"></dx-lookup>
+                    </div>
                 </div>
-                <div class="last-fields">
+                <div class="grouped-fields">
                     <div class="field validation">
                         <dx-text-box [stylingMode]="stylingModeValue" [value]="invalidValue" label="Validated">
                             <dx-validator>