Pop-up Form Control

• color - Specifies the foreground color of the form control. If the value of the color property is inherit, the form control has the same color as the element that was used to insert it.
  Note:

  This property is used for rendering in the Author mode.
• columns - Controls the width of the form control. The unit size is the width of the w character. This property is used for the visual representation of the form control.
• edit - Lets you edit the value of an attribute, the text content of an element, or Processing Instructions (PI). This property can have the following values:
  • @attribute_name - The name of the attribute whose value is being edited. If the attribute is in a namespace, the value of the property must be a QName and the CSS must have a namespace declaration for the prefix.
  • #text - Specifies that the presented/edited value is the simple text value of an element.
    Note:

    You can set the value of the visibility property to -oxy-collapse-text to render the text only in the form control that the oxy_editor function specifies.
• editorSort - Specifies the sorting of the values displayed after clicking the popup control (for example, clicking a drop-down arrow button). The possible values of this property are ascending and descending.
• fontInherit - This value specifies whether or not the form control inherits its font from its parent element. The values of this property can be true or false (default value). To make the form control inherit its font from its parent element, set the fontInherit property to true.
• 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_popup(hoverPseudoclassName, 'showBorder')
  }
  p:showBorder {
    border: 1px solid red;
  }

• labels - Specifies the label associated with each entry used for presentation. If this property is not specified, the values property is used instead.
• rendererSeparator - Defines a separator used when multiple values are rendered. If not specified, the value of the resultSeparator property is used.
• rendererSort - Specifies the sorting of the values (labels) displayed on the form control before clicking the popup control. The possible values of this property are ascending and descending.
• resultSeparator - If multiple check-boxes are used, the separator is used to compose the final result. If not specified, the space character is used.
  Note:

  The value of the resultSeparator property cannot exceed one character.
• rows - This property specifies the number of rows that the form control presents.
  Note:

  If the value of the rows property is not specified, the default value of 12 is used.
• selectionMode - Specifies whether the form control allows the selection of a single value or multiple values. The predefined values of this property are single (default value) and multiple.
• sort - Specifies the default sorting of the form control values (the values displayed before and after clicking the popup control). However, the editorSort and rendererSort properties have a higher priority. The possible values of this property are ascending and descending.

• tooltip - Specifies a tooltip to be displayed when you hover over the form control.

• tooltips - Associates tooltips to each value in the values property. The value of this property is a list of tooltip messages separated by commas. If you want the tooltip to display a comma, use the ${comma} variable.

  Example:

  link:before{
   content: oxy_popup(
           edit, '@href',
           values, "Spring, Summer, Autumn, Winter",
           tooltips, "Iris${comma}Snowdrop, Gardenia${comma}Liliac,
               Chrysanthemum${comma}Salvia, Gerbera",
          selectionMode, single);  
  }

• values - Specifies the values that populate the list of proposals. If these values are not specified in the CSS, they are collected from the associated XML Schema.
  Note:

  Typically, when you use a comma in the values of a form control, the content that follows a comma is considered a new value. If you want to include a comma in the values, precede the comma with two backslashes. For example, (values, '1\\, 2\\, 3, 4') will display a form control that has 1, 2, 3 for the first value and 4 for the second value.
• visible - Specifies whether or not the form control is visible. The possible values of this property are true (default value) and false.
• 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).

popupWithMultipleSelection:before {
    content: " This editor edits an attribute value. 
                The possible values are specified
    inside the CSS: "
        oxy_popup(
            edit, "@attribute",
            values, "value1, value2, value3, value4, value5",
            labels, "Value no1, Value no2, Value no3, Value no4, Value no5",
            resultSeparator, "|",
            columns, 10,
            selectionMode, "multiple",
            color, "blue",
            fontInherit, true);
    font-size:30px;
}