- Error about display order and positioning
Responsive Web Design: Specific GUI errors
From WEBDEV 21 Update 3, new GUI errors regarding the position of controls in the different blades are being introduced: WEBDEV proposes GUI errors regarding the position of controls in the different blades:
- Error about display order: The position of <Control name> changes the order in which controls are displayed defined in the reference slice (Desktop or Mobile according to the management mode of Desktop First or Mobile First). The display order of controls must be the same in all blades
- Stacking error on positioning blocks: The responsive positioning block containing the <Control name> control in the Tablet blade is in stacking error.
If these errors are not processed, an unexpected behavior may occur at run time. To fix this error, you can for example:
- move the control in the recommended direction.
- modify the order of controls in the "Desktop" blade.
- modify the anchor of controls.
- use a cell to group the controls logically.
Error about display order and positioning
In a Responsive Web Design page, the display order of controls must be kept between the different blades. For example, you cannot entirely modify the order of controls between the reference blade (Desktop or Mobile) and the Tablet blade.
In some cases, WEBDEV display an error regarding the display order while the interface seems to be consistent. Indeed, the display order of controls depends on several parameters: positioning of controls in relation to the other ones, alignment, anchors, ...
Let's study the following example (page created in Desktop First mode):
- In Desktop blade, three images and three captions are displayed. WEBDEV chooses to cut by line. Therefore, the controls are numbered as follows:
Image 1 Image 2 Image 3
Caption 4 Caption 5 Caption 6
- In Mobile blade, the images of products are reduced and truncated by default. To fix this problem, you must display the controls with the same size as in the Desktop blade and you must position an image and its associated caption on the line.
- In Desktop blade, the anchoring of controls (3 images and 3 captions) is modified to use the edit size in width.
- In Tablet blade, the last image and its caption are moved to "go the next line".
- An error regarding the display order occurs on the Static control associated with the first image. The Static control is displayed in pink (like for a stacking error). The controls are numbered as follows:
This numbering differs from the one of the Desktop blade.
Image 1 Image 2
Caption 4 Caption 5
Image 3 Caption 6
In this example, the controls must be grouped logically (image + caption) in order to move the last group in the Tablet blade.
One of the possible solutions is to use a Cell control to group each Image control and its caption. This operation must be performed in the Desktop blade. Then, you will have the ability to move the last cell below the other ones in the Tablet blade without having any GUI error. GUI errors occur. By double-clicking the stacking error, the viewing of stacking errors is automatically enabled. A pink block appears as well as blue and red borders in dotted lines. They materialize an invalid stacking area.
WEBDEV divides in lines the different elements found in the page. In the "Desktop" blade, WEBDEV created:
- a line for the images,
- a line for the captions.
In the lower blade (Tablet or Mobile), WEBDEV performs the same division, a line for the images and a line for the captions. The line containing the images and the line containing the captions not having the same height, the two lines are stacked.
In the editor, WEBDEV allows you to see this stacking:
- The blue border corresponds to the line containing the images.
- The red border corresponds to the line containing the captions.
To fix this type of overlap error, simply specify the text-level semantics.
In our case, each Image control must be linked to its static:
- to do so, you must create cells containing each "Image + Caption" couple. This operation must be performed in the Desktop blade.
- the anchor in width of each cell must be "Use the edit size".
Then, you will have the ability to move the last cell below the other ones in the Tablet blade without having any GUI error.
Click [Add] to post a comment