Customize widget title

[GregRieck]

Hello,

Is it possible to center the widget title? Then under the title add an image and the name of the selected feature? I am using this code to add the name of the feature to the title:

this.getPanel().titleLabelNode.innerHTML = NameOfFeature

But it shows up like this:

Widget Title :  NameOfFeature

With no image and not centered or on separate lines. I would like it to display more like this:

Widget Title

IMAGE  NameOfFeature

Thanks,

Greg

[sapnas]

code below should work:

this.getPanel().titleLabelNode.style.textAlign="center"

        this.getPanel().titleLabelNode.innerHTML =

"<p ><img src=\"widgets/widgetname/images/icon.png\"alt=\"image\" style=\"width:15px;height:15px;\"><font size=\"1\" >NameofFeature</font></p>";

[GregRieck]

Hello Sapna, thank you for responding to my question. I've tried the above code. I have altered it slightly and this is the results I get.

this.getPanel().titleLabelNode.style.textAlign = "center"; //added semicolon
this.getPanel().titleLabelNode.innerHTML =
"<p >Widget Title<br><img src=\"images/app-logo.png\"alt=\"image\" style=\"width:24;height:24;\"><font size=\"2\" >NameofFeature</font></p>";

Added the title of the widget and a new line indicator.

This should accept a variable instead of hard coded text. The feature name will change based on the selected feature.

As you can see the widget header needs to be increased in height to accomodate the extra title. Also, it does not appear to be centered. To me it should be more to the right to be correctly centered.

Thank You,

Greg

[sapnas · Accepted solution]

you have to increase the height of titlelabelnode and push down the container of the widget. The below code should cover it. regarding moving the title towards right add padding to align the text to further right which is again modifying the style of the elements

 this.getPanel().titleLabelNode.style.textAlign = "center";
        this.getPanel().titleLabelNode.style.height = "65px";
        this.getPanel().containerNode.style.top = "70px";

        var nameOfFeature = "test";
        var innerHTML = "<p>widget title</p><p style=\"height:300px;\"><img src=\"widgets/widgetname/images/icon.png\" alt=\"image\" style=\"width:15px;height:15px;\"><font size=\"1\" >" + nameOfFeature + "</font></p>";

        this.getPanel().titleLabelNode.innerHTML = innerHTML;