ListSelector's view appears... somewhere, but not under the selector.

[TheSHEEEP]

This happens to me in version 1.8.17.

I placed a ListSelector in my app, and it does work as expected, functionally. However, the view that opens when you click the selector button does not open at a position below the button. Instead, it appears on the top right side of the whole app.

Here are two screenshots:
Normal state: http://i.imgur.com/GlROmA5.png

Clicked: http://i.imgur.com/woc5vH5.png

I'm not quite sure what is going on there. The ListSelector is inside the following structure: Root(+HorizontalLayout)/VBox(+VerticalLayout)/Container(+VerticalLayout)/ListSelector

[ianharrigan]

Is there any chance you could knock up a minimal example with source? It will be easier for me to take a look then.

Cheers, Ian

[TheSHEEEP]

Using this function as the parameter for openFullscreen reproduces it for me. It is kinda hacky, as I put it together from my actual code, and the ListSelector is for some reason super thin. But it does reproduce the problem.

It kinda looks like the selection is shown to the right of the parent container of the ListSelector.

function setup(p_root : Root) : Void
    {
        p_root.percentHeight = 100.0;
        p_root.percentWidth = 100.0;

        // Boxes
        p_root.layout = new HorizontalLayout();
        _leftBox = new VBox();
        _leftBox.layout = new VerticalLayout();
        _leftBox.percentHeight = 100.0;
        _leftBox.percentWidth = 70.0;
        p_root.addChild(_leftBox);

        var container : Container = new Container();
        container.layout = new VerticalLayout();
        var sorting : ListSelector = new ListSelector();
            sorting.dataSource.add({text:"One"});
        sorting.dataSource.add({text:"Two"});
        sorting.dataSource.add({text:"Three"});
        sorting.dataSource.size();
        sorting.selectedIndex = 0;
        container.addChild(sorting);

        _leftBox.autoSize = true;
        _leftBox.layout.refresh();

        p_root.autoSize = true;
        p_root.layout.refresh();
    }

[ianharrigan]

Ok, i can see why its happening

Its because of the p_root.layout = new HorizontalLayout();. The root is the object that everything gets added to (including popups, list selector drop downs etc). It extends from Component and is set to use an absolute layout, thats so you can position things absolutely.

Your code is overriding this, setting it to a hbox and then adding a 70% child to it, so when the framework comes to add the list to the root (via addChild) it honours the layout and add it to the right.

The fix is pretty simple: dont touch the root layout and add a 100%x100% hbox into it as a "container" this can hold the rest of your UI and the popup will appear over the top of it.

[TheSHEEEP]

Ah, I see. Makes sense when you think about it. Thanks!

[ianharrigan]

Cool. Glad it was simple! :)

Can you close this when you are happy its working and is the issue?

Cheers, Ian