ComboBox - HTML Canvas - Change font size?

Engaged ,
Feb 17, 2022 Feb 17, 2022

Copy link to clipboard

Copied

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

Views

107

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Adobe Community Professional , Feb 17, 2022 Feb 17, 2022
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

Likes

Translate

Translate
Adobe Community Professional , Feb 18, 2022 Feb 18, 2022
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

Likes

Translate

Translate
Adobe Community Professional ,
Feb 17, 2022 Feb 17, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Feb 17, 2022 Feb 17, 2022

Copy link to clipboard

Copied

@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.

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Feb 18, 2022 Feb 18, 2022

Copy link to clipboard

Copied

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..

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 18, 2022 Feb 18, 2022

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines