Author Topic: How to warp 2 controls inside a div in pq-toolbar  (Read 2883 times)

VigneshVpn

  • Newbie
  • *
  • Posts: 33
    • View Profile
How to warp 2 controls inside a div in pq-toolbar
« on: December 03, 2018, 12:45:53 pm »
Hi,

I need to wrap 2 or more than  2 controls warp by a <div> element in pq-toolbar. so that i can apply css for that div only in toolbar section.

This is my toolbar.

 toolbar: {
            cls:'pq-toolbar-search',
            style: "float:right",
            items: [
                { type: 'button', label: 'Add', listeners: [{ 'click': addRow }], icon: 'ui-icon-plus' },
                { type: "<img src='assets/images/magnify-glass.svg' height='18px' class='search-icon' />" },
                { type: 'textbox', attr: 'placeholder="Enter Name to Search"', cls: "searchinput", listeners: [{ 'keyup': filterhandler }] }
            ]
        }

by adding the div element won't affecting my input's listener event.

Is there any way to do that?

Thanks in Advance,
Vignesh.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: How to warp 2 controls inside a div in pq-toolbar
« Reply #1 on: December 03, 2018, 02:37:54 pm »
You can apply styles via style property to every control.

Also a common class cls can be applied to many controls of they share common css.

https://paramquery.com/api#option-toolbar

VigneshVpn

  • Newbie
  • *
  • Posts: 33
    • View Profile
Re: How to warp 2 controls inside a div in pq-toolbar
« Reply #2 on: December 03, 2018, 03:01:43 pm »
Thats ok. I tried that method. but it did not helped me. is there any way to add a div for textbox and img tag?

like,
eg:

"<div>"
"<img />"
"<textbox />"
"</div>"
« Last Edit: December 03, 2018, 03:04:26 pm by VigneshVpn »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: How to warp 2 controls inside a div in pq-toolbar
« Reply #3 on: December 04, 2018, 12:54:40 pm »
use jquery