xpagestypeaheadeditbox

Xpages Type Ahead Drop Down font size

Is it possible to change the font size of the drop down list that appears in an Xpages type ahead control?

Have to display a type ahead on a 7 inch tablet screen and readability is quite hard for most people.

<xp:td><xp:inputText id="inputHost" styleClass="inputCovFieldYellow">
<xp:typeAhead mode="partial" minChars="1" valueList="#{javascript:applicationScope.employeeSelectionListNoNum;}" ignoreCase="true"
 id="typeAhead1"> </xp:typeAhead> </xp:inputText>
Solution

  • The xp:typeahead control wraps its content in an outer div with CSS classes dijitPopup and dijitComboBoxMenuPopup, an inner div with CSS classes dijitReset, dijitMenu and dijitComboBoxMenu, and then a div with CSS class dijitMenuItem for each item in the drop down list.

    So you can style each item using these classes. Here's a simple example of setting the font size to 20 px:

    .dijitComboBoxMenu .dijitMenuItem {
    font-size: 20px;
}