How should create Dropdown?
Application Type
Traditional Web

I want to get that style .How should I write?Please advise.

Screenshot9.png

Hi, Please refer to the attached OML for the logic

LoginMenu.oml

Thanks Krishnnambal Sundaram, I will try this.


Hello Yadanar, 

I have try to match your requirement just check with color once.


Attached OML as well as Link for you.


https://akshayproject.outsystemscloud.com/CSS/Screen1?_ts=637613339016561857


Thanks and Regards,

Akshay Deshpande

CSS.oml

hello Akshay Deshpande,

Thanks for your answer ,It is still needed that I want to Drop down container when I click the icon. Please ,Can you test for me if not difficult for you?

Yes , I will.

If I got right ,then please check the previous URL again to look changes and attached OML for reference

CSS.oml

Hi Yadanar Phyo

 You can use popover widget or Balloon widget and custom styles if needed.


Regards,

Harika.


Hi Yadanar,

There are open source UI components available on forge. You can search and use that.

Alternatively you want to achieve any custom layout or control in OuTsystems , you can easily achieve if you are having good knowledge of CSS.

Also you know how and where to add external CSS and JS.

Dileep

Hi Yadanar, Go to Common->UserInfo block. Drag and Drop the Balloon widget after the Username. 

Output: 

Hello Yadanar, 

I have try to match your requirement just check with color once.


Attached OML as well as Link for you.


https://akshayproject.outsystemscloud.com/CSS/Screen1?_ts=637613339016561857


Thanks and Regards,

Akshay Deshpande

CSS.oml

hello Akshay Deshpande,

Thanks for your answer ,It is still needed that I want to Drop down container when I click the icon. Please ,Can you test for me if not difficult for you?

Yes , I will.

If I got right ,then please check the previous URL again to look changes and attached OML for reference

CSS.oml

Hi, Please refer to the attached OML for the logic

LoginMenu.oml

Thanks Krishnnambal Sundaram, I will try this.


Can I see the styles of that website? where is that popover/balloon ?

Kind regards,

Márcio

https://marcio-carvalho4.outsystemscloud.com/Balloon/Entry1.aspx?_ts=637613332106839987

I have tried to replicate what you want. Let me know if is this what you want :)


This is the CSS that is on the theme

.tippy-tooltip.light-theme{
    border-radius: 10px;
}
.only-balloon .tippy-popper{
    min-width:300px;
}

.tippy-content a{
  font-weight: var(--font-bold);
  color:#000;
  padding:10px;
}

.balloon-content{
    padding: var(--space-none);
}

.balloon-content div{
        padding: 10px;
}

.balloon-content div:hover{
    background-color: #e9f1ff;
}

.balloon-footer {
    padding: var(--space-s);
    display: block!important;
    border: 0
}
Balloon.oml

Thanks Marcio Carvalho ,It is not balloon.I want this with container.






Thanks for Kindness,Marcio Carvalho.I want to Know this code too.

This is a JSON code to remove the arrow of the balloon's tooltip.

If you hover the input AdvancedFormat you see there that example where you can remove the arrow using that format :)


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.