Toolbar input stretching to all available space

Suite and Optimus
#1

Greets everyone, brand BRAND n00b here. So new, in fact, I am not even sure how/where to ask this question or feed myself with the proper searches.

I am implementing my very first control, a toolbar (I have the Ultimate Combo). I have several controls on the left and want an input to span the remains of the space to the right - except I need to have a drop-down at the very right. I’ve tried using percentages and such, it seems that the “data” object trims that off and uses the value. Here comes my dataset, TIA!

<div class="generic-section px-4 py-4 ndMain">
	<div id="nd-toolbar-target"></div>
	<div class="ndContainer"></div>
<script>

	let toolbar = new dhx.Toolbar("nd-toolbar-target", {
		css: "dhx_widget--bordered",
		data: [
		    { "id": "nd-home", "icon": "fa fa-home" },
		    { "id": "nd-favorites", "icon": "fa fa-heart" },
		    { "id": "nd-search", "icon": "fa fa-search" },
		    { "id": "nd-back", "icon": "fa fa-arrow-left" },
		    { "id": "nd-up", "icon": "fa fa-arrow-up" },
		    { "id": "nd-forward", "icon": "fa fa-arrow-right" },
		    { "type": "separator" },
			{ id: "nd-nrlBox", type: "input", label: "nrlx://", width: "100%" },
		    { id: "nd-history", type: "selectButton", value: "", items: [ 
		    	{ value: "someNRL" },
	            { value: "anotherNRL" },
	            { value: "thisNRL" },
	            { value: "thatNRL" }
		    ]}
		]
	});
</script>
</div>
#2

This is prob not the most ideal solution but it is an option. You just need to update the amount that you deduct from the screen width if you add more components to your tool bar.

You will also have to take into consideration the resize event when/if you change your browsers size.
I have not added code for this.

see comments in the snippet.

DHTMLX Code Snippet

Ultimately you could do a single layout cell and attach the toolbar to that and then use

dhxWindow.getSize(); // → {width: 960, height: 469}

to get the window size and adjust it that way also.

#3

Cheers Elroco … I’d thought of that and was hoping for a more elegant solution, but it might be the only way. Thanks for posting!