Skip to Content (Press Enter)
UserImage.jpg
Junaid Jalal
734Views
7Comments
Solved
How to use icon-dropdown widgets
Question
OutSystems UI Patterns


Hello,

I'm trying to work with one of the dropdown widgets that will let me navigate/perform a screen action but none of my dropdown widgets(inline dropdown, icon dropdown, or button dropdown) function correctly. I mainly need a icon dropdown like the one below:



Here's a screenshots from all my widget trials: 1st is the icon, 2nd is a inline and 3rd is a test for button dropdown widgets.



Thanks in advance for the help!


Junaid

0
0
20 Apr 2020
Copy Link
2020-03-01 17-52-33
Nikhil Gaur
Solution

Hi Junaid,

Have you tried DropDownMenu web block from RichWidgets? This will allow you to implement similar drop menu.

There is another forge component built using this widget. You can try that as well, you have to do some style modification ofcourse.

https://www.outsystems.com/forge/component-overview/4123/dynamic-drop-down-menu-sample

See solution in context
0
0
21 Apr 2020
Copy Link
UserImage.jpg
Junaid Jalal

Nikhil Gaur wrote:

Hi Junaid,

Have you tried DropDownMenu web block from RichWidgets? This will allow you to implement similar drop menu.

There is another forge component built using this widget. You can try that as well, you have to do some style modification ofcourse.

https://www.outsystems.com/forge/component-overview/4123/dynamic-drop-down-menu-sample


Hey Nikhil,


Just updated my OutsystemsUI Web, and started using the Dropdown widget with icon in the prompt placeholder, and this works.


Thanks everyone the help!


Junaid

0
0
21 Apr 2020
Copy Link
2026-02-05 15-36-36
Lenon Manhães Villeth
Champion

Hi, friend!

I used the inline dropdown some days ago. We needed to remove that little arrow, exactly as you need (image).

To achieve this, apply the following CSS to you theme:

.fa:after {
    content: "N/A";      
}

This class controls that little arrow in inline dropdown and will remove it. If you use another one, the class could be different.


Best regards

0
0
21 Apr 2020
Copy Link
UserImage.jpg
Junaid Jalal

Lenon Manhães wrote:

Hi, friend!

I used the inline dropdown some days ago. We needed to remove that little arrow, exactly as you need (image).

To achieve this, apply the following CSS to you theme:

.fa:after {
    content: "N/A";      
}

This class controls that little arrow in inline dropdown and will remove it. If you use another one, the class could be different.


Best regards

Hi Lenon,


I tried this but no luck. Is it possible you could put this in a small oml and attach here? 


Thanks,

Junaid


0
0
21 Apr 2020
Copy Link
2026-02-05 15-36-36
Lenon Manhães Villeth
Champion

I have a better idea. Send the browser link to your application and we can see the exactly class to change.

However, I will send the .oml here. 

0
0
21 Apr 2020
Copy Link
UserImage.jpg
Junaid Jalal

Lenon Manhães wrote:

I have a better idea. Send the browser link to your application and we can see the exactly class to change.

However, I will send the .oml here. 

I think the issue here is my application is a traditional web app, and not using one of SilkUI's template. When I use the same widget in a SilkUI's template, it works fine. Is there a way to make these widgets work without using SilkUI template?


Also, I'm on a enterprise cloud for a client, so I may not be able to provide the link :( 


0
0
21 Apr 2020
Copy Link
2026-02-05 15-36-36
Lenon Manhães Villeth
Champion

Well, probably should work. As I said, the best way is inspecting the element through the browser F12 function and see exactly which classes are in use by the widget.

0
0
21 Apr 2020
Copy Link
2020-03-01 17-52-33
Nikhil Gaur
Solution

Hi Junaid,

Have you tried DropDownMenu web block from RichWidgets? This will allow you to implement similar drop menu.

There is another forge component built using this widget. You can try that as well, you have to do some style modification ofcourse.

https://www.outsystems.com/forge/component-overview/4123/dynamic-drop-down-menu-sample

0
0
21 Apr 2020
Copy Link
UserImage.jpg
Junaid Jalal

Nikhil Gaur wrote:

Hi Junaid,

Have you tried DropDownMenu web block from RichWidgets? This will allow you to implement similar drop menu.

There is another forge component built using this widget. You can try that as well, you have to do some style modification ofcourse.

https://www.outsystems.com/forge/component-overview/4123/dynamic-drop-down-menu-sample


Hey Nikhil,


Just updated my OutsystemsUI Web, and started using the Dropdown widget with icon in the prompt placeholder, and this works.


Thanks everyone the help!


Junaid

0
0
21 Apr 2020
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.