Dynamically size Nativescript ContentView within ScrollView based on device height

Question

I have a Nativescript Vue component template defined as:

<ScrollView>
    <StackLayout>
        <ContentView ref="mapContainer" height="500" width="100%">
            <Mapbox
            accessToken="my access key"
            mapStyle="outdoors-v9"
            hideCompass="true"
            zoomLevel="10.2" , 
            latitude="51.949266"
            longitude="-12.183571"
            showUserLocation="true"
            disableZoom="true"
            disableRotation="true"
            disableScroll="true"
            disableTilt="true"
            @mapReady="onMapReady($event)">
            </Mapbox>
        </ContentView>
        <Label text="A test label"/>
    </StackLayout>
</ScrollView>

When the component is mounted, I want to set the height of mapContainer to roughly 75% of the screen height. To do so, I have:

export default {
    name: "MyPage",

    mounted () {
        this.$refs.mapContainer.height = platform.screen.mainScreen.heightDIPs
    }

    ...

}

But this does nothing, and the ContentView remains at 500dp tall.

height is meant to be a setter, but I figure I'm missing a redraw (?) to get this change to take effect, but not sure how?

Manoj · Accepted Answer · 2018-11-26 15:43:42Z

3

In order to access the ContentView via refs, you must use .nativeView property.

this.$refs.mapContainer.nativeView.height = platform.screen.mainScreen.heightDIPs

Also you don't have to calculate the height but simply set the height in percentage (70%) instead of fixed value (500) Or use a GridLayout with 7 partition (7*).

answered Nov 26, 2018 at 15:43

Manoj

21.9k3 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

codinghands Over a year ago

Works perfectly, thank you. For some reason the Mapbox component requires a fixed height within a ScrollView otherwise it doesn't render.

Mark Odey Over a year ago

What is the import path of platform? That would be great to specify. Thanks

Manoj Over a year ago

Its different version to version, in V8.x you will have to import it from '@nativescript/core/platform' - docs.nativescript.org/api-reference/classes/screen#mainscreen

Collectives™ on Stack Overflow

Dynamically size Nativescript ContentView within ScrollView based on device height

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related