Solved

CSS radio button text wrapping

Posted on 2004-10-05
27
44,213 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
  • 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
FTP File permissions 1 29
reposition hamburger icon to top of screen 5 46
css question 1 32
Login area of a page 4 19
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

708 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now