PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
This content comes from an automatic translation.
  • Overview
  • Error about display order and positioning
  • Example
  • Explanations
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
WEBDEV proposes UI 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 slices
  • Overlap error on positioning blocks: The responsive positioning block that contains the <Control name> control in the Tablet slice as an overlap 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" slice.
  • modify the anchor of controls.
  • use a cell to group the controls logically.
Error about display order and positioning

Example

In a Responsive Web Design page, the display order of controls must be kept between the different slices. For example, you cannot entirely modify the order of controls between the reference slice (Desktop or Mobile) and the Tablet slice.
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):
  1. In Desktop slice, three images and three captions are displayed.
    3 images and 3 captions
  2. In Mobile slice, 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 slice, and position an image with its caption on the line.
  3. In Desktop slice, the anchoring of controls (3 images and 3 captions) is modified to use the edit size in width.
  4. In Tablet slice, the last image and its caption are moved to "go the next line".
  5. UI errors occur. By double-clicking the overlap error, the overlap error view is automatically enabled.
    Modification in tablet mode
    A pink block appears as well as blue and red borders in dotted lines. They materialize an invalid stacking area.

Explanations

WEBDEV divides in lines the different elements found in the page. In the "Desktop" slice, WEBDEV created:
  • a line for the images,
  • a line for the captions.
In the smaller slice (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 static controls not having the same height, the two lines are stacked.
SUnder the editor, by displaying the superimpositions, WEBDEV allows to visualize this superimposition of lines:
  • 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 slice.
  • 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 UI error.
Minimum version required
  • Version 21
Comments
Click [Add] to post a comment