Dropdown List states--Need Help please

Hi. I’m new to this forum. I have a question about dropdown list states. I have most states complete-but I do not know where to go into the file to change the selected word from being white to being a color font. Any help would be appreciated.

[details=Summary]This text will be hidden[/details]<a class=“attachment” DropDown_List_example.rp (90.7 KB)

Could you post your .rp file, please?

I attached the RP file to my previous help request…

@Heathcliff,

Here is an updated version with fixes on Page 1.
DropDown_List_example.rp (131.5 KB)

OK, so currently when you hover over your “Select One” button, the text turns white (and at 80% opacity) thus making it virtually disappear on the light gray button. Then, if you click, it shows droplist menu, and if you click one of those list words, it changes the text on the button to match, and that text is white, medium-bold, 100% opacity. You want this (maybe both styles) to be in another color (or same color, perhaps?) --Correct?

A few ways to fix this, depending on how you want it to look. First, for the hover effect, either remove the MouseOver Interaction Style, or change it to something more visible. See lower-left of this screenshot to find where to fix this in the Properties Panel:

Second, for the font on the updated button, go into State 1 of the Drop-Down-A-R dynamic panel (dp) by double-clicking into it. For each list item, select it, then double-click on the “set text on Drop-Down-A-R equal to [[LVAR1]]” to bring up the Case Editor dialog. See that the button text (confusingly named the same as the dp, which is not a good idea…) is set to “rich text” which lets you control the font properties. click “Edit text…” and see that it appears there is a blank input box. However, if you click in the box and drag around (or press Ctrl-A to select all text, you’ll discover there is content there. It is in a white font color (on a white background, so invisible), as shown in this screenshot, where I have changed it to a blue color:

Now, if you want to keep the same font properties as the original button text (usually a good idea) then change the “rich text” to “text on widget” and keep the default value of “This” (which does same thing as your [[LVAR1]] variable.)


There are a few other issues I happened to notice, and I’ll point them out here to demonstrate an easier and more reliable way to build custom buttons and interactions.
You have many widgets all named the same thing: “Drop-Down-A-R” and this makes your interaction code pretty confusing and prone to errors–accidentially pointing to the wrong widget. Better to assign unique names to all widgets involved in interactions. Make this a habit.

Your buttons are made from three different widgets when it could be one or two. On your Home page, you have to assign the same interaction code to the text and the caret, so if you change one you have to remember to change the other (and these are bound to get out of sync if you update it days or weeks from now, causing weird errors that are hard to track down.) It also creates a gap between the text and the caret, so if you click in the middle of the “Select One” button nothing happens. If you hover across the button left to right, the text disappears then reappears, then the caret disappears and reappears. You can also trigger a button click when the mouse is off to the left of the button… (Weird and wrong, no?) Better to design all as one widget (like a custom image or shape) or at least two widgets in a group, then assign one piece of interaction code for the group, so easier to manage code and no “dead zones” when hovering and clicking. I also created new “BasicButton2” and “BasicButton2 Selected” sytles, based off your existing style, to keep the button styles consistent and easier to set up.

Other things include creating Selection Groups for the buttons and list items, so only one of each set can be selected at once. This makes button and list selections just work better. A few other minor interaction improvements to make things look and work a little better–you can inspect the widgets, states and interactions to see what was done compared to the originals on Home page.

Good luck, and welcome to Axure and the forums!

Thank you for taking the time to really talk me through this. : )