CODEWITHSUNDEEP
asp.netlistboxscroll
kjv
kjv

Reputation: 11337

Add horizontal scroll to asp.net listbox control

How can I add horizontal scroll capabilities to the asp.net listbox control?

Upvotes: 2

Views: 29182

Answers (4)

Padmanaban
Padmanaban

Reputation: 119

If you are doing it only for display purpose, You can do it in another way by using Textbox with mulitiline property. By appending the text with new line as such!

    List<Yourclass> result = null;
    result = Objname.getResult(Parameter1, Parameter2);
    foreach (Yourclass res in result)
    {
        txtBoxUser.Text += res.Fieldname1.ToString();
        txtBoxUser.Text += "\r\n" + res.Fieldname2.ToString();
        txtBoxUser.Text += "\n\n";
    }

Hence you will get the view of mulitline textbox with All your data arranged in good format as above code(New line and all). And also it will wrap your texts if it exceeded the width of your textbox. Also you no need to bother about the scrollsbars and here you will get only vertical scroll bar since all our results have been wrapped as per the behaviour of textbox.

Upvotes: 0

Vinicius
Vinicius

Reputation: 71

Example to add horizontal scroll:

<asp:ListBox ID="List" runat="server" Height="320px" Width="100%" style="overflow-x:auto;"SelectionMode="Multiple">
</asp:ListBox>

CSS3 overflow-x Property: http://www.w3schools.com/cssref/css3_pr_overflow-x.asp

Upvotes: 4

Espo
Espo

Reputation: 41949

If you really, really need it, one idea would be to create a custom ListBox class whose HTML looks like this: sets the width of the SELECT to that of your widest value's width (the max width of the scrollbar, for example). Now wrap that SELECT inside of a DIV of the 'constrained' size and let it scroll on overflow.

Here's a quick example starting down those lines, here's the type of HTML you want spit out by a control:

<div style="width:200px; height:100px; overflow:auto;">
<SELECT size="4">
<OPTION
Value="1">blahblahblahblahblahblahblahblahblahblah blahblah</OPTION>
<OPTION Value="2">2</OPTION>
<OPTION Value="3">3</OPTION>
<OPTION Value="4">4</OPTION>
</SELECT>
</div>

so in essence I'd recommend creating a composite custom control for this, which renders this HTML. They're pretty easy to make, Google on the terms 'composite control asp.net'.

The toughest part will be matching up the div dimensions to that of the select box, to make the scrollbars work/line up properly. That's why it's kinda tricky.

Source

Also, take a look at this: Automatically Adding/Hide Horizontal Scroll bar in the ListBox control

EDIT: Make sure you have enough height to include the scroll bar height or else you'll get the vertical scroll bar on both controls.

Upvotes: 1

Codeslayer
Codeslayer

Reputation: 3393

We can put this list box inside a DIV and set the style for DIV to overflow which will automatically show the scroll bar whenever necessary.

Your aspx page has the following DIV:

<div id='hello' style="Z-INDEX: 102; LEFT: 13px; OVERFLOW: 
            auto; WIDTH: 247px; POSITION: absolute; TOP: 62px; HEIGHT: 134px" >

Put your asp:listbox inside the DIV definition. In page_load function, you need to define the width and height of the list box properly, so that it won't overflow with the DIV.

private void Page_Load(object sender, System.EventArgs e)
{
    if (!IsPostBack)
    {

        int nItem = Convert.ToInt32(ListBox1.Items.Count * 17);
        ListBox1.Height = nItem; 

        ListBox1.Width = 800; 

    }
}

Code and solution available at http://www.codeproject.com/KB/custom-controls/HorizontalListBox.aspx

Upvotes: 1

Related Questions