ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: queensgambit9 on December 06, 2016, 08:47:27 pm

Title: Custom HTML in toolbar
Post by: queensgambit9 on December 06, 2016, 08:47:27 pm

I would like to add some labels (custom HTML) above some select boxes in the toolbar.
What is the best approch for this?

Thanks.

Title: Re: Custom HTML in toolbar
Post by: dagarwal on December 07, 2016, 08:19:47 am

I do it this way:

Code: [Select]

toolbar: {
 items: [
{
 type : '<div>This is my custom html</div';
}
]
}

Title: Re: Custom HTML in toolbar
Post by: queensgambit9 on December 08, 2016, 01:34:21 pm

Thanks. However I tried that but in browser its rendered with a line break before and after. Rendered code (no line break):

Code: [Select]

...<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button"><span class="ui-button-icon-primary ui-icon ui-icon-unlocked"></span><span class="ui-button-text">TEST BUTTON</span></button>

<div>This is my custom html</div>...
What I would like to have is the div positioned above the button (like a label) or the button written inside the div...is that possible?

Thanks.

Title: Re: Custom HTML in toolbar
Post by: paramvir on December 09, 2016, 11:15:44 am

Though not an ideal solution, css positioning could be used to make labels appear on top of items:

First add style:'padding-top:25px;position:relative;' to the toolbar.

then use position:absolute for the labels.

Code: [Select]

            toolbar: {
style:'padding-top:25px;position:relative;',
                items: [
{
        type:'<span style="position:absolute;top:0;left:0;">Label</span>'
},
                        ......