Scrollable Toolbar

Hello folks,

first off, nice work on DHTMLX Touch.

Now my Question:

I need an example on how to make a toolbar with a lot of buttons scroll horizontal. I tried the “Scrollview” with Toolbar as “Content”, but that didn’t work out.

thanks for ur help

j4yc33

Found out myself :wink:

{ id: 'app', view: 'layout', rows: [ { view: 'layout', type: 'clear', rows: [ { view: 'scrollview', scroll: 'x', scrollSpeed: '3ms', content: { view: 'toolbar', type: 'SubBar', width:800, elements: [ { view: 'button', label: 'Button', popup: '', click: '', css: '', id: 'control_button_2', width: 100}, { view: 'button', label: 'Button', popup: '', click: '', css: '', id: 'control_button_3', width: 100}, { view: 'button', label: 'Button', popup: '', click: '', css: '', id: 'control_button_4', width: 100}, { view: 'button', label: 'Button', popup: '', click: '', css: '', id: 'control_button_5', width: 100}, { view: 'button', label: 'Button', popup: '', click: '', css: '', id: 'control_button_6'}, { view: 'button', label: 'Button', popup: '', click: '', css: '', id: 'control_button_7'}, { view: 'button', label: 'Button', popup: '', click: '', css: '', id: 'control_button_8'}, { view: 'button', label: 'Button', popup: '', click: '', css: '', id: 'control_button_9'}, { view: 'button', label: 'Button', popup: '', click: '', css: '', id: 'control_button_10'}, { view: 'button', label: 'Button', popup: '', click: '', css: '', id: 'control_button_11'}, { view: 'button', label: 'Button', popup: '', click: '', css: '', id: 'control_button_12'}, { view: 'button', label: 'Button', popup: '', click: '', css: '', id: 'control_button_13'} ] , id: 'content_2' }, id: 'scrollview_2' }, { view: 'view', id: 'temp_designer_view_3'}, { view: 'view', id: 'temp_designer_view_4'} ], id: 'layout_2' } ] }

One question though:

I have to give a fixed width, so the thing can be scrolled?

Is there another way? Like ‘auto’ or …

thx

It may be not very expected feature, but toolbar can have its own scroll, you can use

{ view: 'layout', type: 'clear', rows: [ { view: 'toolbar', scroll:"x", ...

as for case with scrollview - you need to provide width either for toolbar, either for all buttons in the toolbar - in that case toolbar will correctly resize to summ of button’s widths