ESOUI - Flexible height of 2 panels / correct positioning

ESOUI (https://www.esoui.com/forums/index.php)

- Lua/XML Help (https://www.esoui.com/forums/forumdisplay.php?f=175)

- - Flexible height of 2 panels / correct positioning (https://www.esoui.com/forums/showthread.php?t=9819)

rp12439_3

07/01/21 04:38 AM

Flexible height of 2 panels / correct positioning

Hi there,

it should be simple but it isnt (for me). For some hours I am trying to position 2 labels with dynamic content directly beneath one after the other.
This is not working :) They are allways placed in the center of the control.

The text is set with the setText(string) function and is an item property (GetItemLink...). Thats why the contentheight differs. The control height will be set with GetTextHeight and so on. But this is making it currently worse :) They are truncated all the time and not correclty positioned.

This should be simple or not? There is definitly something wrong with the second anchor wich defines the height of the label... if its just one row (without second anchor) its working.

What am I not seeing? :(

Here is the (simplified) xml of the 2 labels:

Quote:

votan

07/01/21 04:50 AM

From just looking at it, I would guess it is the second anchor of the second label causing it.

You should 2. anchor the second label like this:
<Anchor point="TOPRIGHT" relativeTo="$(parent)ItemTex1" relativePoint="BOTTOMRIGHT" offsetX="-15" offsetY="10" />

rp12439_3

07/01/21 04:54 AM

like this?

<Label name="$(parent)ItemTex2" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">
<Anchor point="TOPLEFT" relativeTo="$(parent)ItemTex1" relativePoint="BOTTOMLEFT" offsetX="15" offsetY="10"/>
<Anchor point="TOPRIGHT" relativeTo="$(parent)ItemTex1" relativePoint="BOTTOMRIGHT" offsetX="-15" offsetY="10" />
</Label>

votan

07/01/21 04:58 AM

Quote:

Originally Posted by rp12439_3 (Post 44303)

yes. like this.

rp12439_3

07/01/21 05:00 AM

thanks :) will try...

I guess my understanding of anchors is in great need of improvement...

Baertram

07/01/21 05:06 AM

https://wiki.esoui.com/Control:SetAn...mically_sizing

2nd Label's offsetX should be 0 though! Else you will move the label2 15 pixels more accordingly to the Label1 which already was moved by 15pixel on x axis.

rp12439_3

07/01/21 05:09 AM

Quote:

Originally Posted by Baertram (Post 44306)

https://wiki.esoui.com/Control:SetAn...mically_sizing

Ive studied this... a lot...

rp12439_3

07/01/21 05:22 AM

The change to the second anchor in the second label had no effect.

rp12439_3

07/01/21 05:23 AM

Here is the full XML:

Code:

<GuiXml>

    <Controls>

        <TopLevelControl name="CraftyStockListTooltip" hidden="true" mouseEnabled="true" movable="false" clampedToScreen="true">

            <!--Anchor point="TOPLEFT" relativeTo="$(parent)" relativePoint="TOPRIGHT" offsetX="0" offsetY="0"/-->

            <Dimensions x="300" y="500" />

            <Controls>

                <Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />

                <Texture name="$(parent)ItemIcon" textureFile="" tier="HIGH">

                                        <Dimensions x="50" y="50"/>

                                        <Anchor point="CENTER" relativeTo="$(parent)" relativePoint="TOP" offsetY="-10" />

                                </Texture>

                <Label name="$(parent)ItemLink" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="CENTER" text="">

                    <Anchor point="TOP" relativeTo="$(parent)ItemIcon" relativePoint="BOTTOM" offsetX="0" offsetY="10"/>

                </Label>

                                <Label name="$(parent)ItemType" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="CENTER" text="">

                    <Anchor point="TOP" relativeTo="$(parent)ItemLink" relativePoint="BOTTOM" offsetX="0" offsetY="5"/>

                </Label>

                

                <Texture name="$(parent)Divider" textureFile="/esoui/art/miscellaneous/horizontaldivider.dds" tier="HIGH">

                                        <Dimensions x="300" y="4"/>

                                        <Anchor point="CENTER" relativeTo="$(parent)ItemType" relativePoint="BOTTOM" offsetY="10" />

                                </Texture>

                                

                                <Label name="$(parent)TraitTypeText" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">

                    <Anchor point="TOPLEFT" relativeTo="$(parent)Divider" relativePoint="TOPLEFT" offsetX="15" offsetY="10"/>

                    <Anchor point="BOTTOMRIGHT" relativePoint="RIGHT" offsetX="-15" offsetY="0"/>

                </Label>

                                

                <Label name="$(parent)ItemFlavor" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">

                    <Anchor point="TOPLEFT" relativeTo="$(parent)TraitTypeText" relativePoint="BOTTOMLEFT" offsetX="0" offsetY="0"/>

                    <Anchor point="TOPRIGHT" relativeTo="$(parent)TraitTypeText" relativePoint="BOTTOMRIGHT" offsetX="-15" offsetY="10" />

                </Label>



            </Controls>

        </TopLevelControl>      

    </Controls>

</GuiXml>

and some part of the lua:

Code:

local itemIcon

  local itemLink

  local traitText

  local traitType

  local traitTypeText

  local traitTypeDesc

  local itemType

  local itemTypeSpec

  local itemTypeSpecText

  local itemFlavor

  local traitTypeTextHeight = 0

  local itemFlavorTextHeight = 0

  

  itemIcon = GetItemLinkIcon(control.data.link)

  itemLink = control.data.link

  if GetItemLinkTraitType(control.data.link) ~= 0 then

    traitType, traitTypeDesc =  GetItemLinkTraitInfo(control.data.link)

    traitTypeText = GetString("SI_ITEMTRAITTYPE", traitType).."\n"..traitTypeDesc

  end

  itemType, itemTypeSpec = GetItemLinkItemType(control.data.link)

  itemTypeSpecText = GetString("SI_SPECIALIZEDITEMTYPE", itemTypeSpec)

  itemFlavor = GetItemLinkFlavorText(control.data.link)



  CraftyStockListTooltipItemIcon:SetTexture(itemIcon)

  CraftyStockListTooltipItemLink:SetText(itemLink)

  CraftyStockListTooltipItemType:SetText(itemTypeSpecText)

  CraftyStockListTooltipTraitTypeText:SetText(traitTypeText)

  CraftyStockListTooltipItemFlavor:SetText(itemFlavor)

rp12439_3

07/01/21 05:33 AM

Thats how it look like:

http://imageserver.ocis-network.de/tooltip.png

Baertram

07/01/21 08:41 AM

From my understanding, if you want the ItemFlavor to be directly below the TraitTypeText.
I've added resizeToFitDescendants="true" to your TLC so it will change it's size depending on the text and other contents and also DimensionConstraints so the maximum size will not be above 300 width and 500 height (change the height to your maximal needs).

Code:

<GuiXml>

    <Controls>

        <TopLevelControl name="CraftyStockListTooltip" hidden="true" mouseEnabled="true" movable="false" clampedToScreen="true" resizeToFitDescendants="true">

            <!--Anchor point="TOPLEFT" relativeTo="$(parent)" relativePoint="TOPRIGHT" offsetX="0" offsetY="0"/-->

            <Dimensions x="300" y="0" />

            <DimensionConstraints minX="300" minY="0" maxX="300" maxY="500" />

            <Controls>

                <Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />

                <Texture name="$(parent)ItemIcon" textureFile="" tier="HIGH">

                                        <Dimensions x="50" y="50"/>

                                        <Anchor point="CENTER" relativeTo="$(parent)" relativePoint="TOP" offsetY="-10" />

                                </Texture>

                <Label name="$(parent)ItemLink" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="CENTER" text="">

                    <Anchor point="TOP" relativeTo="$(parent)ItemIcon" relativePoint="BOTTOM" offsetX="0" offsetY="10"/>

                </Label>

                                <Label name="$(parent)ItemType" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="CENTER" text="">

                    <Anchor point="TOP" relativeTo="$(parent)ItemLink" relativePoint="BOTTOM" offsetX="0" offsetY="5"/>

                </Label>



                <Texture name="$(parent)Divider" textureFile="/esoui/art/miscellaneous/horizontaldivider.dds" tier="HIGH">

                                        <Dimensions x="300" y="4"/>

                                        <Anchor point="CENTER" relativeTo="$(parent)ItemType" relativePoint="BOTTOM" offsetY="10" />

                                </Texture>



                                <Label name="$(parent)TraitTypeText" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">

                    <Anchor point="TOPLEFT" relativeTo="$(parent)Divider" relativePoint="TOPLEFT" offsetX="15" offsetY="10"/>

                </Label>



                <Label name="$(parent)ItemFlavor" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">

                    <Anchor point="TOPLEFT" relativeTo="$(parent)TraitTypeText" relativePoint="BOTTOMLEFT" offsetX="0" offsetY="0"/>

                </Label>



            </Controls>

        </TopLevelControl>

    </Controls>

</GuiXml>

The labels do not necessarily need any 2nd anchor for your usecase except if you want to tell the ItemFlavor label to be anchored to the bottom of the tooltip. But the labels should resize themselves to the size they will need. Else you can set the Dimension Constraints for the labels as well so they will not get bigger than/smaller than...
If you anchor the middle label (TraitTypeText) to the RIGHT it will ALWAYS be the size from Divider to the middle (RIGHT) of the tlc (tooltip control).
And the following anchored label will then begin below that RIGHT (middle) of the tlc.

rp12439_3

07/01/21 08:50 AM

Quote:

Originally Posted by Baertram (Post 44311)

Code:

<GuiXml>

    <Controls>

        <TopLevelControl name="CraftyStockListTooltip" hidden="true" mouseEnabled="true" movable="false" clampedToScreen="true" resizeToFitDescendants="true">

            <!--Anchor point="TOPLEFT" relativeTo="$(parent)" relativePoint="TOPRIGHT" offsetX="0" offsetY="0"/-->

            <Dimensions x="300" y="0" />

            <DimensionConstraints minX="300" minY="0" maxX="300" maxY="500" />

            <Controls>

                <Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />

                <Texture name="$(parent)ItemIcon" textureFile="" tier="HIGH">

                                        <Dimensions x="50" y="50"/>

                                        <Anchor point="CENTER" relativeTo="$(parent)" relativePoint="TOP" offsetY="-10" />

                                </Texture>

                <Label name="$(parent)ItemLink" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="CENTER" text="">

                    <Anchor point="TOP" relativeTo="$(parent)ItemIcon" relativePoint="BOTTOM" offsetX="0" offsetY="10"/>

                </Label>

                                <Label name="$(parent)ItemType" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="CENTER" text="">

                    <Anchor point="TOP" relativeTo="$(parent)ItemLink" relativePoint="BOTTOM" offsetX="0" offsetY="5"/>

                </Label>



                <Texture name="$(parent)Divider" textureFile="/esoui/art/miscellaneous/horizontaldivider.dds" tier="HIGH">

                                        <Dimensions x="300" y="4"/>

                                        <Anchor point="CENTER" relativeTo="$(parent)ItemType" relativePoint="BOTTOM" offsetY="10" />

                                </Texture>



                                <Label name="$(parent)TraitTypeText" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">

                    <Anchor point="TOPLEFT" relativeTo="$(parent)Divider" relativePoint="TOPLEFT" offsetX="15" offsetY="10"/>

                </Label>



                <Label name="$(parent)ItemFlavor" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">

                    <Anchor point="TOPLEFT" relativeTo="$(parent)TraitTypeText" relativePoint="BOTTOMLEFT" offsetX="0" offsetY="0"/>

                </Label>



            </Controls>

        </TopLevelControl>

    </Controls>

</GuiXml>

Thank you so much. I will try this!

I had to add the second anchor to the labels because they did not wrap without it. Dont know why.

Baertram

07/01/21 09:52 AM

Quote:

Originally Posted by rp12439_3 (Post 44312)

Thank you so much. I will try this!

I had to add the second anchor to the labels because they did not wrap without it. Dont know why.

I guess because there was no height of the label defined via Dimensions or DimensionConstraints.
You could also add a 2nd anchor to the bottom label so it anchors to the bottom of the TLC.
This will span the label from topleft to bottomright.
Only the 1st label needs to be defined with a dimensin so the 2nd knows where to anchor to.

Quote:

rp12439_3

07/01/21 10:08 AM

Well.. the result is interesting :)

http://imageserver.ocis-network.de/tt2.png

I will try somethings.

rp12439_3

07/01/21 10:21 AM

Quote:

Originally Posted by rp12439_3 (Post 44314)

Well.. the result is interesting :)

http://imageserver.ocis-network.de/tt2.png

I will try somethings.

Dimension Constraints to the labels do the trick for the wrapping :) now i just need a working background.

rp12439_3

07/01/21 10:25 AM

Quote:

Originally Posted by rp12439_3 (Post 44315)

Dimension Constraints to the labels do the trick for the wrapping :) now i just need a working background.

Calculated the height with GetTextHeight and now its working! Great, and thanks again!

rp12439_3

07/01/21 10:27 AM

1 Attachment(s)

and now i know how to add an image to the post

Baertram

07/02/21 01:08 AM

Oh okay, I thought the resizeToFitDescendents at the Tlc would do the trick. Try to add it to the background backdrop, and remove the AnchorFill there (both at the same time do not work).
Without the text height calculated it could resize to the Labels then as they got constraints for their dimensions.

All times are GMT -6. The time now is 06:10 AM.