Rollbase, a low-code platform, is great for business-users without programming expertise. But developers will find powerful customization options as well.
In an earlier blog post we saw how Rollbase provides a no-code responsive UI generator, enabling business users to create or tailor applications for devices from desktop to smartphones without requiring expertise in responsive UI.
Rollbase also caters to developers and more advanced users who may want to have finer controls of the responsive rules.
In this blog, we will cover the customization capabilities, specifically for object view and object edit (form rendering across devices).
Please review the aforementioned blog post on the Rollbase responsive UI to understand how the Rollbase responsive system works across devices.
Rollbase will allocate each section column equal width. For example, a 1600px section with four columns will result in each column rendering in a 400px width <div>. Now when the browser is resized such that the section has 1200px width, each column will occupy exactly 300px.
Now the interesting problem is how much space (width) is allocated for field label <span> and field value <span>. In the image above, the label consumes 25% and the value the remaining 75%. So, in a 1200px section, each column will be 600px wide, the label will be 150px and the value 450px. Of course, these numbers will auto-adjust when the browser is resized.
Here is the same screenshot, with URL post-fixed with &demoFieldsLayout=true
The border around labels and values <span> illustrates how the space is used.
Rollbase automatically allocates a percentage of the available width to the field label and the field value depending on the screen size using media queries. However, as you can imagine, it is not possible to provide good default values that will work well for all kinds of situations. Sometimes you have long labels and short values, other times you have short labels and long values and many other combinations.
You simply override CSS rules at the page or application level. Here is the default rules list:
/* S4, S5, iPhone*, vertical mode */
) and (
In the example above, if we wanted to have the label and value consume equal width on large screens we would add the following rule:
Edit forms work the same exact way as object view with one additional rule. The additional rule is used to control how much space the input widget will consume from the available space in the value field.
With &demoFieldsLayout=true appended at the end of the URL:
The input field (with green dotted border) only takes half of the available space from the value container <span>.
The label consumes 25%, the value the remaining 75% and the input field 50% of the value container. So, in a 1200px section, each column will be 600px wide, the label will be 150px and the value 450px. The input field will be 225px wide. Again, these numbers will auto-adjust when the browser is resized.
The reason we have this additional level of control is that without it, input fields could look too wide.
While it is fine and even desirable to have uniform width between most input fields (for example, date and numeric input field), we don’t want to impose the same constraint on multi-line text input fields like Text Area and Rich Text Editor.
Rollbase provides additional CSS classes for these specific fields so that the space they consume can be tailored independently of the other input fields.
The CSS classes are:
/* Define a rule specific to Rich Text Editor as we may not want to constrain it like we do for other fields */
/* Define a rule specific to text area as we may not want to constrain it like we do for other fields */
This is particularly useful when combined with the option to hide the label. For example, in a bug tracking system, you may have a field called description. Without hiding the label, you would get something like this:
Now, by hiding the label and making the text area consume 100% of the available width we get this:
The only difference is the name of the CSS class is post-fixed with -2lines instead of -1line.
Here are the default values as provided in the current release (V4.x):
/* Labels above value */
The CSS rules we've talked about so far are added to the section columns independently of the number of columns the page designer chooses. For even more control, you can tailor the space to be consumed differently when the section has two columns versus four columns.
Here is the list of CSS classes for one, two, three and four columns respectively:
For example, if you wanted to split the space 50/50 between labels and values only when a section has one column you would use the following override:
Rollbase can cater to the need of both business users as well as programmers. For business users, the no-code responsive system allows them to create or tailor applications that work well across mobile and desktop devices in a few hours without any responsive programming skills. For developers, Rollbase provides direct access to CSS rules for a very high level of control. Give it a try today for free.
Thierry Ciot is a Software Architect and Product Owner on Progress Rollbase. Ciot has gained a broad experience in the development of products ranging from development tools to production monitoring systems. He is using his expertise to create a low code/rapid application development platform that provides a “Yes!” user experience. He is now focusing on responsive and adaptive modern web applications for public and private clouds. He holds two patents in the memory management space.
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
Copyright © 2019 Progress Software Corporation and/or its subsidiaries or affiliates.
All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.