# Mastering Dynamic in using OverLay

**URL:** <https://community.wolfram.com/t/mastering-dynamic-in-using-overlay/19235>\
**Category:** Questions\
**Tags:** interface-construction, ui-ux-and-ide\
**Created:** [December 9, 2021, 11:15pm UTC](https://community.wolfram.com/t/mastering-dynamic-in-using-overlay/19235 "2021-12-09T23:15:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![meitnik](https://yyz1.discourse-cdn.com/wolfram/user_avatar/community.wolfram.com/meitnik/32/10946_2.png) [@meitnik](https://community.wolfram.com/u/meitnik)\
**Post date:** [December 9, 2021, 11:15pm UTC](https://community.wolfram.com/t/mastering-dynamic-in-using-overlay/19235/1 "2021-12-09T23:15:05Z")

</div>

I trying to get this UI experiment to work:

```
sp = Spacer[{90, 0}]; DynamicModule[ {}, x = 1; Dynamic@Overlay[{
     TabView[{"one" -> 1, "switch" -> Dynamic[x = 2]}
      , ImageSize -> {100, 100}]
     , Row[{sp, 
       ActionMenu[
        "Wrappers", {"Beep" :> Beep[], "switch" :> Dynamic[x = 1]}]
       }]} , {1, 2}, Dynamic[x]]]

```

I hate that layering of controls is not easy to do. I can’t find examples to study.  
ps. that exact placement and sizes of widgets are a time consuming process. A gui prototyping tools are long overdue.

---

<div class="post-metadata">

**Author:** ![eric3](https://yyz1.discourse-cdn.com/wolfram/user_avatar/community.wolfram.com/eric3/32/12760_2.png) [@eric3](https://community.wolfram.com/u/eric3)\
**Post date:** [January 4, 2022, 10:54pm UTC](https://community.wolfram.com/t/mastering-dynamic-in-using-overlay/19235/2 "2022-01-04T22:54:22Z")

</div>

So, independent of styling, I think this is close to what you’re asking for:

```
Grid[
 {{SetterBar[Dynamic[x], {1, 2}], 
   ActionMenu[
    "Actions", {"Beep" :> Beep[], "switch" :> (x = 2)}]}, {Dynamic[
    x]}},
 Spacings -> 0]

```

As for difficulty of designing UI widgets with Mathematica, I’m not sure what your end goal and vision are. I recommend you defer wrangling with style and layout until after you’ve got functionality working. I recommend you use the “built in” tools (particularly Manipulate) and avoid directly accessing low level controls unless absolutely necessary. As for layout, I’d avoid using Overlay for your core UI. Grid is a very versatile and feature-rich function, so try it first.

---

<div class="post-metadata">

**Author:** ![meitnik](https://yyz1.discourse-cdn.com/wolfram/user_avatar/community.wolfram.com/meitnik/32/10946_2.png) [@meitnik](https://community.wolfram.com/u/meitnik)\
**Post date:** [January 4, 2022, 11:10pm UTC](https://community.wolfram.com/t/mastering-dynamic-in-using-overlay/19235/3 "2022-01-04T23:10:28Z")

</div>

Thank you for your replay; useful insight from your code. You are missing my goal, to overlay an ActionMenu on a TabView’s left or right side; SetterBar would not work for my needs. Manipulate would be harder and larger to use for my needs. Yes, I am fully aware of the wonderful uses of Grid. 🙂  
And layout was to arrange the overlay of objects correctly. Doc center on overlay is also incomplete; needs more examples.

---

<div class="post-metadata">

**Author:** ![meitnik](https://yyz1.discourse-cdn.com/wolfram/user_avatar/community.wolfram.com/meitnik/32/10946_2.png) [@meitnik](https://community.wolfram.com/u/meitnik)\
**Post date:** [January 5, 2022, 12:02am UTC](https://community.wolfram.com/t/mastering-dynamic-in-using-overlay/19235/4 "2022-01-05T00:02:22Z")

</div>

Ok, after some pondering and tinkering, I am very close to what I want, thanks to your code and rethinking about using TabView.

```
Clear[tabvw1, pne, pnes]; tabvw1 = (pne[dta_] := 
     Pane[Grid@Partition[dta, UpTo[5]], {200, 100}, Scrollbars -> True]; pnes = {pne[Range[10]], pne[Range[100]], 
      pne[Characters["Hello there, dance with me."]]}; Grid[{{SetterBar[
        Dynamic[x], {pnes[[1]] -> " Set 1 ", pnes[[2]] -> " Set 2 ", 
         pnes[[3]] -> " Set 3 "}],
       ActionMenu[
        "Actions", {"Beep" :> Beep[], "switch" :> (x = 2)}]}, {Dynamic[
        x]}}, Spacings -> 0]); tabvw1

```