PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • When do I have to create a new blade?
  • How to manage the reduction or the enlargement of blades?
  • How to optimize the visible space in a blade?
  • Why overloading the position and size of controls provokes an overlay in the browser?
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
The Responsive Web Design was used in your pages but you still encounter some lock points.
This page presents several layout tips.
In any case:
  • Check all the GUI errors: they indicate the affected control and blade.
  • Start from the default blade:
    • Start from the "Desktop" blade in "Desktop First" modde and reduce the browser in the editor (via the handle) to check the consistency of modifications.
    • Versions 22 and later
      Start from the "Mobile" blade in "Mobile First" modde and enlarge the browser in the editor (via the handle) to check the consistency of modifications.
      New in version 22
      Start from the "Mobile" blade in "Mobile First" modde and enlarge the browser in the editor (via the handle) to check the consistency of modifications.
      Start from the "Mobile" blade in "Mobile First" modde and enlarge the browser in the editor (via the handle) to check the consistency of modifications.
When do I have to create a new blade?
You have the ability to create a blade:
  • To manage a specific device.
  • To manage a specific display. in the following example (page in "Desktop First" mode), an intermediate display is requested:
    Creating a blade
How to manage the reduction or the enlargement of blades?
By default, the controls are using the anchoring in width "Adapted to the grid". Therefore, the controls are proportionally reduced or enlarged according to the mode (Desktop First or Mobile First) . For example in "Desktop First":
Available controls
To limit the reduction of controls, all you have to do is define the minimum size:
  • "Min size" option in the "GUI" tab of the description window of control.
  • Versions 22 and later
    "Min size" option in the window for managing the control anchors.
    New in version 22
    "Min size" option in the window for managing the control anchors.
    "Min size" option in the window for managing the control anchors.
To avoid reducing the controls, the anchoring in width "Use the edit size" must be applied to the controls.
Note: If a GUI error occurs or if the control content cannot be exploited visually, the control must be moved and resized.
Unusable controls
How to optimize the visible space in a blade?
The page layout is kept by default. The content of the page is adapted to the blade.
To optimize the visible space, you have the ability to reduce the page margins (inside margins) in a blade and to apply the anchoring in width "Use the edit size" to the controls.
For example in Desktop First mode:
Adaptating the layout and the content
Why overloading the position and size of controls provokes an overlay in the browser?
The position of the control is overloaded in the "Mobile" and/or "Tablet" blade: in the browser, overloading the position and size provokes the overlay of controls.
What is the problem? Overloading the position in the "Mobile" and/or "Tablet" blade does not keep the order of controls defined in the "Desktop" blade (that is used as reference blade in "Desktop First" mode).
In "Responsive Web Design" mode, the controls are organized in relation to the other ones. This order depends on the position (from top to bottom then from left to right) and on the anchor. It must be exactly the same in all blades.
Indeed, the "Responsive Web Design" technology is using a single HTML stream for all the blades, while repositioning the controls by CSS. The order of controls in the reference blade defines the order of controls in the HTML stream.
Example: In the following example, the page contains a cell that groups another cell and an image:
The order of controls in the "Desktop" blade (the reference blade) is:
  1. the CELL_1 cell that groups the second CELL_2 cell and the image,
  2. the CELL_2 cell,
  3. the image.
In the "Mobile" blade, the size and position of controls are overloaded: the image is placed before the CELL_2 cell. The order of controls in the "Mobile" blade differs from the order of controls in the "Desktop" blade:
At run time, the order of controls in the "Desktop" blade being not respected in the "Mobile" blade, an overlay occurs: the image will overflow on the CELL_2 cell and it cannot "push" it:
To avoid any unexpected overlay in the browser, make sure that the order of controls in the "Mobile" blade and in the "Tablet" blade is the same as the order of controls in the "Desktop" blade (reference blade).
In our example, to get the expected result, you have the ability to use two Image controls:
  • The first Image control will be placed before the CELL_2 control in the Desktop blade (therefore, it will be first in the order of controls in the reference blade). It will be visible in the "Mobile" blade only.
  • The second image control will be visible in the "Desktop" blade only.
To simplify the positioning of controls in the "Mobile" and/or "Tablet" blade, from version 21 Update 3, a GUI compilation error is systematically generated by the page editor if the order of controls is not respected between the different blades.
Minimum required version
  • Version 21
Comments
Click [Add] to post a comment