asked on

CSS radio button text wrapping

Dear Expert,

Some of my forms have radio buttons with long labels. When the text is too long, it wraps underneath the button, which looks terrible, instead of just under the text. In other words, I would like to apply formatting as if it was an unordered list with the property list-style-position:outside.

Example - What it looks like:
- aaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa
- bbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbb

What I would like it to look like:
- aaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaa
- bbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbb

Right now, the only way I've found to work around it is by using line breaks and non-breaking spaces to force the lines to look like they're wrapped, but it doesn't always work in the different browsers.

Hope you can help!
-MC

raj3060

Something like this:
Use table..
++++++++++++++++++
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<table width="50%">
<tr><td width="5%" valign="top">
<input type="radio"></td><td align="justify">
Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah Blah</td></tr>
<tr><td width="5%" valign="top">
<input type="radio"></td><td align="justify">
Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah Blah</td></tr>
</table>
</body>
</html>
+++++++++++++++++++

MCDery

ASKER

I should add that I am working with DASH software to build my forms. It is unfortunately very unflexible with what it can do.

When DASH outputs my radio list field, it sticks it in a table as such:
<table style='mystyle'>
<tr><td>
<input type='radio' name='q1.1' value='1'/>Blah Blah Blah 1
</td></tr>
<tr><td>
<input type='radio' name='q1.1' value='2'/>Blah Blah Blah 2
</td></tr>
</table>

It's impossible for me to change the layout of the table. My only flexibility lies in adding a style to this output table. So the solution I am looking for should be with CSS styles only.

I have increased the points value of the question to 500.

raj3060

I am afraid that is not possible as far as I know.
You should be able to make changes..

haobaba1

If you can go through the trouble of putting the text in a label then give this a try.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
      <title>wrapping radio button</title>
      <style type="text/css">
            .floatradio{
                  position:relative;
                  display:block;
                  float:left;
            }

            .radiolabel{
                  display:block;
                  width:7em;
                  float:right;
            }
            .bordered{
                  border:1px solid #000;
                  width:200px;
            }
            table.bordered tr td label{
                  display:block;
                  width:10em;
                  float:right;
            }
            table.bordered tr td input{
                  display:block;
                  float:left;
            }
      </style>
</head>
<body>

<table class="bordered">
      <tr>
            <td>
                  <input type="radio" id="test1id" value="0" name="test1" checked >
                  <label for="test1id"> This is the text that wraps around</label>
            </td>
      </tr>
</table>
</body>
</html>

COBOLdinosaur

The problem is a tool that uses 20th century layout. There is no real solution without modernizing; and you will find a lot more limitations as you continue to rely on a tool that weak.

Cd&

raj3060

Easiest way is to try to make changes as I suggested. That shouldn't be hard.

neester

YOU SHOULD be using LISTS...

eg:

<ul style="list-style-type: none; list-style-image: url(dash.jpg)">
<li>AaaaaaaaaaaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaaaaaaaaaaAaaaaaa aaaaaaaaaaaaaaa aaaaaaAaaaaaaaaaaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaaaaaaaaa aAaaaaaaaaaaaaaaaaaaaaaaaaaaaAaaaaaaaaaaa aaaaaaaaaaaaaaaa</li>
<li>Bbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</li>
<li>Cccc cccccccccccccccccccccccccccccccccccccccccccccccccccccccc</li>
</ul>

JUST CREATE AN IMAGE CALLED: dash.jpg

AND make it a DASH...
:)

neester

awww sorry.
were your DASHES the actual RADIO Buttons?

Ok...

then do this:

<input style="float: left;" type="radio" name="as"><label style="float: left; for="as">hey<br />asdas<br />adasdasd<br />bah bah bah!</label>

haobaba1

