The Web Abstract Editor helps the designer to set the width of the cells in percentages for each screen size.
Depending on the width given to a cell for a screen size, a Bootstrap class is assigned to that cell at runtime. So at the end, the width of the cells is given by bootstrap classes.
In some cases, you may need to change the width of any of those cells and set a width value different than the values belonging to the range given by Boostrap (8%, 17%, 25%, 33%, 42%, 50%, 58%, 67%, 75%, 83%, 92%, 100%). In general, this won't be necessary, but if it is necessary to declare a width in pixels, the max-width property should be used.
The same happens with the padding values of the Bootstrap classes. By default, its classes have a padding value different than zero, but this can be changed as explained below.
Consider the following example:
Three items need to be displayed in a single row for medium and large devices (>=992px). In this example, the first cell takes 67%, while the other two take 8% of the width. The following picture shows the Responsive Table where those items are displayed and the Responsive Sizes property (X Evolution 3) dialog for this table.
In particular, the second item of the row (the second cell) takes 8% of the width, plus the padding given by the Boostrap class assigned to it.
The following picture shows the runtime design.
If you need to change the default settings, you can define a Cell Class and assign it to the cell, as shown in the figure:
In this case, two classes have been defined in the Theme - ImageCartCell2 and nopadding - which have been associated with the gx-table-row-cell-class property of the element.
The definition of each class is as follows:
.ImageCartCell2
{
max-width: 64px;}
.nopadding
{
padding: 0 !important;}
After these settings are made, the resulting design is as shown below:
