Removing border from droplist

#1

Hi is there any way to remove the border from the droplist ? when i remove it in preview i always have the border even if i removed it.

Picture 1 - Program
Picture 2 - Prototype preview

obr%C3%A1zek_2022-12-09_112628970
obrázek_2022-12-09_112628970.png1044×106 383 Bytes

Droplist%20Preview
Droplist Preview.png1707Ă—225 670 Bytes

#2

The Droplist widget is an “HTML form” widget, meaning the browser controls how it is visually rendered, and your results may vary by browser and operating system. Essentially, the HTML code that Axure generates makes a “request” to style the droplist (and other “Forms” widgets) but some browsers may ignore this and kind of force visual consistency for these kinds of user input widgets. For me, using Axure RP 9.0.0.3740 on Windows 10 and the latest Google Chrome browser, I can control the visibility of the border, and even each border line individually (top, bottom, left, right) with good results.

Here are several methods I tried, and each worked to remove the border, in my environment–or at least perceptually hide it. All utilize the “BORDER” section in the STYLE pane when the droplist widget is selected in the editor.

  • Set the Thickness to 0
  • Set the Color to match the background (white by default)
  • Set the Color to “none” (in the color dialog click the “red slash” button; or enter “0” in the opacity field.)
  • Set the Visibility to turn off all border lines (click Visibility, then click each of the four borders to turn them off)

Hopefully one of these easy fixes works in your case. Note this does not affect the appearance of the popup (dropped) list, as it still has a browser-defined 1px black border and dropshadow. More on this later.

A different approach is to create a dynamic panel from your droplist widget, then hide the borders by placing them outside of the visible viewport of the dynamic panel. This should be more robust and work on any platform. Here are the steps:

  1. Right-click the droplist and choose “Create Dynamic Panel”
  2. In the STYLE pane, uncheck the “Fit to Content” checkbox
  3. Decrease the width of the dynamic panel (dp) by 2 px and decrease the height by 2 px.
  4. Double-click the dp to open it, then move the droplist to the left by 1 px and up by 1 px (so its location is now (-1, -1)
  5. Preview your prototype to see the result.

For full visual styling of a droplist, you’ll need to create the whole thing by hand. There are plenty of examples of this in the forums here if you search for “custom droplist” or “repeater droplist” (you don’t have to use a repeater for this, but it is pretty efficient for this purpose.) This will allow you to create any kind of border or none, as well as the popup list, how hovered and selected items appear, multi-selection, etc. Yes, it is more work, but if your prototype demands this kind of visual styling that is pretty much what you need to do in Axure. I’d be happy to help with any specific details if you try this and run into further issues.