FileUploader: fix options panel appearance on mobile devices in Async upload demo (DevExpress#30072)

Zedwag · web-flow · commit 41d4e2811964 · 2025-06-06T09:58:18.000+02:00
diff --git a/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css b/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css
@@ -1,4 +1,4 @@
-.options {
+.options-panel {
   margin-top: 20px;
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
diff --git a/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.html b/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="options">
+<div class="options-panel">
   <div class="caption">Options</div>
   <div class="options-container">
     <div class="option">
diff --git a/apps/demos/Demos/CardView/ColumnChooser/React/App.tsx b/apps/demos/Demos/CardView/ColumnChooser/React/App.tsx
@@ -25,7 +25,7 @@ const App = () => {
   const [selectByClick, setSelectByClick] = useState(true);
 
   return <>
-    <div className="options">
+    <div className="options-panel">
       <div className="caption">Options</div>
       <div className="options-container">
         <div className="option">
diff --git a/apps/demos/Demos/CardView/ColumnChooser/React/styles.css b/apps/demos/Demos/CardView/ColumnChooser/React/styles.css
@@ -1,4 +1,4 @@
-.options {
+.options-panel {
   margin-top: 20px;
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
diff --git a/apps/demos/Demos/CardView/ColumnChooser/ReactJs/App.js b/apps/demos/Demos/CardView/ColumnChooser/ReactJs/App.js
@@ -21,7 +21,7 @@ const App = () => {
   const [selectByClick, setSelectByClick] = useState(true);
   return (
     <React.Fragment>
-      <div className="options">
+      <div className="options-panel">
         <div className="caption">Options</div>
         <div className="options-container">
           <div className="option">
diff --git a/apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css b/apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css
@@ -1,4 +1,4 @@
-.options {
+.options-panel {
   margin-top: 20px;
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
diff --git a/apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue b/apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div className="options">
+  <div className="options-panel">
     <div className="caption">Options</div>
     <div className="options-container">
       <div className="option">
@@ -116,7 +116,7 @@ const selectByClick = ref(true);
 
 </script>
 <style>
-  .options {
+  .options-panel {
     margin-top: 20px;
     padding: 20px;
     background-color: rgba(191, 191, 191, 0.15);
diff --git a/apps/demos/Demos/CardView/ColumnChooser/jQuery/index.html b/apps/demos/Demos/CardView/ColumnChooser/jQuery/index.html
@@ -14,7 +14,7 @@
   </head>
   <body class="dx-viewport">
     <div class="demo-container">
-      <div class="options">
+      <div class="options-panel">
         <div class="caption">Options</div>
         <div class="options-container">
           <div class="option"> <span>Column Chooser Mode:</span><div id="column-chooser-mode"></div> </div>
diff --git a/apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css b/apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css
@@ -1,4 +1,4 @@
-.options {
+.options-panel {
   margin-top: 20px;
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
diff --git a/apps/demos/Demos/CardView/Selection/Angular/app/app.component.css b/apps/demos/Demos/CardView/Selection/Angular/app/app.component.css
@@ -1,4 +1,4 @@
-.options {
+.options-panel {
   margin-top: 20px;
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
diff --git a/apps/demos/Demos/CardView/Selection/Angular/app/app.component.html b/apps/demos/Demos/CardView/Selection/Angular/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="options">
+<div class="options-panel">
   <div class="caption">Options</div>
   <div class="options-container">
     <div class="option">
diff --git a/apps/demos/Demos/CardView/Selection/React/App.tsx b/apps/demos/Demos/CardView/Selection/React/App.tsx
@@ -30,7 +30,7 @@ const App = () => {
   }, []);
 
   return <>
-    <div className="options">
+    <div className="options-panel">
       <div className="caption">Options</div>
       <div className="options-container">
         <div className="option">
diff --git a/apps/demos/Demos/CardView/Selection/React/styles.css b/apps/demos/Demos/CardView/Selection/React/styles.css
@@ -1,4 +1,4 @@
-.options {
+.options-panel {
   margin-top: 20px;
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
diff --git a/apps/demos/Demos/CardView/Selection/ReactJs/App.js b/apps/demos/Demos/CardView/Selection/ReactJs/App.js
@@ -25,7 +25,7 @@ const App = () => {
   }, []);
   return (
     <React.Fragment>
-      <div className="options">
+      <div className="options-panel">
         <div className="caption">Options</div>
         <div className="options-container">
           <div className="option">
diff --git a/apps/demos/Demos/CardView/Selection/ReactJs/styles.css b/apps/demos/Demos/CardView/Selection/ReactJs/styles.css
@@ -1,4 +1,4 @@
-.options {
+.options-panel {
   margin-top: 20px;
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
diff --git a/apps/demos/Demos/CardView/Selection/Vue/App.vue b/apps/demos/Demos/CardView/Selection/Vue/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div className="options">
+  <div className="options-panel">
     <div className="caption">Options</div>
     <div className="options-container">
       <div className="option">
@@ -104,7 +104,7 @@ const onSelectionModeChange = ({ value }: DxSelectBoxTypes.ValueChangedEvent): v
 };
 </script>
 <style>
-  .options {
+  .options-panel {
     margin-top: 20px;
     padding: 20px;
     background-color: rgba(191, 191, 191, 0.15);
diff --git a/apps/demos/Demos/CardView/Selection/jQuery/index.html b/apps/demos/Demos/CardView/Selection/jQuery/index.html
@@ -14,7 +14,7 @@
   </head>
   <body class="dx-viewport">
     <div class="demo-container">
-      <div class="options">
+      <div class="options-panel">
         <div class="caption">Options</div>
         <div class="options-container">
           <div class="option"> <span>Selection Mode</span><div id="selection-mode"></div> </div>
diff --git a/apps/demos/Demos/CardView/Selection/jQuery/styles.css b/apps/demos/Demos/CardView/Selection/jQuery/styles.css
@@ -1,4 +1,4 @@
-.options {
+.options-panel {
   margin-top: 20px;
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
diff --git a/apps/demos/Demos/FileUploader/FileUploading/Angular/app/app.component.css b/apps/demos/Demos/FileUploader/FileUploading/Angular/app/app.component.css
@@ -21,7 +21,7 @@
   display: none;
 }
 
-.options {
+.options-panel {
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
   position: absolute;
diff --git a/apps/demos/Demos/FileUploader/FileUploading/Angular/app/app.component.html b/apps/demos/Demos/FileUploader/FileUploading/Angular/app/app.component.html
@@ -26,7 +26,7 @@ <h4>Selected Files</h4>
     </div>
   </div>
 </div>
-<div class="options">
+<div class="options-panel">
   <div class="caption">Options</div>
   <div class="option">
     <span>File types</span>
diff --git a/apps/demos/Demos/FileUploader/FileUploading/React/App.tsx b/apps/demos/Demos/FileUploader/FileUploading/React/App.tsx
@@ -58,7 +58,7 @@ export default function App() {
           </div>
         </div>
       </div>
-      <div className="options">
+      <div className="options-panel">
         <div className="caption">Options</div>
         <div className="option">
           <span>File types</span>
diff --git a/apps/demos/Demos/FileUploader/FileUploading/React/styles.css b/apps/demos/Demos/FileUploader/FileUploading/React/styles.css
@@ -18,7 +18,7 @@
   margin-bottom: 20px;
 }
 
-.options {
+.options-panel {
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
   position: absolute;
diff --git a/apps/demos/Demos/FileUploader/FileUploading/ReactJs/App.js b/apps/demos/Demos/FileUploader/FileUploading/ReactJs/App.js
@@ -79,7 +79,7 @@ export default function App() {
           </div>
         </div>
       </div>
-      <div className="options">
+      <div className="options-panel">
         <div className="caption">Options</div>
         <div className="option">
           <span>File types</span>
diff --git a/apps/demos/Demos/FileUploader/FileUploading/ReactJs/styles.css b/apps/demos/Demos/FileUploader/FileUploading/ReactJs/styles.css
@@ -18,7 +18,7 @@
   margin-bottom: 20px;
 }
 
-.options {
+.options-panel {
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
   position: absolute;
diff --git a/apps/demos/Demos/FileUploader/FileUploading/Vue/App.vue b/apps/demos/Demos/FileUploader/FileUploading/Vue/App.vue
@@ -27,7 +27,7 @@
         </div>
       </div>
     </div>
-    <div class="options">
+    <div class="options-panel">
       <div class="caption">Options</div>
       <div class="option">
         <span>File types</span>
@@ -95,7 +95,7 @@ const files = ref([]);
   margin-bottom: 20px;
 }
 
-.options {
+.options-panel {
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
   position: absolute;
diff --git a/apps/demos/Demos/FileUploader/FileUploading/jQuery/index.html b/apps/demos/Demos/FileUploader/FileUploading/jQuery/index.html
@@ -22,7 +22,7 @@ <h4>Selected Files</h4>
             </div>
           </div>
         </div>
-        <div class="options">
+        <div class="options-panel">
           <div class="caption">Options</div>
           <div class="option">
             <span>File types</span>
diff --git a/apps/demos/Demos/FileUploader/FileUploading/jQuery/styles.css b/apps/demos/Demos/FileUploader/FileUploading/jQuery/styles.css
@@ -21,7 +21,7 @@
   display: none;
 }
 
-.options {
+.options-panel {
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
   position: absolute;

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-.options {`
	`1`	`+.options-panel {`
`2`	`2`	`margin-top: 20px;`
`3`	`3`	`padding: 20px;`
`4`	`4`	`background-color: rgba(191, 191, 191, 0.15);`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="options">`
	`1`	`+<div class="options-panel">`
`2`	`2`	`<div class="caption">Options</div>`
`3`	`3`	`<div class="options-container">`
`4`	`4`	`<div class="option">`