starred/opentui

Fork 0

mirror of https://github.com/anomalyco/opentui.git synced 2026-04-25 04:55:58 +03:00

[GH-ISSUE #63] position absolute bottom/right does not work #780

New issue

Closed

opened 2026-03-14 08:32:19 +03:00 by kerem · 6 comments

kerem commented

2026-03-14 08:32:19 +03:00

Owner

Originally created by @niicojs on GitHub (Aug 24, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/63

I'm doing a very simple app with a debug box display on the top right but right={0} does not work. Left and right are working.
Is there some conditions to make this work?


    <group>
      {debug ? (
        <box
          title="debug"
          backgroundColor={'black'}
          position="absolute"
          top={0}
          right={0}
          zIndex={10}
        >
          <text fg={'grey'}>Debug mode is ON</text>
        </box>
      ) : null}
      <box title="nico" padding={1}>
        <text fg={'blue'}>PLAY WITH TUI</text>
      </box>
      <text>Press 'd' to toggle debug mode</text>
    </group>

Originally created by @niicojs on GitHub (Aug 24, 2025). Original GitHub issue: https://github.com/anomalyco/opentui/issues/63 I'm doing a very simple app with a debug box display on the top right but `right={0}` does not work. Left and right are working. Is there some conditions to make this work? ```jsx <group> {debug ? ( <box title="debug" backgroundColor={'black'} position="absolute" top={0} right={0} zIndex={10} > <text fg={'grey'}>Debug mode is ON</text> </box> ) : null} <box title="nico" padding={1}> <text fg={'blue'}>PLAY WITH TUI</text> </box> <text>Press 'd' to toggle debug mode</text> </group> ```

kerem

2026-03-14 08:32:19 +03:00

closed this issue
added the
core

bug
labels

kerem commented

2026-03-14 08:32:35 +03:00

Author

Owner

@kommander commented on GitHub (Aug 24, 2025):

Might need an explicit width, because width is auto otherwise?

@kommander commented on GitHub (Aug 24, 2025): Might need an explicit width, because width is `auto` otherwise?

kerem commented

2026-03-14 08:32:40 +03:00

Author

Owner

@msmps commented on GitHub (Aug 24, 2025):

Might need an explicit width, because width is auto otherwise?

i don't think we're handling right/bottom in the core/ for absolute positioned renderables github.com/sst/opentui@c90c6c139b/packages/core/src/Renderable.ts (L645-L650)

@msmps commented on GitHub (Aug 24, 2025): > Might need an explicit width, because width is `auto` otherwise? i don't think we're handling right/bottom in the `core/` for absolute positioned renderables https://github.com/sst/opentui/blob/c90c6c139bac6114a43c5b13f1fb2302906d1146/packages/core/src/Renderable.ts#L645-L650

kerem commented

2026-03-14 08:32:45 +03:00

Author

Owner

@kommander commented on GitHub (Aug 24, 2025):

@msmps you are right. That's because of the performance workaround for the yoga-layout engine. It needs manual handling at that point.

Would right/bottom override left/top? Simple fix would be to not use the performance workaround path when right or bottom are set.

@kommander commented on GitHub (Aug 24, 2025): @msmps you are right. That's because of the performance workaround for the yoga-layout engine. It needs manual handling at that point. Would right/bottom override left/top? Simple fix would be to not use the performance workaround path when right or bottom are set.

kerem commented

2026-03-14 08:32:50 +03:00

Author

Owner

@msmps commented on GitHub (Aug 24, 2025):

@msmps you are right. That's because of the performance workaround for the yoga-layout engine. It needs manual handling at that point.

Would right/bottom override left/top? Simple fix would be to not use the performance workaround path when right or bottom are set.

I think top/left should take priority when present? There are different behaviours on web depending on how the element is positioned.

@msmps commented on GitHub (Aug 24, 2025): > [@msmps](https://github.com/msmps) you are right. That's because of the performance workaround for the yoga-layout engine. It needs manual handling at that point. > > Would right/bottom override left/top? Simple fix would be to not use the performance workaround path when right or bottom are set. I think `top/left` should take priority when present? There are different behaviours on web depending on how the element is positioned. <img width="790" height="271" alt="Image" src="https://github.com/user-attachments/assets/c0747c16-c0ec-43e8-a45e-cf92ed31202c" /> <img width="780" height="133" alt="Image" src="https://github.com/user-attachments/assets/851b0359-a1a8-45a3-8952-9ccdbbba316b" />

kerem commented

2026-03-14 08:32:55 +03:00

Author

Owner

@kommander commented on GitHub (Aug 24, 2025):

Yeah, the correct solution would be to just let yoga handle it. I want to have yoga as bun ffi bindings, either standalone package or exposed in the core binary, that would solve performance.

Also I want to split out the UI pieces like layout into a UIRenderable as base for all the UI Renderables we currently have and the real base Renderable would only manage x/y and z-index.

Reason: some want to use Renderables as image tiles for games for example, then the layout and all UI stuff that comes with it is overkill.

Either way we have to get rid of that performance workaround instead of baking it in and making it more complex.

@kommander commented on GitHub (Aug 24, 2025): Yeah, the correct solution would be to just let yoga handle it. I want to have yoga as bun ffi bindings, either standalone package or exposed in the core binary, that would solve performance. Also I want to split out the UI pieces like layout into a `UIRenderable` as base for all the UI Renderables we currently have and the real base Renderable would only manage x/y and z-index. Reason: some want to use Renderables as image tiles for games for example, then the layout and all UI stuff that comes with it is overkill. Either way we have to get rid of that performance workaround instead of baking it in and making it more complex.

kerem commented

2026-03-14 08:33:00 +03:00

Author

Owner

@niicojs commented on GitHub (Aug 25, 2025):

fixed in 0.1.9 thanks

@niicojs commented on GitHub (Aug 25, 2025): fixed in 0.1.9 thanks

kerem referenced this issue

2026-03-14 09:43:18 +03:00

[PR #780] [MERGED] solid jsx decode html entities #1557