https://linen.dev logo
Join Discord
Powered by
# haxe-ui
  • b
    yeah, font sizes arent %... they are fixed values only currently
  • f
    indeed it doesn't
  • b
    there is "vw" and "vh" for css dimensions, but a) they are based on screen w/h and b) they wont change if the "screen" changes size (issue i mentioned before)
  • f
    if the size of your component depends on the screen and he font depends ont the component size you could maybe use @media
  • f
    like what will change the size of the component, just the screen resizing or something else ?
  • b
    i guess yeah, whats the purpose here @early-butcher-76809 - are you trying to create a responsive app? Ie, calc the sizes once and "its all good", or are you trying to, for whatever reason, have a bunch of "labels" that can change height and grow / shrink their font size?
  • e
    The second option :P I'm creating a component I'll use in different places and it can have different sizes :(
  • b
    so yeah, i dont think a pure css solution is gonna work (not currently anyway), i think your best (only?) option is to create a custom label component that has the logic for the font size in code
  • f
    if it's a custom component, I would use a function a @bind(this, UIEvent.Resize) (and Ready) and put the logic there
  • e
    Oh, I haven't thought of creating custom components ! Thank you, gonna try to make that :D
  • b
  • b
    probably needs some tweaking, but that kind of thing
  • b
    Copy code
    haxe
class SpecialLabel extends Label {
    private override function validateComponentLayout() {
        var b = super.validateComponentLayout();
        this.customStyle.fontSize = this.height - 8;
        this.invalidateComponentStyle();
        return b;
    }
}
  • e
    Thank you very much ! <3
  • e
    It works great ! I love you <3
  • e
    Is it already possible to have to auto size of boxes be defined by a label or does it need code ? By default, labels auto wrap to whatever width the boxes have (defined by the widest button, in my case). If I turn off the word wrap, the text just overflows on both sides ^^
  • f
    The default haxeui is label size is defined by text, container box is defined by label.
  • r
    Just made a small example. It is using HaxeFlixel targeting HashLink (
    lime test hl -debug
    ). There are two textfield components. When they have no text, and just placeholder text, there height is larger. They they snap back to normal size after typing. Or if they start with text set. https://drive.google.com/file/d/1vZxJ5xaH8gh2gK2WTCw-2Q22hgQZ6erP/view?usp=sharing
  • e
    Oh right. When I removed my ``width="100%"``, it worked !
  • e
    So I can't give my parent a size from a component and a %. If I write
    Copy code
    <vbox horizontalAlign="center" verticalAlign="center">
    <box height="35" width="80%" horizontalAlign="center">
        <label text="This is a long text to test stuff. Not very long but for one line, it's not short." textAlign="center" horizontalAlign="center" verticalAlign="center" />
    </box>
</vbox>
    The vbox won't get its size from the width of the label being 80% of its width (so, vbox.width being 125% of label.width). It will just ignore the label size to give it 80% of the with of the vbox, computed from other components. Is that right ?
  • e
    Let's say I add a button in the vbox, its width will be the button's width, not 125% of the label's width
  • f
    Indeed
  • e
    Thank you
  • b
    so yeah, 80% in the above layout means "80% of the vboxs width", however, that vbox is autosized, which means "size of its children"
  • b
    thanks, ill check it out a little later
  • f
    But for now, label has a the size of the text, but vbox has no size .. But if you use add a button, it will give a size to the vbox, so the box will have a size . The label will still be the size of the text
  • e
    Yeah, it doesn't include self in "size of its children" :(
  • e
    For some reason, this only works if my label has ``height="100%" width="100%"`` which removes it from the width calculations. If it's wider than other stuff, it'll overflow :/
  • e
    ``height="100%"`` alone doesn't do the job
  • e
    Neither does ``height="200"``
1...152815291530...1687Latest