@syncfusion/ej2-dropdowns 31.2.5 → 31.2.15

package/styles/drop-down-list/_layout.scss

@@ -8,6 +8,15 @@
     }
   }
 
+  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+    width: 100%;
+    border: $input-border;
+  }
+
+  .e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+    margin-top: $input-margin-top;
+  }
+
   .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;

package/styles/drop-down-list/_material-dark-definition.scss

@@ -23,6 +23,7 @@ $ddl-clear-icon-margin-right: 66px !default;
 $ddl-back-icon-margin: 0 10px 0 -52px !default;
 $ddl-back-icon-padding: 0 8px !default;
 $ddl-filter-margin: 0 !default;
+$input-margin-top: 16px !default;
 
 // Small Size
 
@@ -30,6 +31,7 @@ $ddl-small-list-font-size: 12px !default;
 
 // touch small
 $ddl-bigger-small-list-font-size: 13px !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 //enddefault
 

package/styles/drop-down-list/_material-definition.scss

@@ -23,12 +23,14 @@ $ddl-back-icon-margin: 0 10px 0 -52px !default;
 $ddl-back-icon-padding: 0 8px !default;
 $ddl-popup-shadow: 0 5px 5px -3px rgba($grey-light-font, .2), 0 8px 10px 1px rgba($grey-light-font, .14), 0 3px 14px 2px rgba($grey-light-font, .12) !default;
 $ddl-filter-margin: 0 !default;
