Highlighted

how to design combobox

New Here ,
Jul 29, 2019

Copy link to clipboard

Copied

Helo

as the title says -

im looking for a way to design the plain combobox in my Adobe animate cc 2018.

so far i managed to give it colors and some shape using CSS, but my issue starts when i try to design the items.

i have no clue how to change their shape - from square shape into rounded corners or lets say circle.

please help me out here

Adobe Community Professional
Correct answer by resdesign | Adobe Community Professional

After searching everywhere, I could not find a way to access to parts of the components. I would assume there are classes defined that could be styled. But you are right, I cannot even find the way to center the text in the items.

Apparently centering text in the option/item section seems to be a no-no. Not sure why but everything that I saw was that it is not an option )(no -pun intented) for combox boxes n CSS, JQuery, winforms, etc...

Maybe someone know here. I will keep looking and hopefully get there.

TOPICS
Discussions

Views

454

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

how to design combobox

New Here ,
Jul 29, 2019

Copy link to clipboard

Copied

Helo

as the title says -

im looking for a way to design the plain combobox in my Adobe animate cc 2018.

so far i managed to give it colors and some shape using CSS, but my issue starts when i try to design the items.

i have no clue how to change their shape - from square shape into rounded corners or lets say circle.

please help me out here

Adobe Community Professional
Correct answer by resdesign | Adobe Community Professional

After searching everywhere, I could not find a way to access to parts of the components. I would assume there are classes defined that could be styled. But you are right, I cannot even find the way to center the text in the items.

Apparently centering text in the option/item section seems to be a no-no. Not sure why but everything that I saw was that it is not an option )(no -pun intented) for combox boxes n CSS, JQuery, winforms, etc...

Maybe someone know here. I will keep looking and hopefully get there.

TOPICS
Discussions

Views

455

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
Jul 29, 2019 0
Adobe Community Professional ,
Jul 29, 2019

Copy link to clipboard

Copied

Wait, do you mean style a combo box? Are you just using the HTML5 Canvas combo box component?

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
Reply
Loading...
Jul 29, 2019 0
New Here ,
Jul 30, 2019

Copy link to clipboard

Copied

im using HTML5 canvas.

i added css page to it to design

#comboBox{

font-size:50px;

border-radius: 25px;

background: red;

text-align: center;  - doesnt work

}

#comboBox option{

text-align-last: center; - doesnt work

border-radius: 25px; - doesnt work

background:yellow;

}

i know html and css, but most of them wont work

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
Reply
Loading...
Jul 30, 2019 0
Adobe Community Professional ,
Jul 29, 2019

Copy link to clipboard

Copied

YOu can either design your own or use a component and style it. I depends what you want and whether you are using AS3 or HTML5.

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
Reply
Loading...
Jul 29, 2019 0
New Here ,
Jul 30, 2019

Copy link to clipboard

Copied

i use html 5 canvas and i know its possible somehow to design it, but the question is how as half of my css commands wont work

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
Reply
Loading...
Jul 30, 2019 0
Adobe Community Professional ,
Jul 30, 2019

Copy link to clipboard

Copied

Here is an example I made using movieclips

combobox MC.zip - Box

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
Reply
Loading...
Jul 30, 2019 0
New Here ,
Jul 30, 2019

Copy link to clipboard

Copied

this one looks amazing!

but im trying to do CSS design with components like this:

and for some reason i cant put my finger on how to change the shape of the yellow colored options.

the text align doesnt work either... they stay always on the left side

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
Reply
Loading...
Jul 30, 2019 0
Adobe Community Professional ,
Jul 31, 2019

Copy link to clipboard

Copied

Besides the stylesheet you can add code in the first frame:

combobox-component.zip - Box

Example:

setTimeout(function () {

    // combobox

    $(".ui-combobox").css({

        "color": "teal",

        "font-size": 24,

        "background-color": "pink",

        "text-align": "center",

        "height": 40,

        "widht":160

    });

     $(".ui-combobox option").css({

        "background-color": "red",

        "font-size": 20,

        "color" : "white"

    });


}, 10);

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
Reply
Loading...
Jul 31, 2019 0
Adobe Community Professional ,
Jul 31, 2019

Copy link to clipboard

Copied

After searching everywhere, I could not find a way to access to parts of the components. I would assume there are classes defined that could be styled. But you are right, I cannot even find the way to center the text in the items.

Apparently centering text in the option/item section seems to be a no-no. Not sure why but everything that I saw was that it is not an option )(no -pun intented) for combox boxes n CSS, JQuery, winforms, etc...

Maybe someone know here. I will keep looking and hopefully get there.

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
Reply
Loading...
Jul 31, 2019 2
Adobe Community Professional ,
Aug 01, 2019

Copy link to clipboard

Copied

Have you looked at this tutorial on how to use HTML5 components?

Using HTML5 components |

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
Reply
Loading...
Aug 01, 2019 1