Skip to main content
F
FlatChat
Inspiring
February 17, 2022
Answered

ComboBox - HTML Canvas - Change font size?

  • February 17, 2022
  • 1 reply
  • 1121 views

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

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    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

    1 reply

    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

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

       

       

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

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