ComboBox - HTML Canvas - Change font size?

[FlatChat]

How do I change the font size of a ComboBox in an HTML Canvas/JavaScript movie?

[JoãoCésar · Accepted solution]

Hi.

This should do it:

var yourComboID = "combo"; // select the component on the stage and set it in the Properties panel
var fontSize = "2rem";

stage.on("drawend", function()
{
	var combo = document.getElementById(yourComboID);
	combo.style.fontSize = fontSize;
}, this, true);

I hope it helps.

Regards,

JC

[FlatChat]

@JoãoCésar 

Thanks for that!

Where would I find other parameters for styling the ComboBox?

Obviously the fontSize is one:

combo.style.fontSize

 But I assume there would be others?

For example, border, width etc.  For my application the text options will be about 5 characters in length, so I want the ComboBox to be now wider than that.  It will be a small popup, when clicking on an icon and selecting a choice.

[FlatChat]

OK, I have attached a CCS file to the movie through the CSS component.

#LensMagCombo{
	font-size: 0.55vw;
}

What are the styleable parameters I can add for the ComboBox.  I have looked and can't find a list anywhere..

[JoãoCésar · Accepted solution]

Awesome!

Glad it worked.

Components in the HTML5 canvas documents are basically wrappers for jQuery UI components.

So you can basically understand them as regular HTML elements. This means that you can use all applicable CSS properties.

To find out what the properties are, you can search for some online references like this or you can log the properties to the console like this:

console.log(combo.style);

Regards,

JC