Add horizontal scroll to asp.net listbox control - asp.net

Question

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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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.