Help Center

Menu

Horizontal (auto-completion)

Description

This parameter displays tiers in columns when set "true", else as a list one below the other.

Default value

horizontal: false

Examples

horizontal: true

Styling

To modify dropdown menu or columns look CSS styling need to be applied. Default values are set in css/autocompletion.css.

To change the "width" of dropdown menu set CSS min-width property for class "tt-horizontal".

.tt-horizontal {min-width: 700px;}

To change the width of columns set CSS "width" property for class "tt-dataset".

.tt-horizontal .tt-dataset {width: 33.3%;}

To set different width of columns (depends on dataset name) set CSS "width" property for class "tt-dataset-". Note: Adding "!important" declaration is crucial to overwrite default settings.

.tt-horizontal .tt-dataset-organic {width: 30% !important;}
.tt-horizontal .tt-dataset-courses {width: 70% !important;}
datasets: {
   organic: { ... },
   courses: { ... }
}

See also