The HTML Content Form Control

The oxy_htmlContent built-in form control is used for rendering HTML content. This HTML content is displayed as a graphical element shaped as a box. The shape of the box is determined by a given width and the height is computed based upon the length of the text.

The oxy_htmlContent form control supports the following properties:

href - The absolute or relative location of a resource. The resource needs to be a well-formed HTML file.
id - The unique identifier of an item. This is a div element that has a unique id and is a child of the body element. The div element is the container of the HTML content to be rendered by the form control.
content - An alternative to the href and id pair of elements. It provides the HTML content that will be displayed in the form control.
width - Specifies the width of the content area using relative (em, ex), absolute (in, cm, mm, pt, pc, px), and percentage (followed by the % character) length units. The width property takes precedence over the columns property (if the two are used together).
hoverPseudoclassName - Allows you to change the way an element is rendered when you hover over a form control. The value is the name of a CSS pseudo-class. When you hover over the form control, the specified pseudo-class will be set on the element that contains the form control.
```
p:before {
  content: oxy_htmlContent(hoverPseudoclassName, 'showBorder')
}
p:showBorder {
  border: 1px solid red;
}
```

You can customize the style of the content using CSS that is either referenced by the file identified by the href property or is defined in-line. If you change the HTML content or CSS and you want your changes to be reflected in the XML that renders the form control, then you need to refresh the XML file. If the HTML does not have an associated style, then a default text and background color will be applied.

In the following example, the form control collects the content from the p_description div element found in the descriptions.html file. The box is 400 pixels wide and is displayed before a paragraph identified by the intro_id attribute value.

p#intro_id:before {
    content: 
        oxy_htmlContent(
            href, "descriptions.html",
            id, "p_description",
            width, 400px);
}

An alternative example, using the content property:

p#intro_id:before {
    content: 
        oxy_htmlContent(
            content, "<div style='font-weight:bold;'>My content</div>",
            width, 400px);
}

Note: You can use the Content Completion Assistant in the CSS or LESS editor to easily insert a sample of the form control by selecting the corresponding code template. The form control code templates are displayed with a

symbol in the content complete list.

Tip: To insert a sample of the oxy_htmlContent form control, invoke the Content Completion Assistant by pressing Ctrl Space (Command Space on OS X) and select the

oxy_htmlContent code template.