[<input style="float: left;" type="radio" name="as"><label style="float: left; for="as">hey<br />asdas<br />adasdasd<br />bah bah bah!</label>]

I am fairly certain this will still wrap in gecko. And for = 'id' not 'name'

neester

Haobaba1
Yeah i am sure it will work.
Yeah true.

I forgot to includethe id="" --- it is not necessary and will work without it.
But it would loose the use of the LABEL function on clicking the text....

Revised version - although both are correct and work the same...

<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>

MCDery

ASKER

Sorry guys, your suggestions still don't work for me. DASH does not allow me to add a label tag at all, nor can I use classes. The only two places I can add a style to is to the table and to the row, but not to a specific cell or input.

I know this tool sounds really limited and archaic, but it is really good at what it's supposed to do: programming market research surveys and tabulating the results. It just doesn't have all the functionality of regular HTML and CSS. That's why I'm trying to find workarounds to make things work and look a little better.

I found something that is promising: the text-indent property. Anyone know if/how I could use that?

ASKER CERTIFIED SOLUTION

arantius

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

neester

MCDery,

Did you try the other method I posted.
<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>

^^

That method, you can use CLASSES and CSS to totally style the radio buttons and label...

SOLUTION

dakyd

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

neester

BTW MCDery,
The method I showed.
Works in FireFox (GECKO) and Internet Explorer (IE - therefore all IE Based browsers, inc. AOL).
So it would be fine.
It might be wise to encapsulate it inside a DIV though, becuase the floats might overlap.
or have issues without a CLEAR: BOTH on the DIV

arantius

MCDery have you found a solution yet? The suggestion I posted requires only a class="whatever" inside the <table> tag and those styles included in the <head> of the page, as shown in the linked file.

MCDery

ASKER

I have to put this project on hold for a little bit. I will get back to you in a week or two after I've had a chance to try out your proposed solutions.

And no one's answered my previous question about the text-indent property from my comment posted on Oct. 6th. Any suggestions with that?

neester

MCDery,
It isn't needed - but I am not sure if all browsers support that CSS tag.
If you just try the code I posted above...
it works fine

I will run another test in a couple hours, to make sure it works with multiple radi buttons around it.
It might not, but that will just mean you need to add one more tag or a nested div...

Cheers

arantius

MCdery, that does not do what you want at all. Reference:
http://www.w3.org/TR/CSS21/text.html#propdef-text-indent
"This property specifies the indentation of the first line of text in a block."

The property functions properly in IE and in FireFox, but what it does is create first-line-only indentation, like you would find in standard printed material. Exactly what you are trying to avoid.

MCDery

ASKER

Arantius,
I tried the text-indent, following an example in my book. Using a margin-left:20px; and text-indent:-20px;. It works beautifully in Mozilla, but the radio button just disappears in Explorer, it seems to hide behind the margin. It seems Explorer makes margins solid as opposed to see-through.
Back to the drawing board! I hope to have time to try your other proposed solutions later today.
-MC

neester

MCDery,

Try my solution.
This workes perfectly!

This code will make the radio buttons appear on the left, with the text right next to it, and positioned asif the radio buttons had a height equal to the text...
So the text stays out from under the radio button...
This code will align all the radio buttons under each other (vertically on the page)
<div style="clear:both"><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></div>
<div style="clear:both"><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></div>
<div style="clear:both"><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></div>

If you want them to be next to eachother (horizontally)
Use this:

<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>

This is the answer you are after!!!
Try it!

arantius

Neester that code definetly has quote marks missing, and MCDery has said:
"It's impossible for me to change the layout of the table. My only flexibility lies in adding a style to this output table. So the solution I am looking for should be with CSS styles only."
So he can't add all those styles and classes to each element.

MCDery please try my original solution. This code in the <head> or where ever you put your CSS information:

<style>
table.mystyle {
margin-left: 20px;
}
table.mystyle tr td input {
position: absolute;
left: 0px;
}
</style>

The table should then be <table class="mystyle"> you may of course replace mystyle with whatever word you wish, as long as you do so in all 3 places. No other changes are necessary.

An example is online at http://www.arantius.com/ee/Q_21156883.html and works for both FireFox 0.9.3 and Internet Explorer 6.

arantius

Neester after a closer look, though I don't understand why your code works, it does. The quotes I claimed were missing did not show on my screen, but did come through on a copy/paste.

neester

Arantius.
I dont know why, I think you mean the quotes for the closing of STYLE in the LABEL??
Im my demo page here I have the quotes and all...?
I think they get dropped off when displaying or something.
Odd...

arantius

Yes quite strange. In the web browser it shows

style="float: left; for="as"

But when I copied and pasted the whole thing into notepad, it did put the quote closing the style like it should.

*shrug*

neester

lol.
lets just walk away from that.
and pretend it never happened..
lol

just weird

MCDery

ASKER

OK, I have finally figured this all out. I had to use a combination of your answers and my own. Here's what I ended up doing:

In the header:
table tr td table {margin-left:0px; text-indent:-20px;}
table tr td table tr td input {position:relative; left:0px;}

I've tested in IE6 and Mozilla 1.7. This is basically arantius' solution, slightly modified. So I'm giving the majority of the points to arantius.

neester:
I couldn't get your solution to work for me. I can't use labels for my radio buttons. Apart from that, I could make my radio buttons float left, a two-line sentence would wrap OK, but then as soon as a sentence wrapped onto 3 lines, the third line went under the button because of the image size of the radio button, which is what daykd's solution covered.

daykd:
Your solution also worked for me in all browsers, but what I didn't like about it is the fact that the radio button was then vertically-aligned with the center of the wrapped text instead of staying beside the first line. For example, if there's three wrapped lines, the button is ligned up with the middle line. This is OK if you have a border on the table cells, but otherwise, this isn't good if you're reading a long list of "wrapped" options. So I'm giving you a few points for giving me a workable solution.

Thanks to everyone for all your efforts!
-MC