Formatting Droplist widget

Axure RP 8
1

Hello

Is there a option to make the droplist without the border. Do not have hide border option like text box. How do we achieve if I need to place a drop down like this in the image.


Thanks.

2

Hi newbiejoe,
just add the below code into your onpageload event. Refer the attached screenshot and rp file.
javascript: $(‘[data-label=“dropdown_test”]’).css(‘border’, ‘none’); throw new Error();

Capture.JPG899×655 69.8 KB


I hope it will be useful for you.
Thanks,
Vikram
dropdown_without_border.rp (53 KB)

1 Like
3

Hello, This is an older question and the javascript support may not be in v7, but I couldn’t get this to work. I published to Preview and to Axshare with the same results for my file and the attached file "dropdown_without-border.rp. Please advise. Thank you.

4

Hi John,
Please try to replace the code with existing.
javascript: $(’[data-label=“dropdown_test”] select’).css(‘border’, ‘none’); throw new Error();

Thanks,
Vikram

5

Thanks Vikram. Very helpful. Just want to add that I was able to make it apply to all droplists on the page, not depending on a specific label, with this variation:

javascript: $(’[class=“ax_default droplist”] select’).css(‘border’, ‘none’); throw new Error();

6

The class names have changed since then. The current correct answer for kilingl the annoying borders is:
javascript: $(‘select[style*="-webkit-appearance: menulist-button;"]’).css(“border”, “none”);
NB! No need to throw the error!

7

Is this working for anyone? I used it and even tried other css properties but when I look at the component while inspecting the code, I don’t see the css injected.

8

None of the above solutions worked for me in Axure 8.