T
Thierry Ciot
Guest
Today, we want to share what we have done to improve support for Grid Height. The grid height can now be specified as a percentage of the viewport as well as using the rem unit (until V4.0.2 we have support for px and em). For example, by specifying 100% in page designer for list view object, the grid will automatically be sized to fit in the available space in the browser window. This is particularly useful: For supporting multiple device sizes with a single policy. For pages where the grid is the only element on the page and you want no white space around the grid no matter what the size of the user's browser window. Also, in combination with infinite scrolling, we have received feedback from various customers that it does provide a very natural experience on mobile devices.[Y] Here are a couple of screenshots from a tablet in portrait and then rotated to landscape. The grid is set to use 100% height and to use infinite scrolling. Below you will find all the details on the various units and how we now support them. Hope you will find this useful too. Happy rapid coding Thierry. In page designer, application designer can specify grid height as either: px: specify the height of the grid in pixel em:specify the height of the grid in unit of the font size of the container rem:specify the height of the grid in unit of the font size of the root element %: specify the height of the grid in relation to the available space from the page without having to scroll (the viewport). We calculate the height based on percentage by considering available content space, if value is less than minimum height as specified by rb.newui.options.listView.minHeightWhenUsingPercentage (250px by default), then we pick minHeight otherwise we will use user defined value. Also, styles like margin and padding from rb-styleable-content-box (the overall container/sometime called canvas) are taken into account to size grid properly. For example, if rb-styleable-content-box as a 20px bottom margin, 20px of empty space will show at the bottom (for a grid set at 100% height and assuming the grid is the only section on the page. Note: One can set grid at 100% and still add other sections to the page. The sizing in that case works exactly the same as described above. empty or -1: If infinite scrolling is set:we will set the grid height to rb.newui.options.listView.minHeightForInfiniteScrolling (default to 330px). If infinite scrolling is not set: no height is computed and the grid shows all available rows (based on page size) - this is the compatible mode with classic ui. If not unit is specified, we default to pixel.
Continue reading...
Continue reading...