Dock element to bottom within ScrollView of varying height


#1

Hi, I have a ScrollView that contains elements that vary in height depending on the screen that is shown - some screens go well beyond 100% height (thus the need for the ScrollView), but some have very little content.

I’m trying to add a spacer to the bottom of the scrollView, so that the bottom of each screen is always the same color - but only when you scroll down far enough to see it.

Here’s an example of what I’ve been trying: https://play.nativescript.org/?template=play-ng&id=aCbTlF&v=2

I’ve also tried using verticalAlignment=“stretch” and “min-height: 100%” on .screen-content, and replacing .home-panel with a DockLayout and adding dock=“top” and dock=“bottom” to its children.

How can I do this?


#2

@airandfingers
link -> https://play.nativescript.org/?template=play-ng&id=aCbTlF&v=3

Here you go. I used flexbox layout to do that.

Cheers! Happy NativeScripting


#3

Hm, did something go wrong with the saving?

The code in that link appears to be identical to the “New Playground” app, with no FlexboxLayout.

Thanks for the quick response!


#4

Let me try pasting the link again
@airandfingers
All you do is, take your link, and change the last number from 2 to 3.

I think when discourse showed the post thumbnail, something must have happened. :thinking:
Because I could see that the & in the link was replaced with &
that could be the reason


#5

Thanks @multishiv19, I see it now!

However, when I try to apply this to my own situation, it’s still not working :frowning:

My code uses a router-outlet, so it looks like this:

<ScrollView>
    <FlexboxLayout flexDirection="column" justifyContent="space-between">
        <router-outlet flexGrow="1"></router-outlet>
        <!-- Spacer for bottom bar, MUST be last in view -->
        <StackLayout class="g-bottom-bar-spacer"></StackLayout>
    </FlexboxLayout>
</ScrollView>

(I also tried with a <StackLayout flexGrow="1"> wrapping the router-outlet, but still no dice.)

I’d create a Playground app for this, but I don’t really want to go through setting up a whole router for this.


#7

How does the code for layout rendered inside your router outlet look?


#8

They’re just StackLayout with various labels and images, for example:

<StackLayout style="padding: 32 16 50 16; background-color: white; border-color: #CCCFD3; border-width: 1 0 0 0; text-align: center;">
    <Label class="c-header" text="Screen 1"></Label>
    <Image class="c-image" marginTop=15; src="res://image_1"></Image>
    <Label class="g-body-text" marginTop=20 text="Text Blah blah blah blah blah blah 1"></Label>
</StackLayout>

Some of these fill up the screen with their contents, while others don’t, and I’ve tried putting style=“max-height: 100%;” and verticalAlignment=“stretch” on these too, with no luck.

Thanks for taking the time to help me out! I’m used to the web, where CSS is unpredictable, but NativeScript’s layouts and routers seem to add another level of complexity to this.


#9

I think, it’s worth doing it at this point. so that I can help you with it.
Or we can have a remote debugging session if you still don’t want to make it on the playground. DM me on slack @ multishiv19


#10

I waited to act on this until I could check with our design team, and today they told me that this part of the design was actually a bug in the prototype system.

So, I no longer need to find a way to do this.

Thanks again for the help!


#11

@airandfingers alrighty then :slight_smile: