* (bluefox) Corrected the scroll buttons in Tabs widget

ioBroker · Apr 2, 2024 · 7563f7c · 7563f7c
1 parent c6f50c4
commit 7563f7c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -264,6 +264,9 @@ E.g., if it was used in a menu and the menu is red, the circle would be red.
     ### **WORK IN PROGRESS**
 -->
 ## Changelog
+### **WORK IN PROGRESS**
+* (bluefox) Corrected the scroll buttons in Tabs widget
+
 ### 2.9.48 (2024-03-30)
 * (bluefox) Showed selected view in the view dialog
 * (bluefox) Added customization of loading screen

diff --git a/src/src/Vis/Widgets/Tabs/TabsSliderTabs.jsx b/src/src/Vis/Widgets/Tabs/TabsSliderTabs.jsx
@@ -2,7 +2,7 @@
  *  ioBroker.vis
  *  https://github.com/ioBroker/ioBroker.vis
  *
- *  Copyright (c) 2022-2023 Denis Haev https://github.com/GermanBluefox,
+ *  Copyright (c) 2022-2024 Denis Haev https://github.com/GermanBluefox,
  *  Creative Common Attribution-NonCommercial (CC BY-NC)
  *
  *  http://creativecommons.org/licenses/by-nc/4.0/
@@ -222,7 +222,7 @@ class TabsSliderTabs extends VisRxWidget {
                 flexDirection: this.state.rxData.vertical ? 'row' : 'column',
             }}
         >
-            <div>
+            <div style={{ width: '100%', overflow: 'hidden' }}>
                 <Tabs
                     TabIndicatorProps={{
                         style: {
@@ -236,7 +236,7 @@ class TabsSliderTabs extends VisRxWidget {
                     }}
                     scrollButtons="auto"
                     centered={this.state.rxData.variant === 'centered'}
-                    variant={this.state.rxData.variant === 'fullWidth' ? 'fullWidth' : undefined}
+                    variant={this.state.rxData.variant === 'fullWidth' ? 'fullWidth' : (this.state.rxData.variant === 'centered' ? undefined : 'scrollable')}
                     orientation={this.state.rxData.vertical ? 'vertical' : undefined}
                 >
                     {tabs}

diff --git a/src/src/Vis/visBaseWidget.tsx b/src/src/Vis/visBaseWidget.tsx
@@ -1875,7 +1875,11 @@ class VisBaseWidget<TState extends Partial<VisBaseWidgetState> = VisBaseWidgetSt
         }
 
         // convert string to number+'px'
-        ['top', 'left', 'width', 'height', 'right', 'bottom'].forEach(attr => {
+        ['top', 'left', 'width', 'height', 'right', 'bottom',
+            'borderRadius', 'paddingLeft', 'paddingTop',
+            'paddingRight', 'paddingBottom', 'marginTop',
+            'marginBottom', 'marginLeft', 'marginRight',
+        ].forEach(attr => {
             if (style[attr] !== undefined && typeof style[attr] === 'string') {
                 // eslint-disable-next-line no-restricted-properties
                 if (isVarFinite(style[attr])) {

diff --git a/src/src/i18n/de.json b/src/src/i18n/de.json
@@ -712,7 +712,7 @@
   "vis_2_widgets_widgets_tabs_tab_overflow_x": "Überlauf X",
   "vis_2_widgets_widgets_tabs_tab_overflow_y": "Überlauf Y",
   "vis_2_widgets_widgets_tabs_tab_title": "Titel",
-  "vis_2_widgets_widgets_tabs_tab_view": "Sicht",
+  "vis_2_widgets_widgets_tabs_tab_view": "Seite",
   "vis_2_widgets_widgets_tabs_variant": "Variante",
   "vis_2_widgets_widgets_tabs_variant_centered": "zentriert",
   "vis_2_widgets_widgets_tabs_variant_default": "Standard",