How to put a scrollbar in list box?

Question

I want to how to create a listbox with a vertical scrollbar in it..

Answer 1

Are you looking for <select multiple="multiple">?

<select multiple="multiple" size="4">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

See w3schools on select.

Answer 2

You make sure there are more items in the list than the size attribute and use multiple if you want to be able to select several options at once:

<select size="2" multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Answer 3

If you mean such a list, <ul/>, with a listbox, consider the following code:

HTML:
<ul id="listbox">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
    <li>et cetera</li>
</ul>

CSS:
#listbox {
    height: 150px;
    overflow-y: scroll;
}

Answer 4

I see that you're using JSF. You don't necessarily need plain vanilla HTML here. In real JSF you can render a <select multiple="multiple"> element with the <h:selectManyListbox> component. Here's a basic example:

<h:form>
    <h:selectManyListbox value="#{bean.selectedItems}">
        <f:selectItems value="#{bean.selectItems" />
    </h:selectManyListbox>
    <h:commandButton value="submit" action="#{bean.submit}" />
</h:form>

which is backed like as follows:

@ManagedBean
public class Bean {
    private List<String> selectedItems = new ArrayList<String>();
    private List<SelectItem> selectItems = new ArrayList<SelectItem>();
    // Add/generate getters and setters.

    public Bean() {
        // Prepopulate selectable items for display.
        this.selectItems.add(new SelectItem("value1", "label1"));
        this.selectItems.add(new SelectItem("value2", "label2"));
        this.selectItems.add(new SelectItem("value3", "label3"));

        // If necessary you can also preselect items here.
        this.selectedItems.add("value2"); // Will preselect "value2".
    }

    public String submit() {
        // Do your thing with selected items.
        System.out.println("Selected items: " + this.selectedItems);
        return "navigationCaseOutcome";
    }
}

You can control the layout using CSS through the size, styleClass and/or style attributes of the component, exactly the way as you would do in plain vanilla HTML.