Solved

CSS radio button text wrapping

Posted on 2004-10-05
27
44,236 Views
Last Modified: 2011-08-18
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
0
Comment
Question by:MCDery
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 6
  • 5
  • +4
27 Comments
 
LVL 11

Expert Comment

by:raj3060
ID: 12230071
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>
+++++++++++++++++++
0
 

Author Comment

by:MCDery
ID: 12230297
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.
0
 
LVL 11

Expert Comment

by:raj3060
ID: 12230641
I am afraid that is not possible as far as I know.
You should be able to make changes..
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:haobaba1
ID: 12231386
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>
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12231764
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&
0
 
LVL 11

Expert Comment

by:raj3060
ID: 12232166
Easiest way is to try to make changes as I suggested. That shouldn't be hard.
0
 
LVL 11

Expert Comment

by:neester
ID: 12232224
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...
:)
0
 
LVL 11

Expert Comment

by:neester
ID: 12232263
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>
0
 
LVL 3

Expert Comment

by:haobaba1
ID: 12237404
[<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'
0
 
LVL 11

Expert Comment

by:neester
ID: 12237535
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>
0
 

Author Comment

by:MCDery
ID: 12240169
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?
0
 
LVL 18

Accepted Solution

by:
arantius earned 400 total points
ID: 12241885
This is the best I can manage .. it should be better but I don't think my normal techniques (applied to DIVs) work correctly inside tables.  It works, but will have to be all the way at the left of the screen.

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

I.E. http://www.arantius.com/ee/Q_21156883.html
0
 
LVL 11

Expert Comment

by:neester
ID: 12243482
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...
0
 
LVL 19

Assisted Solution

by:dakyd
dakyd earned 100 total points
ID: 12243733
Can you add things to the <head> of the document?  I assume you can do things like link stylesheets or include js files, so I'm also guessing you can edit the <head>.  That should let you do something like this - set the inputs to float: left, then change their heights to (almost) the height of the td.  That forces the text to "indent" so that it won't ever be below the radio button.  Hope that helps.

<html>
<head>
<style type="text/css">
td input {
  float: left;
}
</style>
<script type="text/javascript">
window.onload = init;

function init()
{
  var inps = document.getElementsByTagName("input");
  for (var i = 0; i < inps.length; i ++)
  {
    if (inps[i].name && inps[i].name == "q1.1")
      inps[i].style.height = (inps[i].parentNode.offsetHeight - 2) + "px";
  }
}  
</script>
</head>

<body>
<table style='width: 100px;'>
   <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>
</body>
</html>
0
 
LVL 11

Expert Comment

by:neester
ID: 12243768
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
0
 
LVL 18

Expert Comment

by:arantius
ID: 12277299
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.
0
 

Author Comment

by:MCDery
ID: 12282131
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?
0
 
LVL 11

Expert Comment

by:neester
ID: 12282605
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
0
 
LVL 18

Expert Comment

by:arantius
ID: 12290606
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.
0
 

Author Comment

by:MCDery
ID: 12320651
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
0
 
LVL 11

Expert Comment

by:neester
ID: 12324775
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!
0
 
LVL 18

Expert Comment

by:arantius
ID: 12338456
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.
0
 
LVL 18

Expert Comment

by:arantius
ID: 12341977
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.
0
 
LVL 11

Expert Comment

by:neester
ID: 12343315
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...
0
 
LVL 18

Expert Comment

by:arantius
ID: 12347090
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*
0
 
LVL 11

Expert Comment

by:neester
ID: 12347206
lol.
lets just walk away from that.
and pretend it never happened..
lol


just weird
0
 

Author Comment

by:MCDery
ID: 12382715
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
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question