How to apply custom CSS on AutoComplete widgets in Thingworx, make Scrollable.

[Hrishabh.Sharma · Accepted solution]

To apply custom CSS and make the AutoComplete widgets scrollable in Thingworx, you can follow these steps:

Step 1: Create a Thingworx Mashup Create a new Mashup or open an existing one in Thingworx Composer.

Step 2: Add an AutoComplete Widget Drag and drop an AutoComplete widget onto your Mashup canvas.

Step 3: Apply Custom CSS Click on the AutoComplete widget.

Css Code:

.ui-menu .ui-menu-item {
    box-sizing: border-box;
    margin: 0;
    font-weight: 400;
    size: landscape;
    min-height: 1000; 
    padding: 7px 7px 7px 7px;
    cursor: pointer;
    height: 35px;
    color: #005495;
    font-size: Medium;
    text-align: left;
    background-color: white;
    border: solid;
    border-width: 0.2px;
    border-color: whitesmoke;
    width: 100%
}
.ui-menu :hover  {
    background: whitesmoke;
    font-weight: bold; 
    color: #005495; 
} 
.ui-menu {
  position: relative;
  width: auto;
  height: 390px;
  overflow: auto;  //you can adjust scroll here , if you want.
}
Save your changes.

Thanks,
Hrishabh Sharma