|
07/01/21, 04:38 AM | #1 | |
|
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:
|
|
07/01/21, 04:50 AM | #2 |
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" /> |
|
07/01/21, 04:54 AM | #3 |
|
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> |
07/01/21, 04:58 AM | #4 | |
|
||
07/01/21, 05:00 AM | #5 |
|
thanks will try...
I guess my understanding of anchors is in great need of improvement... |
07/01/21, 05:06 AM | #6 |
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. Last edited by Baertram : 07/01/21 at 05:09 AM. |
|
07/01/21, 05:09 AM | #7 | |
|
|
|
07/01/21, 05:22 AM | #8 |
|
The change to the second anchor in the second label had no effect.
|
07/01/21, 05:23 AM | #9 |
|
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> 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) |
07/01/21, 05:33 AM | #10 |
|
|
07/01/21, 08:41 AM | #11 |
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> 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. Last edited by Baertram : 07/01/21 at 08:55 AM. |
|
07/01/21, 08:50 AM | #12 | |
|
I had to add the second anchor to the labels because they did not wrap without it. Dont know why. |
|
07/01/21, 09:52 AM | #13 | ||
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.
Last edited by Baertram : 07/01/21 at 09:56 AM. |
|||
07/01/21, 10:08 AM | #14 |
|
|
07/01/21, 10:21 AM | #15 | |
|
|
|
07/01/21, 10:25 AM | #16 |
|
|
07/01/21, 10:27 AM | #17 |
|
and now i know how to add an image to the post
|
07/02/21, 01:08 AM | #18 |
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. |
|
ESOUI » Developer Discussions » Lua/XML Help » Flexible height of 2 panels / correct positioning |
«
Previous Thread
|
Next Thread
»
|
Display Modes |
Switch to Linear Mode |
Hybrid Mode |
Switch to Threaded Mode |
|
|