+$input-margin-top: 16px !default;
 
 // Small Size
 $ddl-small-list-font-size: 12px !default;
 
 // touch small
 $ddl-bigger-small-list-font-size: 13px !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 @include export-module('dropdownlist-material') {
   .e-ddl.e-control-wrapper .e-ddl-icon::before {

package/styles/drop-down-list/_material3-definition.scss

@@ -28,6 +28,9 @@ $ddl-filter-margin: 0 !default;
 $ddl-icon-hover-bg: rgba($content-text-color, .08) !default;
 $ddl-small-list-font-size: $text-xs !default;
 $ddl-bigger-small-list-font-size: $text-sm !default;
+$input-border: $ddl-zero-value $border-type !default;
+$input-margin-top: 16px !default;
+
 @include export-module('dropdownlist-Material3') {
   .e-ddl.e-control-wrapper .e-ddl-icon::before {
     transform: rotate(0deg);

package/styles/drop-down-list/_tailwind-definition.scss

@@ -1,6 +1,7 @@
 $ddl-input-font-size: $text-sm !default;
 $ddl-zero-value: 0 !default;
 $ddl-input-border: 1px $border-light !default;
+$border-type: solid !default;
 $ddl-input-font-family: inherit !default;
 $ddl-input-margin-bottom: 4px !default;
 $ddl-input-padding: 8px $ddl-zero-value 4px !default;
@@ -17,6 +18,7 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-bigger-list-font-size: $text-base !default;
 $ddl-bigger-group-list-font-size: $text-sm !default;
 $ddl-filter-margin: 0 !default;
+$input-margin-top: 24px !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -35,6 +37,7 @@ $ddl-filter-box-shadow-color: rgba(0, 0, 0, .3) !default;
 $ddl-popup-background-color: $flyout-bg-color !default;
 $ddl-filter-background-color: $flyout-bg-color !default;
 $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 @include export-module('dropdownlist-tailwind') {
   .e-ddl.e-control-wrapper .e-ddl-icon::before {

package/styles/drop-down-list/_tailwind3-definition.scss

@@ -1,6 +1,7 @@
 $ddl-input-font-size: $text-sm !default;
 $ddl-zero-value: 0 !default;
 $ddl-input-border: 1px $border-light !default;
+$border-type: solid !default;
 $ddl-input-font-family: inherit !default;
 $ddl-input-margin-bottom: 4px !default;
 $ddl-input-padding: 8px $ddl-zero-value 4px !default;
@@ -18,6 +19,7 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-readonly-bg-color: $content-bg-color-alt2 !default;
 $ddl-filter-margin: 0 !default;
 $ddl-list-disable-item-color: $flyout-text-color-disabled !default;
+$input-margin-top: 24px !default;
 
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
@@ -36,6 +38,7 @@ $ddl-filter-background-color: $content-bg-color !default;
 $ddl-filter-bg: $content-bg-color !default;
 $ddl-list-icon-color: $icon-color !default;
 $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
+$input-border: $ddl-zero-value $border-type !default;
 
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {

package/styles/drop-down-list/bds.css

@@ -304,6 +304,15 @@
   font-family: "e-icons";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/bootstrap-dark.css

@@ -123,6 +123,15 @@
   content: "\eb08";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/bootstrap.css

@@ -123,6 +123,15 @@
   content: "\eb08";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/bootstrap4.css

@@ -165,6 +165,15 @@
   content: "\e7cf";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/bootstrap5-dark.css

@@ -174,6 +174,15 @@
   content: "\e832";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/bootstrap5.3.css

@@ -178,6 +178,15 @@
   content: "\e832";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/bootstrap5.css

@@ -174,6 +174,15 @@
   content: "\e832";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/fabric-dark.css

@@ -99,6 +99,15 @@
   content: "\eb06";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 28px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/fabric.css

@@ -99,6 +99,15 @@
   content: "\eb06";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 28px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/fluent-dark.css

@@ -167,6 +167,15 @@
   content: "\e761";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/fluent.css

@@ -167,6 +167,15 @@
   content: "\e761";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/fluent2.css

@@ -344,6 +344,15 @@
   content: "\e832";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/highcontrast-light.css

@@ -116,6 +116,15 @@
   font-family: "e-icons";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 28px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/highcontrast.css

@@ -120,6 +120,15 @@
   content: "\eb06";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 28px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/material-dark.css

@@ -162,6 +162,15 @@
   content: "\eb05";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 16px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/material.css

@@ -186,6 +186,15 @@
   content: "\eb05";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 16px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/material3-dark.css

@@ -199,6 +199,15 @@
   margin-top: 4px;
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 16px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/material3.css

@@ -201,6 +201,15 @@
   margin-top: 4px;
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 16px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/tailwind-dark.css

@@ -154,6 +154,15 @@
   content: "\e832";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/tailwind.css

@@ -154,6 +154,15 @@
   content: "\e832";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/drop-down-list/tailwind3.css

@@ -186,6 +186,15 @@
   font-family: "e-icons";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/fabric-dark-lite.css

@@ -396,6 +396,15 @@
   content: "\eb06";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 28px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/fabric-dark.css

@@ -471,6 +471,15 @@
   content: "\eb06";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 28px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/fabric-lite.css

@@ -396,6 +396,15 @@
   content: "\eb06";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 28px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/fabric.css

@@ -471,6 +471,15 @@
   content: "\eb06";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 28px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/fluent-dark-lite.css

@@ -474,6 +474,15 @@
   content: "\e761";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/fluent-dark.css

@@ -575,6 +575,15 @@
   content: "\e761";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/fluent-lite.css

@@ -474,6 +474,15 @@
   content: "\e761";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/fluent.css

@@ -575,6 +575,15 @@
   content: "\e761";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/fluent2-lite.css

@@ -643,6 +643,15 @@
   content: "\e832";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/fluent2.css

@@ -735,6 +735,15 @@
   content: "\e832";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 24px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/highcontrast-light-lite.css

@@ -413,6 +413,15 @@
   font-family: "e-icons";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 28px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;

package/styles/highcontrast-light.css

@@ -488,6 +488,15 @@
   font-family: "e-icons";
 }
 
+.e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+  width: 100%;
+  border: 0 solid;
+}
+
+.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper:not(.e-float-input):has(.e-float-line) {
+  margin-top: 28px;
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;