Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    How to do HLayout for two variable length labels?

    I have two labels, which are at two ends of an HLayout ("-" is blank):
    Left adjust--------------------------------------Right adjust

    They are variable lengths, so I cannot set the size. Each could be 1-character, to 64-character long.

    The HLayout is in a resizable canvas, so the total width is also various.

    I want to do a HLayout that alway fill all avilable space when possible, but should "..." when they are clipped.

    Left adjust is very, very, very, very, very long----Right adjust

    Left adjust----Right adjust is very, very, very, very, very long

    Left adjust Right adjust is very, v...--Left adjust is very, v...

    #2
    It's not clear that you're going to get exactly what you describe out of the box.
    Something like this is pretty close:
    Code:
    isc.Window.create({
       title:"Test",
       canDragResize:true,
       items:[
        isc.HLayout.create({
            ID:"testLayout",
            border:"1px solid gold",
            members:[
                isc.Label.create({
                    wrap:false,
                    contents:"A a aa a",
                    overflow:"hidden",
                    //backgroundColor:"lightblue"
                }),
                isc.Label.create({
                    wrap:false,
                    align:"right",
                    contents:"Z zz z z This is now much much longer",
                    overflow:"hidden",
                    //backgroundColor:"lightgreen"
                })
            ]
        })
       ]
    });
    Feel free to experiment - pasting this code into the feature explorer and drag resizing the window larger and smaller.

    The labels will expand to fill the available space. The align creates the gap between them. When there isn't enough space for the content they will clip and show the ellipsis.
    If you wanted to force a minimum gap between them, you could use a LayoutSpacer, or you could specify a membersMargin.

    This doesn't quite match your description in one way: the 2 labels are always equal sized, so the layout itself may have enough space to accomodate both strings of text if the label on the right were sized larger, than the label on the left, but this won't happen automatically.

    Another option would be this:
    Code:
    isc.Window.create({
       title:"Test",
       canDragResize:true,
       items:[
        isc.HLayout.create({
            ID:"testLayout",
            border:"1px solid gold",
            members:[
                isc.Label.create({
                    wrap:false,
                    contents:"A a aa a",
                    overflow:"visible",
                    width:1
                    //backgroundColor:"lightblue"
                }),
                isc.LayoutSpacer.create({width:"*"}),
                isc.Label.create({
                    wrap:false,
                    align:"right",
                    contents:"Z zz z z This is now much much longer",
                    overflow:"visible",
                    width:1
                    //backgroundColor:"lightgreen"
                })
            ]
        })
       ]
    });
    In this case the 2 labels fit their content, but they wont ever clip it and show ellipsis.

    If you need something more sophisticated than this, you're going to have to write your own version.
    You'd probably achieve this by setting overflow to "hidden" on each of the labels, and then whenever the content is changed on a lable, or whenever the parent is resized:
    - Measuring the size of the label content via getScrollWidth()
    - Measuring the size of the parent via getViewportWidth()
    - Explicitly calling "setWidth" on each of the labels to size them as appropriate.

    Regards
    Isomorphic Software

    Comment

    Working...
    X