Apply css before the loading of a view

#1

hello, this is my first post here…is possible to apply custom css to a view before the loading of a page?
i explain: I have an homepage with six blocks, so if I set fixed heights it would be good for my developement smartphone, but it won’t for different screens, so to “make responsive” this view before the loading of the home i calculate the height of the view with

var dynamicheight=(platformModule.screen.mainScreen.heightDIPs-80)/3

and would set this height to the blocks in the css.

i didn’t find a better way to do this, i tried with vh or % dimensions but seems NS don’t like these

any suggestion will be appreciated

thank you

#2

Simply use a GridLayout, assign rows="*,*,*" so it splits the available space into 3 now set row index to each component inside. You don’t have to manually calculate height here.

Learn more about layouts at nslayouts

#3

hi, thanks for the answer, in my case it doens’t work, i have a gridlayout with two rows, the second with fixed height and the first with the * and contains “height dynamic blocks” made with 6 images that should be of different sizes but wrapped in fixed containers

#4

Then still a Grid Layout works, it should be something like

<GridLayout rows="*,100">
 <ScrollView row="0">
   <StackLayout>
      <!-- your images here-->
   </StackLayout>
 </ScrollView>
 <!-- your fixed content -->
 <StackLayout row="1"></StackLayout>
</GridLayout>

Besides did you try the site in the link - it gives you several examples of different layouts - at least one of them always fulfills you requirement.

#5

yes, this is the situation, but being the images of different sizes i need to lock them in fixed block, otherwise the result is ugly.

#6

You have lot of options for images to get things right. I would recommend you to go though the layout and Image component docs.