API Reference
Namespaces
Classes
Events
Global
Externals

Namespace: cq-scroll

WebComponents. cq-scroll

Scroll web component <cq-scroll>.

The cq-scroll web component creates a scrollable container, which resizes itself when the screen is resized. If CIQ.UI.scrollbarStyling is initialized to a scrollbar implementation (such as PerfectScrollbar), the scrollbar implementation replaces the native scrollbar.

Keyboard control

When selected with tab key navigation and activated with Return/Enter, this component has the following internal controls:

  • Up/Down arrow — Move selection between internal cq-item elements.
  • Left/Right arrow — Select a control within a selected cq-item element, such as Remove and Edit buttons. Child elements must have the attribute keyboard-selectable-child set to "true" to be selectable with these keys.

Attributes

  • cq-no-claim — Do not apply any keystroke capturing
  • cq-no-maximize — Do not automatically maximize the height (but keep it showing on screen)
  • cq-no-resize — Do not apply any sizing logic

Use this.dataPortion to dynamically inject items into the list.

Since:
  • 6.1.0 Added cq-no-claim attribute.
  • 8.3.0 Enabled internal keyboard navigation and selection.

Example

<cq-lookup-results>
	<cq-lookup-filters cq-no-close>
		<cq-filter class="true">ALL</cq-filter>
		<cq-filter>STOCKS</cq-filter>
		<cq-filter>FX</cq-filter>
		<cq-filter>INDEXES</cq-filter>
		<cq-filter>FUNDS</cq-filter>
		<cq-filter>FUTURES</cq-filter>
	</cq-lookup-filters>
	<cq-scroll></cq-scroll>
</cq-lookup-results>

Methods


focused()

Returns the focused element or null. An item is focused if it has attribute cq-focused.

Returns:

The element or null

Type
HTMLElement

focusItem(item)

Overrides focusItem in CIQ.UI.BaseComponent.

Scrolls to an item and gives the item focus.

Parameters:
Name Type Description
item HTMLElement

The element to scroll to and focus. Must be a child of this component.

Since:
  • 8.3.0


scrollToElement(item)

Scrolls to an element.

Parameters:
Name Type Description
item HTMLElement

The element to scroll to. Must be a child of this component.