Multiple anchors each with a badge within a DIV position=relative are grouped together instead of remaining to the right of each ANCHOR

[mP1]

Describe the bug
Note badges work just fine when they they are not within a DIV with position=relative

Example of "problem".

To Reproduce
Create DIV with position=relative
Create a child DIV with position=absolute bottom=0 right=0
Add multiple A each with a Badge.

<div class="dui dui-flex-row dui-h-full dui-items-start dui-gap-1" style="position: absolute; bottom: 0px; right: 15px; height: fit-content; visibility: visible;"><a class="dui" aria-expanded="true" aria-disabled="false" id="viewport-createLabel-Link" href="#/1/Untitled/cell/D1/label" tabindex="0" style="margin: 5px; font-family: Inter; font-size: 15px; font-weight: 400; text-wrap: nowrap; text-decoration: underline; color: var(--dui-hyperlink-color);">Create Label</a><a class="dui" aria-expanded="true" aria-disabled="false" id="viewport-label-Link" href="#/1/Untitled/cell/D1/labels" tabindex="0" style="margin: 5px; font-family: Inter; font-size: 15px; font-weight: 400; text-wrap: nowrap; text-decoration: underline; color: var(--dui-hyperlink-color);">Labels<span class="dui dui-badge dui-rounded-xl dui-postfix-addon dui-bg-red">0</span></a><a class="dui" aria-expanded="true" aria-disabled="false" id="viewport-references-Link" href="#/1/Untitled/cell/D1/references" tabindex="0" style="margin: 5px; font-family: Inter; font-size: 15px; font-weight: 400; text-wrap: nowrap; text-decoration: underline; color: var(--dui-hyperlink-color);">References<span class="dui dui-badge dui-rounded-xl dui-postfix-addon dui-bg-red">0</span></a><a class="dui" aria-expanded="true" aria-disabled="false" id="viewport-delete-Link" href="#/1/Untitled/cell/D1/delete" tabindex="0" style="margin: 5px; font-family: Inter; font-size: 15px; font-weight: 400; text-wrap: nowrap; text-decoration: underline; color: var(--dui-hyperlink-color);">Delete</a></div>

Latest Chrome (2025/3/27)
Latest Domino-ui (2.0.4)

Expected

[Create Label] [Labels](0) [References](0) [Delete]

Actual

[Create Label] [Labels] [References] [Delete] (0)(0)

Note that expected works fine when not wrapped inside a parent with position=ABSOLUTE etc.

[vegegoku]

I cant reproduce this, here is my test sample

Card.create("BUTTON EXAMPLES")
                        .appendChild(div()
                                .addCss(dui_relative, dui_h_12, dui_w_full)
                                .appendChild(div()
                                        .addCss(dui_flex, dui_h_12, dui_items_start, dui_gap_1, dui_absolute, dui_top_0, dui_left_0, dui_w_full, dui_border_1, dui_border_solid, dui_border_red)
                                        .appendChild(a().textContent("label"))
                                        .appendChild(a().textContent("label0").appendChild(Badge.create("0")))
                                        .appendChild(a().textContent("label1").appendChild(Badge.create("1")))
                                        .appendChild(a().textContent("label2").appendChild(Badge.create("2")))
                                        .appendChild(a().textContent("label3").appendChild(Badge.create("3")))
                                        .appendChild(a().textContent("label4").appendChild(Badge.create("4")))
                                )
                        )

which produces something like this

[mP1]

Sorry will try and narrow down a better example of why it happens for me.

[vegegoku]

@mP1 Any update on this, or should we just close it?

[mP1]

Just fixed the problem, using your sample as a template.

Looking at your sample provided by you, i noticed the parent container had a display:flex.

My mistake was i didnt set display:flex so it was inheriting display:block which caused the badges to float all the way across to the right.

DIV <---- was display:block, changing to display:flex is the FIX
A // link 1
SPAN // badge 1
A // link 2
SPAN // badge 2

Thanks for your help, my mistake not a domino bug