TMP widgets

bokehjs/src/lib/core/dom_view.ts

@@ -28,14 +28,11 @@ export class DOMView extends View {
     return null
   }
 
-  do_layout(): void {}
-
   render(): void {}
 
   renderTo(element: HTMLElement): void {
     element.appendChild(this.el)
     this.render()
-    this.do_layout()
   }
 
   on_hit?(sx: number, sy: number): boolean

bokehjs/src/lib/models/layouts/layout_dom.ts

@@ -24,6 +24,11 @@ export abstract class LayoutDOMView extends DOMView {
     this.update_layout()
   }
 
+  renderTo(element: HTMLElement): void {
+    super.renderTo(element)
+    this.do_layout()
+  }
+
   abstract get child_models(): LayoutDOM[]
 
   get child_views(): LayoutDOMView[] {

bokehjs/src/lib/models/widgets/abstract_button.ts

@@ -40,10 +40,10 @@ export abstract class AbstractButtonView extends WidgetView {
   render(): void {
     super.render()
 
-    empty(this.content_el)
+    empty(this.el)
     this.buttonEl = this._render_button(this.model.label)
     this.buttonEl.addEventListener("click", (event) => this._button_click(event))
-    this.content_el.appendChild(this.buttonEl)
+    this.el.appendChild(this.buttonEl)
 
     const icon = this.model.icon
     if (icon != null) {

bokehjs/src/lib/models/widgets/text_input.ts

@@ -23,8 +23,10 @@ export class TextInputView extends InputWidgetView {
 
     empty(this.el)
 
-    const labelEl = label({for: this.model.id}, this.model.title)
-    this.el.appendChild(labelEl)
+    if (this.model.title.length > 0) {
+      const labelEl = label({for: this.model.id}, this.model.title)
+      this.el.appendChild(labelEl)
+    }
 
     this.inputEl = input({
       type: "text",

bokehjs/src/lib/models/widgets/widget.ts

@@ -1,6 +1,6 @@
 import {LayoutDOM, LayoutDOMView} from "../layouts/layout_dom"
 import {SizeHint, Layoutable} from "core/layout"
-import {border, margin, div} from "core/dom"
+import {border, margin} from "core/dom"
 
 export class DOMLayout extends Layoutable {
 
@@ -9,20 +9,35 @@ export class DOMLayout extends Layoutable {
   }
 
   size_hint(): SizeHint {
-    const borders = border(this.el)
-    const margins = margin(this.el)
-
     let width: number
     if (this.sizing.width_policy == "fixed")
       width = this.sizing.width
-    else
-      width = this.el.scrollWidth + margins.left + margins.right + borders.left + borders.right
+    else if (this.sizing.width_policy == "auto" && this.sizing.width != null)
+      width = this.sizing.width
+    else {
+      width = 0
+      for (const child of Array.from(this.el.children) as HTMLElement[]) {
+        const borders = border(child)
+        const margins = margin(child)
+        width += child.scrollWidth + margins.left + margins.right
+                                   + borders.left + borders.right
+      }
+    }
 
     let height: number
     if (this.sizing.height_policy == "fixed")
       height = this.sizing.height
-    else
-      height = this.el.scrollHeight + margins.top + margins.bottom + borders.top + borders.bottom
+    else if (this.sizing.height_policy == "auto" && this.sizing.height != null)
+      height = this.sizing.height
+    else {
+      height = 0
+      for (const child of Array.from(this.el.children) as HTMLElement[]) {
+        const borders = border(child)
+        const margins = margin(child)
+        height += child.scrollHeight + margins.top + margins.bottom
+                                     + borders.top + borders.bottom
+      }
+    }
 
     return {width, height}
   }
@@ -31,21 +46,12 @@ export class DOMLayout extends Layoutable {
 export abstract class WidgetView extends LayoutDOMView {
   model: Widget
 
-  content_el: HTMLElement
-
-  protected _createElement(): HTMLElement {
-    const el = super._createElement()
-    this.content_el = div({style: {width: "100%"}})
-    el.appendChild(this.content_el)
-    return el
-  }
-
   get child_models(): LayoutDOM[] {
     return []
   }
 
   update_layout(): void {
-    this.layout = new DOMLayout(this.content_el)
+    this.layout = new DOMLayout(this.el)
     this.layout.sizing = this.box_sizing()
   }
 

examples/models/file/widgets.py

@@ -126,7 +126,16 @@ def mk_tab(color):
 ])
 
 doc = Document()
-doc.add_root(widgets)
+#doc.add_root(widgets)
+
+b1 = Button(label="Button 1", button_type="primary", width=300)
+b2 = Button(label="Button 2", button_type="primary")
+b3 = Button(label="Button 3", button_type="primary")
+b4 = Button(label="Button 4", button_type="primary")
+b5 = Button(label="Button 5", button_type="primary")
+b6 = Button(label="Button 6", button_type="primary")
+doc.add_root(Column(children=[b1, b2, b3, b4, b5, b6]))
+
 
 if __name__ == "__main__":
     doc.validate()