0

I want to create a line break within a listbox so that the text does not drag all the way to which the user is unable to read the whole content of the text.

This is how my current output looks like: enter image description here

I want it such that when the text reaches the end of the listbox it goes down to the next line, in simple terms, word wrapping. I have went online to search and found out that it is impossible to implement a wrap text feature using listbox. I managed to find a Word Wrap algorithm online and decided to use it, however I am unsure of how I can implement it into the listbox that I want it to be in.

Here is the codes that I found:

// https://www.codeproject.com/Articles/51488/Implementing-Word-Wrap-in-C

public static string WordWrap(string text, int width)
{
    int pos, next;
    StringBuilder sb = new StringBuilder();

    // Lucidity check
    if (width < 1)
        return text;

    // Parse each line of text
    for (pos = 0; pos < text.Length; pos = next)
    {
        // Find end of line
        int eol = text.IndexOf(Environment.NewLine, pos);
        if (eol == -1)
            next = eol = text.Length;
        else
            next = eol + Environment.NewLine.Length;

        // Copy this line of text, breaking into smaller lines as needed
        if (eol > pos)
        {
            do
            {
                int len = eol - pos;
                if (len > width)
                    len = BreakLine(text, pos, width);
                sb.Append(text, pos, len);
                sb.Append(Environment.NewLine);

                // Trim whitespace following break
                pos += len;
                while (pos < eol && Char.IsWhiteSpace(text[pos]))
                    pos++;
            } while (eol > pos);
        }
        else sb.Append(Environment.NewLine); // Empty line
    }
    return sb.ToString();
}

/// <summary>
/// Locates position to break the given line so as to avoid
/// breaking words.
/// </summary>
/// <param name="text">String that contains line of text</param>
/// <param name="pos">Index where line of text starts</param>
/// <param name="max">Maximum line length</param>
/// <returns>The modified line length</returns>
private static int BreakLine(string text, int pos, int max)
{
    // Find last whitespace in line
    int i = max;
    while (i >= 0 && !Char.IsWhiteSpace(text[pos + i]))
        i--;

    // If no whitespace found, break at maximum length
    if (i < 0)
        return max;

    // Find start of whitespace
    while (i >= 0 && Char.IsWhiteSpace(text[pos + i]))
        i--;

    // Return length of text before whitespace
    return i + 1;
}

Currently I put it as a method on its own, should i put this method directly in the listbox method itself? enter image description here

If yes, how can I modify the above codes to make it work? By the way descLb is the name of my listbox

Please dont suggest me to change my listbox to another form (eg. textbox), I only know how to extract text from the database to input into the listbox and to keep it simple for me I would like to use listbox.

aydinugur
  • 1,208
  • 2
  • 14
  • 21
blackJack
  • 59
  • 1
  • 2
  • 10

1 Answers1

0

You don't need all that complex server-side C# code to wrap text in a listbox in asp.net. All you need is some special CSS. For example, the below CSS will automatically wrap text in an asp.net listbox.

Wrapping will automatically occur if the width you mention in below CSS is not enough to fit the text of listbox option.

CSS to wrap text in Listbox

select option {
 white-space: normal;
 width: 100px

}

Here is the aspx markup that you can try on your end to see that text is automatically getting wrapped.

Note that,

  • I am using a CSS selector with id to focus on a specific listbox for wrapping
  • and also I have not specified the width since anything that cannot accommodate within the markup width of 100px for listbox gets automatically warpped

.

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Wrtap text in ListBox</title>
    <style>
        select[id*='ListBox1'] option {
            white-space:normal;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ListBox ID="ListBox1"
                Rows="6"
                Width="150px"
                SelectionMode="Single"
                runat="server">
                <asp:ListItem>Item 1 dsdds  sdsdsdsd sdsd sdsd sds xyz</asp:ListItem>
                <asp:ListItem>Item 2</asp:ListItem>
                <asp:ListItem>Item 3 gfgf kgkgkg kgkkg abc</asp:ListItem>
                <asp:ListItem>Item 4</asp:ListItem>
                <asp:ListItem>Item 5</asp:ListItem>
                <asp:ListItem>Item 6</asp:ListItem>
            </asp:ListBox>
        </div>
    </form>
</body>
</html>

Bellow is how the wrapping looks in asp.net listbox by giving the above mentioned special CSS styling.

Screenshot of text wrapping in asp.net ListBox

Text wrapping in asp.net Listbox

Sunil
  • 20,653
  • 28
  • 112
  • 197
  • Hey thanks so much! I tried with your method and it worked for me, saved me a great deal of trouble and it's much easier to understand too. Thank you once again :) – blackJack Dec 01 '17 at 17:05
  • by any chance would you know how to select multiple listboxes on hover? i have another listbox that is next to the one i posted and it lists down the countries next to the description. I want to make it such that if i hover on either the countries or description both would be highlighted as one – blackJack Dec 03 '17 at 05:47
  • Can you post a new question with your exact requirements? I will try to come up with a solution after you post a detailed question. – Sunil Dec 03 '17 at 11:04
  • This is the link to my exact question on it: https://stackoverflow.com/questions/47615899/how-to-highlight-a-row-of-multiple-list-boxes-on-hover-in-asp-net?noredirect=1#comment82190736_47615899 , would appreciate if you can help! – blackJack Dec 03 '17 at 12:14
  • Your list boxes will post back, so as far selecting is concerned that can happen in C#, but when hovering over a listbox item no server-side event occurs, so you will need to use jQuery or JavaScript to make both listboxes hover in same manner. – Sunil Dec 03 '17 at 12:46
  • If you are ok with what I have mentioned, then I can post a solution. – Sunil Dec 03 '17 at 12:48
  • Ok I am fine with it, please give me a detailed solution as I am not familiar with jQuery or Javascript. Thanks! – blackJack Dec 03 '17 at 12:52
  • Posted an answer. – Sunil Dec 03 '17 at 13:46