Combo Box Form Control

The oxy_combobox form control supports the following properties:

• 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.

• columns - Controls the width of the form control. The unit size is the width of the w character.
• 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).
• visible - Specifies whether or not the form control is visible. The possible values of this property are true (default value) and false.
• editable - This property accepts the true and false values. In addition to a drop-down menu, the true value also generates an editable text field box that allows you to insert other values than the proposed ones. The false value generates a drop-down menu that only accepts the proposed values.
• 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.
• values - Specifies the values that populate the content completion list of proposals. If these values are not specified in the CSS, they are collected from the associated XML Schema..
• 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.
• labels - This property must have the same number of items as the values property. Each item provides a literal description of the items listed in the values property. These labels can be translated using the ${i18n()} editor variable.

  Note

  This property is only available for read-only combo boxes (the editable property is set to false).
• 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 in which it is inserted.
• 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_combobox(hoverPseudoclassName, 'showBorder')
  }
  p:showBorder {
    border: 1px solid red;
  }

• canRemoveValue - If the value is set to true and the combo box is not editable, then a new <Empty> value is added in that combo box. This clears or removes the value being edited, depending on if it edits an element or attribute.

comboBox:before {
    content: "A combo box that edits an attribute value. 
               The possible values are provided from CSS:"
        oxy_combobox(           
            edit, "@attribute",
            editable, false,
            values, "value1, value2, value3",
            labels, "Value no1, Value no2, Value no3");
}

Tip

To insert a sample of the oxy_combobox form control in a CSS file , invoke the Content Completion Assistant by pressing Ctrl + Space (Command + Space on OS X) and select the oxy_combobox code template.

To see more detailed examples and more information about how form controls work in Oxygen XML Editor plugin, see the sample files in the following directory: [OXYGEN_INSTALL_DIR]/samples/form-controls.