locked
No Word-wrap in CheckListBox RRS feed

  • Question

  • User1769015664 posted

    I have tried several option but it still word-wraps.

    Also, the labels are right next to the checkbox. How do I add a couple of spaces between them? 

                    <div class="column" style="background-color:#bbb; overflow:auto;">
                        <h2>Existing Documents</h2>
                        <asp:Panel ID="checkBoxPanel" runat="server" CssClass="scrollingControlContainer" Height="195px" border="solid" >
                            <asp:CheckBoxList ID="lstExistingDocs" runat="server" style="display:inline; white-space: normal;"></asp:CheckBoxList>         
                        </asp:Panel>                       
                    </div>
    
            .scrollingControlContainer
            {
                overflow-x: auto;
                overflow-y: scroll;
                border:groove;
            }
    
    Wednesday, November 25, 2020 4:35 PM

All replies

  • User-939850651 posted

    Hi NJ2,

    Based on the content and title you described, I'm not sure if you need to wrap the text in the options automatically.

    What you need to know is that the CheckBoxList control will be rendered as a table element on the page. If you need to make some style adjustments on the options, you could try something like this:

    <head runat="server">
        <title></title>
        <style>
            .scrollingControlContainer
            {
                overflow-x: auto;
                overflow-y: scroll;
                border:groove;
            }
            #lstExistingDocs td label {
                float: right; 
                padding-left:20px; 
                width:400px;
                word-wrap:break-word;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div class="column" style="background-color: #bbb; overflow: auto;">
                    <h2>Existing Documents</h2>
                    <asp:Panel ID="checkBoxPanel" runat="server" CssClass="scrollingControlContainer" Height="195px" border="solid">
                        <asp:CheckBoxList ID="lstExistingDocs" runat="server" Style="display: inline; white-space: normal;">
                            <asp:ListItem Text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"></asp:ListItem>
                            <asp:ListItem Text="BBBBBBBBBBBB"></asp:ListItem>
                            <asp:ListItem Text="CCCCCCCCCCCC"></asp:ListItem>
                            <asp:ListItem Text="DDDDDDDDDDDD"></asp:ListItem>
                        </asp:CheckBoxList>
                    </asp:Panel>
                </div>
            </div>
        </form>
    </body>

    Result:

    You could set spaces between checkbox and label text though padding or margin. And if the option does not need to wrap, you can delete the word-wrap attribute.

    Best regards,

    Xudong Peng

    Thursday, November 26, 2020 3:28 AM
  • User1769015664 posted

    Please re-size your form to half the size and see if these labels do stay next to the checkboxex/

    In my case, shrinking form makes labels to display right below the check boxes. And, if I make the screen larger then the check boxes and labels stay together but there is a lot of space between the left border of the panel and the checkbox.

    Friday, November 27, 2020 5:51 AM
  • User-939850651 posted

    Hi NJ2,

    In my example, unless the page size is reduced to less than the sum of the width of the Label and the Checkbox, the situation you described will appear. Otherwise, the page will be displayed normally, and you could also customize the width of the Label.

    Result:

    I am not sure if you have tried the code I provided, or tested it with any modifications.

    Best regards,

    Xudong Peng

    Friday, November 27, 2020 8:28 AM