Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS white-space vs word-wrap

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #169060
    zemaker
    Participant

    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>
    #169061
    Paulie_D
    Member

    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.

    #169073
    zemaker
    Participant

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

    #169075
    zemaker
    Participant

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

    #169076
    Paulie_D
    Member

    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.

    #169090
    zemaker
    Participant

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.