Skip to main content
FlatChat
Inspiring
February 17, 2022
Answered

ComboBox - HTML Canvas - Change font size?

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

    This topic is closed to new replies. Start a new post to keep the conversation going.
    JoãoCésar17023019
    JoãoCésar17023019Correct answer
    Community Expert
    February 18, 2022

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


    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

    View reply

    4 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    February 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

    Translate
      FlatChatAuthor
      Inspiring
      February 18, 2022

      @JoãoCésar17023019 

       

      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.

       

       

      Translate
      FlatChatAuthor
      Inspiring
      February 18, 2022

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

      Translate
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices