Fixed positioning of the context menu for use inside a Tabulator component.

2 files changed, 16 insertions, 4 deletions

diff --git a/kvision-modules/kvision-tabulator/src/main/kotlin/pl/treksoft/kvision/tabulator/Options.kt b/kvision-modules/kvision-tabulator/src/main/kotlin/pl/treksoft/kvision/tabulator/Options.kt
index f5f58010..a6f9c740 100644
--- a/kvision-modules/kvision-tabulator/src/main/kotlin/pl/treksoft/kvision/tabulator/Options.kt
+++ b/kvision-modules/kvision-tabulator/src/main/kotlin/pl/treksoft/kvision/tabulator/Options.kt
@@ -369,6 +369,7 @@ fun <T : Any> ColumnDefinition<T>.toJs(
         { cell: Tabulator.CellComponent,
           onRendered: (callback: () -> Unit) -> Unit,
           success: (value: dynamic) -> Unit, cancel: (value: dynamic) -> Unit, _: dynamic ->
+            cell.getElement().style.asDynamic().overflow = "visible"
             var onRenderedCallback: (() -> Unit)? = null
             @Suppress("UNCHECKED_CAST") val data = cell.getData() as T
             val component = it(cell, { callback ->
@@ -404,6 +405,7 @@ fun <T : Any> ColumnDefinition<T>.toJs(
     val tmpFormatterFunction = formatterComponentFunction?.let {
         { cell: Tabulator.CellComponent, _: dynamic,
           onRendered: (callback: () -> Unit) -> Unit ->
+            cell.getElement().style.asDynamic().overflow = "visible"
             var onRenderedCallback: (() -> Unit)? = null
             @Suppress("UNCHECKED_CAST") val data = cell.getData() as T
             val component = it(cell, { callback ->
diff --git a/src/main/kotlin/pl/treksoft/kvision/dropdown/ContextMenu.kt b/src/main/kotlin/pl/treksoft/kvision/dropdown/ContextMenu.kt
index f376de5a..c09737f2 100644
--- a/src/main/kotlin/pl/treksoft/kvision/dropdown/ContextMenu.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/dropdown/ContextMenu.kt
@@ -33,9 +33,13 @@ import pl.treksoft.kvision.utils.px
  * Context menu component.
  *
  * @constructor
+ * @param element an element to bind
+ * @param fixedPosition use fixed positioning
  * @param classes a set of CSS class names
  */
 open class ContextMenu(
+    element: Widget? = null,
+    protected val fixedPosition: Boolean = false,
     classes: Set<String> = setOf(), init: (ContextMenu.() -> Unit)? = null
 ) : ListTag(ListType.UL, classes = classes + "dropdown-menu") {
 
@@ -44,7 +48,7 @@ open class ContextMenu(
         hide()
         @Suppress("LeakingThis")
         display = Display.BLOCK
-        val root = Root.getLastRoot()
+        val root = element?.getRoot() ?: Root.getLastRoot()
         if (root != null) {
             @Suppress("LeakingThis")
             root.addContextMenu(this)
@@ -61,8 +65,13 @@ open class ContextMenu(
      * @return current context menu
      */
     open fun positionMenu(mouseEvent: MouseEvent): ContextMenu {
-        this.top = mouseEvent.pageY.toInt().px
-        this.left = mouseEvent.pageX.toInt().px
+        if (fixedPosition) {
+            this.top = 5.px
+            this.left = 5.px
+        } else {
+            this.top = mouseEvent.pageY.toInt().px
+            this.left = mouseEvent.pageX.toInt().px
+        }
         this.show()
         return this
     }
@@ -74,9 +83,10 @@ open class ContextMenu(
          * It takes the same parameters as the constructor of the built component.
          */
         fun Widget.contextMenu(
+            fixedPosition: Boolean = false,
             classes: Set<String> = setOf(), init: (ContextMenu.() -> Unit)? = null
         ): ContextMenu {
-            val contextMenu = ContextMenu(classes).apply { init?.invoke(this) }
+            val contextMenu = ContextMenu(this, fixedPosition, classes).apply { init?.invoke(this) }
             this.setContextMenu(contextMenu)
             return contextMenu
         }