Skip to main content

i4scada Knowledge Base

SmartEditor integrated images are not visible in modal dialogs

Abstract

This is the workarounds available to overcome the situation when graphical elements are not visible in modal dialogs.

When building an i4scada SmartEditor project, using modal dialogs to open integrated images, some of the elements displayed in the popover window are not visible or are incorrectly displayed.

Important

Before going on further with this article, it is important to mention that the only images that seem to generate this visibility issues are the SmartEditor integrated graphical elements, such as the Line, the Curve, the Curved Text, the Shape, etc.

Another aggravating circumstance leading to this visibility issue is the position of the modal dialog holding the image, on a different folder than the actual dialog page.

different_page.jpg

The image is located on a different folder than the modal dialog

Hence, a problematic project will have the following structure:

  • Index page holding two wf-modal-button extensions: Modal dialog 1 has its source set to Page 2 and Modal dialog 2 has its source set to Page 3.

    Index_page.jpg

    The Index page

  • Folder 2

    • Page 2 holding two extensions: a Line SmartEditor graphical element and a wf-arrow-line extension.

      Page_2.jpg

      The Page 2

  • Page 3 holding two extensions: a Line SmartEditor graphical element and a wf-arrow-line extension.

    Page_3.jpg

    The Page 3

At run time, the result is that when opening the first modal dialog, only the wf-arrow-line extension will be visible, while for the second modal dialog both components will be visible.

Even though this issue occurs in very specific circumstances, if you have encountered it, this article describes the two available workarounds:

  1. Replace the SmartEditor graphical element with an actual image of it

  2. Replace the SmartEditor graphical element with a extension.

Workaround 1

The first workaround in overcoming the SmartEditor integrated graphical element visibility issue is given by the replacement of the problematic element, with an actual image of that graphical element.

Workaround 2

The second workaround in overcoming the SmartEditor integrated graphical element visibility issue is given by the replacement of the problematic element, with an actual extension.

Warning

extensions used in a different folder than modal dialog button, may also lead to an unpleasant display issue that can be easily fixed by processing the following steps:

  1. Open the Tools toolbar menu and select the Options entry.

  2. In the Options dialog switch to the HTML menu.

  3. Unmark the CSS option "Generate external CSS style sheets for page specific styles".

    CSS_change.jpg