white-space vs word-wrap

[zemaker]

I am having issues getting multiple words within a label to appear on separate lines. What I need is for the code to look like this:

http://i.imgur.com/16TZJuR.gif?1

However for the life of me I am unable to get it. Here is the code, and any help is appreciated (CodePen link: http://codepen.io/zemaker/pen/lbjgr):

<table cellspacing="3" cellpadding="0">
  <tbody>
    <tr>
      <td class="promptLabel" style="vertical-align: top; white-space: normal;"><label for="saw_186221_1a_1_D" title="Category"><span>Category</span></label></td>
      <td style="vertical-align: middle; text-align: left;"><table cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td class="data promptControl" id="saw_186221_1a_1" style="white-space: nowrap;"><span>
                <div id="saw_186221_1a_1_D" tabindex="-1" style="overflow-x: hidden; overflow-y: auto; width: 495px;">
                  <div class="data">
                    <div title="Physician / Non-Physician">
                      <input name="saw_186221_1a_1" class="checkboxRadioButton" type="radio" value="Physician / Non-Physician" id="saw_186221_1a_1_o0" checked="">
                      <label class="checkboxRadioButtonLabel" for="saw_186221_1a_1_o0">Physician / Non-Physician</label>
                    </div>
                    <div title="Primary Care Physician / Specialist / Non-Physician">
                      <input name="saw_186221_1a_1" class="checkboxRadioButton" type="radio" value="Primary Care Physician / Specialist / Non-Physician" id="saw_186221_1a_1_o1">
                      <label class="checkboxRadioButtonLabel" for="saw_186221_1a_1_o1">Primary Care Physician / Specialist / Non-Physician</label>
                    </div>
                    <div title="Primary Care Physician / Medical Specialist / Surgical Specialist / Other Specialist / Non-Physician">
                      <input name="saw_186221_1a_1" class="checkboxRadioButton" type="radio" value="Primary Care Physician / Medical Specialist / Surgical Specialist / Other Specialist / Non-Physician" id="saw_186221_1a_1_o2">
                      <label class="checkboxRadioButtonLabel" for="saw_186221_1a_1_o2">Primary Care Physician / Medical Specialist / Surgical Specialist / Other Specialist / Non-Physician</label>
                    </div>
                  </div>
                </div>
                </span></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
  </tbody>
</table>

[Paulie_D]

Gotta say it.

Don’t use tables for layout.

Oh…and don’t do a Codepen.io example with inline css.

Frankly, I’m not going to extract all that cr*p to make a revised example.

[zemaker]

That’s what I have to work with, I am customizing an existing app and I can’t touch the HTML.

[zemaker]

Cleaned it up as much as I could: http://codepen.io/zemaker/pen/lbjgr

[Paulie_D]

If all the CSS is inline (as your previous post would suggest) then you are going to have issues in over-riding it.

..and not being able to change the HTML could make this unsurmountable.

From a personal point of view i can’t see any benefit to trying to ‘solve’ an app / page where I can’t change the structure to achieve what the client wants.

I hope you’re charging a premium.

[zemaker]

I wish I could charge extra, however its just an expected part of the job.

[Author]

Posts