Since the Bootstrap theme was released, many of the questions I’ve received were about managing details in the panels, and in particular how to design the fields within the IDE to achieve a final layout that looks as much as possible like what you want.
There have also been some very interesting threads in the forum, including one in particular that led to a call with Pro Gamma staff on January 18th. In this call, one of the most interesting aspects addressed was the algorithm that Instant Developer uses to divide the fields on screen in the twelve Bootstrap columns. Following that call, we decided to write this post to explain to everyone the dividing rules the IDE uses and how to make the most of them.
If you haven’t had a chance to work with this rendering framework yet, you need to know that the objects displayed to the user are arranged in a 12-column grid. Each field can occupy a single cell, or it can expand horizontally to occupy the cells next to it. The height of the row is dictated by the height of its content. But how does Instant Developer divide the rows and columns?
Let’s look at it together, starting with a simple layout:
First, the framework divides the form into horizontal bands, making sure that no field ever straddles two rows. Each of these is then divided into vertical bands using the same criteria. The procedure continues recursively for each cell obtained in this fashion, subdividing them further into rows and columns until there is a cell for every field.
The layout above is the simplest one possible; the final result is represented by a horizontal band for every field, each with a vertical band 12 columns wide, like this:
Naturally, forms will almost always be more complex, but the logic of the algorithm is the same. Let’s take the following layout for example:
In this case, the first horizontal band, shown in the image, is divided vertically in two: on the right the Photo field and all the other fields on the left. The procedure continues, dividing the left area into four horizontal bands. The first three of these are divided vertically in two, while the third doesn’t need to be divided given that it only contains one field.
But how wide are the fields? How can we control their size at design time?
The minimum width of a vertical band is always 1/12 of the panel width. This is because Bootstrap manages twelve columns. Each vertical band occupies from one to twelve columns proportionate to the design time layout.
When working with Bootstrap, it’s important to be able to decide how many columns each vertical band occupies. The last step that needs to be clarified is how to achieve this control using the Instant Developer IDE. In order to answer the question How many columns will my field occupy?, all you need to know is how wide a column is (as we’ve said, 1/12 of the form).
Look at the table below. Simply set the form to one of the widths specified in the first column to find out how wide a field needs to be depending on the number of columns it needs to occupy.