Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 212
  • Last Modified:

treat radio's [form item] as list items

Hi there,

Im trying to lay out a form using CSS and not one single table, so far so good, but i've snaged a issue that I can't seem to overcome...

I want to have my radio buttons and check boxes layed out in the following format:

<> Some text which          <> Some more text that
      runs over two lines            runs over two lines

<> Some text which          <> Some more text that
      runs over two lines            runs over two lines
                                             and so on.

<> Some text which          <> Some more text that
      runs over two lines            runs over two lines

Now, i've almost got there, only whats happening is, the check box or radio button is being pushed into the text... i.e.

      <> Some text which          <> Some more text
      runs over two lines            that runs over two lines

which is mega ugly....

my code is this:

      <div id="cms_parent_content">
            <label>Username</label>
            <div class="group">
                  <label><input class="smallItem" type="checkbox" name="checkbox" value="checkbox" />Username and password</label>
                  <label><input class="smallItem" type="checkbox" name="checkbox" value="checkbox" />Some mass of text</label>
                  <label><input class="smallItem" type="checkbox" name="checkbox" value="checkbox" />Some mass of text</label>
                  <label><input class="smallItem" type="checkbox" name="checkbox" value="checkbox" />Username and my name</label>
                  <label><input class="smallItem" type="checkbox" name="checkbox" value="checkbox" />Username and my name and password</label>
            </div>
      </div>

with CSS of :

#cms_parent_content .group
      {
            display: block;
            float: left;
            width: 300px;
            padding: 10px;
            border: 1px dashed #ccc;
            margin: 0px 0px 15px 0px;
            background-color:#fff;
      }

#cms_parent_content .group label
      {
            display:block;
            float:left;
            width:120px;
            padding:0px 10px 5px 10px;
            text-align:left;
      }

Does anyone know what I need to change to get it to work more like a list? and less like a box?

Cheers
0
d2kagw
Asked:
d2kagw
  • 3
1 Solution
 
VirusMinusCommented:
You can try this ->

Cross-browser support is a little buggy, but, you could  use the adjacent sibling selector (x + y), which is applied to the first y element following an x element.  So, in ur CSS you would have something like:

input.radio + p.formlabel  { clear: both; text-align: right;...}

this would cause the first p with a class of formlabel that follows an input who's class is radio to have those styles:

<input class="radio" type="radio" value="foo">Bar</input>
<p>next radio button label</p><input class="radio"...

The other way I've seen this done is by arantius -> http://www.arantius.com/ee/Q_21156883.html (but its using tables)
0
 
VirusMinusCommented:
this seems to work as well ->

<input style="float: left;" type="radio" name="as" id="as"><label style="float: left; for="as">hey<br />asdas<br />adasdasd<br />bah bah bah!</label>
<input style="float: left;" type="radio" name="as" id="as"><label style="float: left; for="as">hey<br />asdas<br />adasdasd<br />bah bah bah!</label>
<input style="float: left;" type="radio" name="as" id="as"><label style="float: left; for="as">hey<br />asdas<br />adasdasd<br />bah bah bah!</label>
0
 
VirusMinusCommented:
yup definitely the second one..

just but a <br style="clear:both;" /> after your first row and start again..
0
 
d2kagwAuthor Commented:
Sweet Guys,

that works a treat, however, when I put it into the CSS file, rather than keeping it in the XHTML, it doesn't work correctly, the second column's label acts as though there is a line break before the first word....

XHTML:
            <div class="group">
                  <input class="columnItem" type="checkbox" name="as" id="as"><label class="columnItem" for="as">hey<br />asdas<br />adasdasd<br />bah bah bah!</label>
                  <input class="columnItem" type="checkbox" name="as" id="as"><label class="columnItem" for="as">hey<br />asdas<br />adasdasd<br />bah bah bah!</label>
                  <input class="columnItem" type="checkbox" name="as" id="as"><label class="columnItem" for="as">hey<br />asdas<br />adasdasd<br />bah bah bah!</label>
            </div>

CSS:
            #cms_parent_content .group
                  {
                        display: block;
                        float: left;
                        width: 300px;
                        padding: 10px;
                        border: 1px dashed #ccc;
                        margin: 0px 0px 15px 0px;
                        background-color:#fff;
                  }
            
            #cms_parent_content .group .columnItem
                  {
                        float: left;
                        text-align: left;
                        margin-right: 10px;
                        margin-top: 10px;
                  }
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now