Combo Box

  

Hello Everyone,

  I am new to outsystems, can anyone help me about how to add a scroll bar in combo box?

Hi Pravi,

Why do you need a scroll bar? It appears automatically if the browser thinks there's two many items in the list.

That said, see e.g. here for some CSS that might help you out.

Kilian Hekhuis wrote:

Hi Pravi,

Why do you need a scroll bar? It appears automatically if the browser thinks there's two many items in the list.

That said, see e.g. here for some CSS that might help you out.


Hey Kilian Hekhuis,

      Just check the screenshot which is have attached, to get to know about my problem. In the "Add New Comment " popup, I have a combo box in which their are some elements which are going out of the popup, that is the reason why I want a scroll bar in my combo box.


 

Hi Pravi,

This behaviour would be easy to achieve if the platform allowed you to choose how many elements to display on the dropdown of a combo box. Since it doesn't, it seems you will have to resort to DOM manipulation through dynamic JavaScript in an Expression, for instance... with something similar to:

"document.getElementById('" + myTitleComboSelect.Id + "').size = '8';"

Hi Pravi,

Thanks for the insightful image. I googled some more, and what you want seems not possible. It's browser specific (the number of items shown), and can't be changed (see e.g. here).

Jorge,

What you propose can be easily achieved by setting an Extended Property of "size", but the problem is that this converts the select to a selection list instead of a dropdown.

Hum... you're absolutely right Kilian... it's the simple things you let slip out of your mind at the worst moments... Extended Properties   

And... that's what you get for not trying things out, and just reading a bunch of stuff that seems to answer your prayers.

This article has a... workaround, that sort of does what Pravi wants, but it's basically using JavaScript events to switch between a dropdown and a listbox on focus change...

But I have to ask Pravi, why is it an issue the dropdown goes over the Popup border?

Jorge Martins wrote:

Hum... you're absolutely right Kilian... it's the simple things you let slip out of your mind at the worst moments... Extended Properties   

And... that's what you get for not trying things out, and just reading a bunch of stuff that seems to answer your prayers.

This article has a... workaround, that sort of does what Pravi wants, but it's basically using JavaScript events to switch between a dropdown and a listbox on focus change...

But I have to ask Pravi, why is it an issue the dropdown goes over the Popup border?

Hey Jorge Martins,

   The list record binded with the combo box is dynamically scale-able as per the working of my web application. So when the elements in list records are increased, the dropdown goes out of the popup border, which is not customer favorable. If their is a possible solution to this problem, kindly let me know.

Thanks


Solution

Like Kilian mentioned, you don't have control over the number of entries the dropdown displays before showing the scrollbar (each browser has a different hard-coded value). You can use the approach on the link I posted as a passable workaround, but not really the same thing. You can always look for a more customisable component on the Forge that might do what you need, but I don't if there's any there. You may also look for JavaScript/jQuery components that implement the desired behaviour

Solution