Home/ Questions/Q 8695113
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T00:57:06+00:00

I’m trying to display checkboxes within a block as follows. <div style=overflow: auto; width:

  • 0

I’m trying to display checkboxes within a block as follows.

<div style="overflow: auto; width: 145px; background-color: #FFF; height: 80px; border: 1px double #336699; padding-left: 2px;">
    <label for="chk1"><input type="checkbox" id="chk1" name="chk_param">xxxx</label><br/>
    <label for="chk2"><input type="checkbox" id="chk2" name="chk_param">aaaa</label><br/>
    <label for="chk3"><input type="checkbox" id="chk3" name="chk_param">aaaa</label><br/>
    <label for="chk4"><input type="checkbox" id="chk4" name="chk_param">aaaa</label><br/>
    <label for="chk5"><input type="checkbox" id="chk5" name="chk_param">aaaa</label><br/>
    <label for="chk6"><input type="checkbox" id="chk6" name="chk_param">aaaa</label><br/>
    <label for="chk7"><input type="checkbox" id="chk7" name="chk_param">aaaa</label><br/>
    <label for="chk8"><input type="checkbox" id="chk8" name="chk_param">aaaa</label><br/>
</div>

and it displays what is expected as shown in the following snap shot.

enter image description here

When any one (or more) of the checkbox labels is longer than the width specified, a horizontal scroll bar appears which is expected but it displays the checkbox label text below the checkbox as shown in the following snap shot.

enter image description here

In this case, one (or more) of the checkbox labels is very long something like the following.

<label for="chk1">
  <input type="checkbox" id="chk1" name="chk_param">xxxxxxxxxxxxxxxxxxxxxxxxxxxx
</label><br/>

What is the solution to this? Every checkbox with its label should be displayed in a straight line within the block irrespective of how long the label text is.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use CSS property white-space: nowrap; like this My Fiddle

    Preview

    enter image description here

    HTML

    <div style="overflow: auto; width: 145px; background-color: #FFF; height: 80px; border: 1px double #336699; padding-left: 2px;">
    <label for="chk1"><input type="checkbox" id="chk1" name="chk_param">xxxxxxxxxxxxxxxxxxxxxxxxxx</label><br/>
    <label for="chk2"><input type="checkbox" id="chk2" name="chk_param">aaaa</label><br/>
    <label for="chk3"><input type="checkbox" id="chk3" name="chk_param">aaaa</label><br/>
    <label for="chk4"><input type="checkbox" id="chk4" name="chk_param">aaaa</label><br/>
    <label for="chk5"><input type="checkbox" id="chk5" name="chk_param">aaaa</label><br/>
    <label for="chk6"><input type="checkbox" id="chk6" name="chk_param">aaaa</label><br/>
    <label for="chk7"><input type="checkbox" id="chk7" name="chk_param">aaaa</label><br/>
    <label for="chk8"><input type="checkbox" id="chk8" name="chk_param">aaaa</label><br/>
</div>​

    CSS

    label {
   white-space:nowrap;
}​
    • 0