HTML Container

You can use the HTML container to create an area in your iOS app that you can display using HTML code. Of course you can also use CSS (inline or external).

Properties

To show the properties of the HTML Container, click the Properties tab (the slider icon) in the upper right sidebar.

HTML Container

appdoo - Elements - HTML Container (HTML Container)

  • Name
    Here you give the element a name. This name is only used within appdoo. For example, you can quickly see in the outline where each HTML Container is located. You can also edit the name by double-clicking on the HTML Container in the outline. We recommend that you assign unique names when working with Layout Constraints and Data Links.

  • Auto Height
    If you activate this checkbox, the height of the HTML Container is automatically adjusted to its content. If this height is greater than the screen height, you must activate the checkbox for vertical scrolling for the Screen.

  • Allow User Interactions
    If you select this checkbox, the user of your iOS app can interact with the content of the HTML Container in the same way that he can interact with a website in Safari. They can select and copy text or click on links to open pages in Safari.

HTML Source Code

Enter your HTML source code in the large multiline text field. You can also use CSS. A simple example you can start with is this one:

<p style="padding:20px;">
  Here you can insert HTML code.
  This is displayed as on a website.
</p>

Note that you can only specify the content of a standard HTML structure that is normally between <body> and </body>.

  • Load From File …
    If you prefer to edit your HTML source code in an external text editor, this is of course no problem. Click on the button “Load From File …” and import the content of an HTML file.

Format

appdoo - Elements - HTML Container (Format)

  • Color
    Here you define the default color of the text for the content of your HTML Container. This default color can be overwritten by CSS specifications.

  • Hyperlinks
    Here you define the default color for hyperlinks in the content of your HTML Container. This default color can be overwritten by CSS specifications.

  • Margin
    Here you define the outer distance of your HTML Container.

Font

appdoo - Elements - HTML Container (Font)

In this area you have the possibility to set the font, the font weight and the font size. If you select the “System” option for the font, the system font specified by iOS will be used for the display. This font may differ between different versions of iOS.

This values can be overwritten by CSS.

Custom CSS

appdoo - Elements - HTML Container (Custom CSS)

This text field is used to enter your external CSS data. This allows you to define the appearance of the content of the HTML container. A simple example you can start with is this one:

p:first-of-type {
  padding: 10px;
  margin: 10px;
  border: 1px solid red;
}
  • Load From File …
    If you prefer to edit your CSS source code in an external text editor, this is of course no problem. Click on the button “Load From File …” and import the content of an CSS file.

Advanced

  • Hidden appdoo - Elements - HTML Container is Hidden

    If you activate the “Hidden” checkbox, your HTML Container will still be present on your work space, but will not be displayed. This can be useful, for example, if you only want to display the HTML Container under certain circumstances. You can control this via the “Hidden” field in the “Data Links” area.

Geometry

All information about this area can be found on the separate Geometry page.

appdoo - Elements - HTML Container - Geometry

The following properties of the element can be set using the data links:

  • Content
  • Hidden

All information about this area can be found on the separate Data Links page.

appdoo - Elements - HTML Container - Data Links