Author Topic: Custom HTML in toolbar  (Read 3993 times)

queensgambit9

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
Custom HTML in toolbar
« 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.

dagarwal

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 19
    • View Profile
Re: Custom HTML in toolbar
« Reply #1 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';
}
]
}

queensgambit9

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
Re: Custom HTML in toolbar
« Reply #2 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.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6307
    • View Profile
Re: Custom HTML in toolbar
« Reply #3 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>'
},
                        ......
« Last Edit: December 09, 2016, 11:19:09 am by paramquery »