ASP.NET MVC ListBox - Multiple Rows and Columns

Two columns:
  • Afghanistan1
  • Albania2
  • Algeria3
  • American Samoa4
  • Andorra5
  • Angola6
  • Anguilla7
  • Antigua and Barbuda8
  • Argentina9
  • Armenia10
  • Aruba11
  • Australia12
  • Austria13
  • Azerbaijan14
  • Bahamas15
  • Bahrain16
  • Bangladesh17
  • Barbados18
  • Belarus19
  • Belgium20
  • Belize21
  • Benin22
  • Bermuda23
  • Bhutan24
  • Bolivia25
  • Bosnia and Herzegovina26
  • Botswana27
  • Brazil28
  • British Indian Ocean Territory29
  • British Virgin Islands30
  • Brunei31
  • Bulgaria32
  • Burkina Faso33
  • Burma34
  • Burundi35
  • Cambodia36
  • Cameroon37
  • Canada38
  • Cape Verde39
  • Cayman Islands40


Three columns:
  • Afghanistan1
  • Albania2
  • Algeria3
  • American Samoa4
  • Andorra5
  • Angola6
  • Anguilla7
  • Antigua and Barbuda8
  • Argentina9
  • Armenia10
  • Aruba11
  • Australia12
  • Austria13
  • Azerbaijan14
  • Bahamas15
  • Bahrain16
  • Bangladesh17
  • Barbados18
  • Belarus19
  • Belgium20
  • Belize21
  • Benin22
  • Bermuda23
  • Bhutan24
  • Bolivia25
  • Bosnia and Herzegovina26
  • Botswana27
  • Brazil28
  • British Indian Ocean Territory29
  • British Virgin Islands30
  • Brunei31
  • Bulgaria32
  • Burkina Faso33
  • Burma34
  • Burundi35
  • Cambodia36
  • Cameroon37
  • Canada38
  • Cape Verde39
  • Cayman Islands40


Four columns:
  • Afghanistan1
  • Albania2
  • Algeria3
  • American Samoa4
  • Andorra5
  • Angola6
  • Anguilla7
  • Antigua and Barbuda8
  • Argentina9
  • Armenia10
  • Aruba11
  • Australia12
  • Austria13
  • Azerbaijan14
  • Bahamas15
  • Bahrain16
  • Bangladesh17
  • Barbados18
  • Belarus19
  • Belgium20
  • Belize21
  • Benin22
  • Bermuda23
  • Bhutan24
  • Bolivia25
  • Bosnia and Herzegovina26
  • Botswana27
  • Brazil28
  • British Indian Ocean Territory29
  • British Virgin Islands30
  • Brunei31
  • Bulgaria32
  • Burkina Faso33
  • Burma34
  • Burundi35
  • Cambodia36
  • Cameroon37
  • Canada38
  • Cape Verde39
  • Cayman Islands40
The items of the ListBox can be arranged on multiple columns.
This can easily be achieved using a small CSS trick:

.ob_iLboICBC li { float: left; width: 125px; }

The ListBox will arrange its items on as many columns as possible,
taking the width of the drop down menu and the width of the individual items into account.

When arranging the items in multiple columns, your end users will still benefit from the other features of the ListBox: autocomplete, load on demand, virtual scrolling, filtering, etc.
View - Aspx
 
    <% Html.Obout(new ListBox("ListBox1") 
    {                
        Width = 325
    }); %> 

    <% Html.Obout(new ListBox("ListBox2") 
    {                
        Width = 475
    }); %> 

    <% Html.Obout(new ListBox("ListBox3") 
    {                
        Width = 650
    }); %> 
   
    
View - Razor
 
    @Html.Obout(new ListBox("ListBox1") 
    {                
        Width = 325
    })

    @Html.Obout(new ListBox("ListBox2") 
    {                
        Width = 475
    })

    @Html.Obout(new ListBox("ListBox3") 
    {                
        Width = 650
    })
   
    
CSS
 
    .ob_iLboICBC li
    {
        float: left;
        width: 125px;
    }
        
    /* For IE6 */
    * HTML .ob_iLboICBC li
    {
        -width: 115px;
    }
        
    * HTML .ob_iLboICBC li b
    {
        width: 115px;
        overflow: hidden;
    }