Rendering issues

If an application does not render or display as expected, these are some things to do to help resolve it.

Graphical widgets that are not rendered properly or displayed with a different style are considered rendering issues. Examples of rendering issues include:
  • Misalignment
  • 4st colors not applied
  • Widgets that are rendered when they should not

When you encounter a rendering issue, first try and identify the source of the rendering issue. Find out where it originates from:

The browser
Run your program in different browsers. Not all browsers are equal so verify if the issue occurs in all browsers or just one. If a problem suddenly starts occurring, it may be due to a recent browser update.
Tip: If you have another PC, turn off auto-updates for the browser(s) so that you have an old browser you can use to test your application against.
Other checks to carry out on the browser side include the following:
  1. Check the AUI tree to verify that node and properties of the user interface screen you are currently working on are loaded properly and that the widgets attributes are correctly set. See Configure the GBC development environment
  2. Use browser developer tools to inspect elements of a GBC application interface to identify the widgets not rendering correctly. Browser developer tools are accessed by pressing the F12 key. Other things to check:
    • Check that the resource files (.css, .js, and so on) are accessible and not displaying a 404 error message.
    • Check that the HTML is properly generated. For example, check whether the color for the edit is set or is missing in the generated page.
GBC customization
Run your program without any GBC customization applied, that is run it using the default styling. If the problem does not occur with the default rendering, then the problem most likely is due to your GBC customization. For more information, see the Genero Browser Client User Guide.
Your application code
Run the demo application delivered by the Genero Application Server and in the Topic tree of the demo directory, navigate to User Interface. If a particular widget/container renders correctly in the demo but not in your program, then this is likely due to your 4gl code.