Layout dynamic docking of link to bottom

How-to Discussions
1

How can I dock the “BottomLink” to the bottom of the screen ONLY when there is whitespace between the items and the link? The Items are dynamic, there can be 2 or more (max. 10).

When there isn’t any whitespace between the items and the link, the BottomLink should not dock to the bottom of the screen but to the bottom of the content.

Thanks!

file
file320×590

2

Since you need a node to be a child of two parents, it’s not as straightforward as we’d like it to be.

Took me a good while poking around with UX expressions and changing LayoutMaster, and I came up with this:

<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var cnt = Observable(2);
        function inc() {
            cnt.value++;
        }
        module.exports = {
            cnt: cnt,
            inc: inc
        };
    </JavaScript>

    <ClientPanel>
        <Grid Rows="1*,56" Margin="4" CellSpacing="4">
            <ScrollView ux:Name="sv" UserScroll="false">
                <StackPanel ux:Name="list" ItemSpacing="4" Dock="Top">
                    <Each Count="{cnt}">
                        <Panel Height="56" Clicked="{inc}">
                            <Rectangle Color="#18f" CornerRadius="2" />
                        </Panel>
                    </Each>
                    <Panel ux:Name="listPlaceholder" Height="56" />
                </StackPanel>
            </ScrollView>
            <Panel ux:Name="bottomPlaceholder">
                <Rectangle ux:Name="node" Height="56" Color="#1f8" CornerRadius="2" Alignment="Bottom" />
            </Panel>
        </Grid>
    </ClientPanel>

    <WhileTrue Value="{= height(list) > height(sv)}" Bypass="Never">
        <Set node.LayoutMaster="bottomPlaceholder" />
        <Change sv.UserScroll="true" />
        <Change listPlaceholder.Height="0" />
    </WhileTrue>
    <WhileFalse Value="{= height(list) > height(sv)}" Bypass="Never">
        <Set node.LayoutMaster="listPlaceholder" />
    </WhileFalse>
</App>
3

Hi Uldis,

Great, but this code has issue. Please refer https://youtu.be/xEdzbyKNd9Q

  • Fuse 1.1.0
  • Device: Samsung galaxy S6
  • Android: 7.0
4

Left as an exercise for reader.

That’s just a quick proof-of-concept I threw together in minutes. The issue you’re seeing should be fixable by getting the math right in the UX expressions - as the listPlaceholder height is changed to 0, so does the height(list) change - which results in the green rectangle “jumping around”.

It could be as simple as deducting (or adding?) height(listPlaceholder) in the formula :slight_smile: