auto add horizon scroll bar when output widget too wide

demos/theme.py

@@ -192,11 +192,10 @@ def output_widgets():
         dict(label=i, value=i, color=i)
         for i in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
     ], onclick=lambda b: toast(f'Clicked {b} button'), outline=True)
-    with put_scrollable(border=False, height=None):
-        put_buttons([
-            dict(label=i, value=i, color=i)
-            for i in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
-        ], onclick=lambda b: toast(f'Clicked {b} button'), group=True)
+    put_buttons([
+        dict(label=i, value=i, color=i)
+        for i in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
+    ], onclick=lambda b: toast(f'Clicked {b} button'), group=True)
     ###########################################################################################
     put_markdown('# Tables')
     put_markdown("""
@@ -258,14 +257,13 @@ def output_widgets():
     put_markdown('# Loading')
     put_processbar('processbar', 0.3)
     put_text()
-    with put_scrollable(border=False, height=None):
-        put_grid([
-            [
-                put_loading(shape=shape, color=color)
-                for color in ('primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark')
-            ]
-            for shape in ('border', 'grow')
-        ], cell_width='50px', cell_height='50px')
+    put_grid([
+        [
+            put_loading(shape=shape, color=color)
+            for color in ('primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark')
+        ]
+        for shape in ('border', 'grow')
+    ], cell_width='50px', cell_height='50px')
     ###########################################################################################
     put_markdown('# Tabs')
 

pywebio/output.py

@@ -1110,16 +1110,6 @@ def put_scrollable(content=[], height=400, keep_bottom=False, border=True,
             put_text(time.time(), scope='scrollable')
             time.sleep(0.5)
 
-    You can use `put_scrollable()` to avoid page width exceeding screen width (especially in mobile device):
-
-    .. exportable-codeblock::
-        :name: put_scrollable_2
-        :summary: `put_scrollable()` usage
-
-        with put_scrollable(border=False, height=None):
-            # use `white-space: nowrap` to disable line break
-            put_text('long content ' * 20).style('white-space: nowrap')
-
     .. versionchanged:: 1.1
        add ``height`` parameter，remove ``max_height`` parameter；
        add ``keep_bottom`` parameter

webiojs/src/handlers/output.ts

@@ -84,6 +84,11 @@ export class OutputHandler implements CommandHandler {
                 }
             }
 
+            // to avoid widget width exceeding page width
+            // show horizon scroll bar when content too wide
+            if(elem.width() > this.container_elem.width())
+                elem.wrap($(document.createElement('div')).css('overflow', 'auto'));
+
             if (this.is_elem_visible(elem) && container_elem.length == 1) {  // 输出内容为可见标签且输出目的scope唯一
                 if (config.outputAnimation)
                     elem.fadeIn({