# How to add padding to WGLMakie figure with resize\_to = :body

**URL:** <https://discourse.julialang.org/t/how-to-add-padding-to-wglmakie-figure-with-resize-to-body/135061>\
**Category:** Visualization\
**Tags:** question\
**Created:** [January 14, 2026, 5:31pm UTC](https://discourse.julialang.org/t/how-to-add-padding-to-wglmakie-figure-with-resize-to-body/135061 "2026-01-14T17:31:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bjarthur](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/bjarthur/32/9638_2.png) [@bjarthur](https://discourse.julialang.org/u/bjarthur)\
**Post date:** [January 14, 2026, 5:31pm UTC](https://discourse.julialang.org/t/how-to-add-padding-to-wglmakie-figure-with-resize-to-body/135061/1 "2026-01-14T17:31:30Z")

</div>

when i use `resize_to = :body` when activating WGLMakie so that the figure fills the browser window no matter what the size, a `DOM.div` element i have at the bottom gets clipped. like this (“hi”) in the lower left:

 ![Screenshot 2026-01-14 at 12.17.12 PM](https://global.discourse-cdn.com/julialang/original/3X/2/c/2ca93d7bd59a96de3aab2f9ed96033e8aff75714.png)

is there a way to add padding so that it is fully visible? or somehow otherwise modify the code (see below) to make it work. this is on a mac, in a fresh temp environment, and using the latest versions of everything. thanks!

```julia-auto
using Bonito, Sockets, WGLMakie

WGLMakie.activate!(; resize_to = :body)
app = App(threaded=true) do session::Session, request::Bonito.HTTP.Request
    fig = Figure()
    Box(fig[1, 1], color = (:red, 0.2), strokewidth = 0)
    status_wg = Observable(DOM.div("hi"))
    return DOM.div(fig, status_wg)
end
server = Bonito.Server(app, string(getipaddr()), 8080)

```

```julia-auto
julia> versioninfo()
Julia Version 1.12.4
Commit 01a2eadb047 (2026-01-06 16:56 UTC)
Build Info:
  Official https://julialang.org release
Platform Info:
  OS: macOS (arm64-apple-darwin24.0.0)
  CPU: 12 × Apple M2 Max
  WORD_SIZE: 64
  LLVM: libLLVM-18.1.7 (ORCJIT, apple-m2)
  GC: Built with stock GC
Threads: 1 default, 1 interactive, 1 GC (on 8 virtual cores)
Environment:
  JULIA_PROJECT = @.
  JULIA_EDITOR = vi

(jl_pKDoQt) pkg> st
Status `~/.tmp/jl_pKDoQt/Project.toml`
  [824d6782] Bonito v4.2.0
  [276b4fcb] WGLMakie v0.13.8
  [6462fe0b] Sockets v1.11.0

```

---

<div class="post-metadata">

**Author:** ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)\
**Post date:** [January 14, 2026, 5:35pm UTC](https://discourse.julialang.org/t/how-to-add-padding-to-wglmakie-figure-with-resize-to-body/135061/2 "2026-01-14T17:35:34Z")

</div>

You should put it into a div with padding and then use resize\_to=:parent

---

<div class="post-metadata">

**Author:** ![bjarthur](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/bjarthur/32/9638_2.png) [@bjarthur](https://discourse.julialang.org/u/bjarthur)\
**Post date:** [January 14, 2026, 6:14pm UTC](https://discourse.julialang.org/t/how-to-add-padding-to-wglmakie-figure-with-resize-to-body/135061/3 "2026-01-14T18:14:14Z")

</div>

thanks for the quick reply!

you mean like this?

```julia-auto
using Bonito, Sockets, WGLMakie

WGLMakie.activate!(; resize_to = :parent)
app = App(threaded=true) do session::Session, request::Bonito.HTTP.Request
    fig = Figure()
    Box(fig[1, 1], color = (:red, 0.2), strokewidth = 0)
    status_wg = Observable(DOM.div("hi"))
    return DOM.div(fig, status_wg,
            style = Styles("padding-bottom" => "50px"))
end
server = Bonito.Server(app, string(getipaddr()), 8080)

```

i get really weird behavior. it starts out nicely padded, and then with every resize of the browser window the padding red box gets taller and taller eventually pushing the “hi” text way off the bottom of the screen.

---

<div class="post-metadata">

**Author:** ![bjarthur](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/bjarthur/32/9638_2.png) [@bjarthur](https://discourse.julialang.org/u/bjarthur)\
**Post date:** [January 14, 2026, 6:16pm UTC](https://discourse.julialang.org/t/how-to-add-padding-to-wglmakie-figure-with-resize-to-body/135061/4 "2026-01-14T18:16:21Z")

</div>

same weird behavior occurs even without the padding. seems to be caused by `:parent`.

---

<div class="post-metadata">

**Author:** ![bjarthur](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/bjarthur/32/9638_2.png) [@bjarthur](https://discourse.julialang.org/u/bjarthur)\
**Post date:** [March 10, 2026, 4:06pm UTC](https://discourse.julialang.org/t/how-to-add-padding-to-wglmakie-figure-with-resize-to-body/135061/5 "2026-03-10T16:06:02Z")

</div>

gemini to the rescue!

```julia-auto
using Bonito, Sockets, WGLMakie

WGLMakie.activate!(; resize_to = :body)

app = App() do session::Session, request::Bonito.HTTP.Request
    fig = Figure()
    Box(fig[1, 1], color = (:red, 0.2), strokewidth = 0)

    # 1. Create a status bar pinned to the bottom
    status_wg = DOM.div("hi", style="""
        position: fixed;
        width: 100%; 
        height: 50px; 
        display: flex; 
        padding: 0 10px; 
        z-index: 100;
    """)  

    # 2. Add a style tag to the body to add padding
    # This ensures the Figure (which resizes to the body's content area) 
    # doesn't go under the status bar.
    return DOM.div(
        DOM.style("body { padding-bottom: 50px; margin: 0; overflow: hidden; }"),
        fig,  
        status_wg
    )
end

server = Bonito.Server(app, string(getipaddr()), 8080) 

```