Solved

How do I add horisontal scrollbars in c#

Posted on 2006-06-27
5
358 Views
Last Modified: 2008-01-09
Hi.

I´m having problems adding horisontal scrollbar in my 'asp:listbox'.

And by the way, my vertical scrollbar doesn´t show up, I thought
they showed automaticly.
0
Comment
Question by:jenniferw
  • 3
  • 2
5 Comments
 
LVL 11

Expert Comment

by:five22bags
ID: 16992052
The vertical one should show up if you set TextMode="MultiLine" within your <asp:TextBox>.

I have never seen or heard of an asp:textbox with a horizontal scrollbar.
0
 

Author Comment

by:jenniferw
ID: 16992103
Well you see, my listbox width is smaller than the filenames in showed the listbox, and I
want the user to be able reading this filenames, thats why the horisontal scrollbar is so
interesting. I don´t want to change the size of the listbox width, and thereby destroy my
layout...
0
 
LVL 11

Accepted Solution

by:
five22bags earned 500 total points
ID: 16992966
Wow, I sincerely apologize for not reading more carefully.... LISTBOX not TEXTBOX.

Horizontal scrollbars are actually a limitation of HTML, rather than ASP.NET. To trick the HTML, you will have to put your listbox inside of a DIV element. You can copy and paste the following code to see what I mean:

<div id='hello' style="Z-INDEX: 102; LEFT: 13px; OVERFLOW: auto; WIDTH: 247px; POSITION: absolute; TOP: 62px; HEIGHT: 134px" >
                        <asp:ListBox id="ListBox1" runat="server" Width="400px" Height="134px" BorderStyle="None">
                              <asp:ListItem Value="This is a very very very very very very very very long product">This is a very very very very very very very very long product</asp:ListItem>
                              <asp:ListItem Value="Computer">Computer</asp:ListItem>
                              <asp:ListItem Value="Monitor">Monitor</asp:ListItem>
                              <asp:ListItem Value="Keyboard">Keyboard</asp:ListItem>
                              <asp:ListItem Value="oops">oops</asp:ListItem>
                              <asp:ListItem Value="oops">oops</asp:ListItem>
                              <asp:ListItem Value="oops">oops</asp:ListItem>
                              <asp:ListItem Value="oops55">oops55</asp:ListItem>
                              <asp:ListItem Value="oop6">oop6</asp:ListItem>
                        </asp:ListBox>
                  </div>



Essentially, the scroll bars created here are actually the DIV scroll bars, and not the Listbox scrollbars. If the listbox is not tall enough (height), you will see TWO vertical scroll bars if you were to pan all the way over with the horizontal one. In the example I have given you, it does just that. To correct that, to prevent two vertical scroll bars, you have to set the height of the LISTBOX element (not the DIV element) to be tall enough to see all of the items. You also may want to consider re-sizing the LISTBOX on Page_Load to set the height to exactly the amount of items in the LISTBOX.

0
 

Author Comment

by:jenniferw
ID: 16993018
Thank´s for helping me out on this problem!
0
 
LVL 11

Expert Comment

by:five22bags
ID: 16993075
That is the auto-resize code.
You can use something similar to resize for the width; remember that the width of the ListBox WITHIN the DIV element must be wide enough to view the entire item text, whereas the width of the DIV can be as small as you want it (to create the horizontal scroll).

private void Page_Load(object sender, System.EventArgs e)
            {
                  if (!IsPostBack)
                  {
                        //Load all items in the list box.
                        int nItem = Convert.ToInt32(ListBox1.Items.Count * 17);
                        ListBox1.Height = nItem; //Set height depends on the font size.
                        ListBox1.Width = 800; //This will ensure the list item won't be shrinked!
                  }
            }
0

Featured Post

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will show, step by step, how to integrate R code into a R Sweave document
In this post we will learn how to connect and configure Android Device (Smartphone etc.) with Android Studio. After that we will run a simple Hello World Program.
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question