Why can I not left align a selectRadio

Question

Im trying to put some stuff into a 2 column panelGrid and no matter what I do there is always unnecessary padding around a selectRadio. Any idea how to make it go away?

The css I have applied is:

  .col1 {width:200px; text-align:left;border: 2px solid black;}
  .col2 {width:150px; text-align:left; padding: 0; margin: 0; line-height: 0;border: 2px solid black;} 
  .radio{position: relative; height:0; top: 0; padding: 0; left: 0; maargin: 0; line-height: 0; background-color: red;}

But even with everything 0'd off it still moves it what looks like 5-10px off. However If I put say a commandbutton in there like the lower row it does not put that space there so it isn't like it is an issue with that particular cell, its just an issue with the radios. Any ideas?

I just put the radio in red so you can see where the outline of it is, it isnt even touching the left border.

Answer 1

The selectRadio area is rendered as a table. If you use layout="lineDirection", the elements go across, while if you use layout="pageDirection", they go up and down (the orientation may depend on the user's language).

To control the size of the entire area, specify a class or id for the selectRadio, and then set its size:

.mySelectRadio {
    width: 100%:
}

To adjust the labels, use:

.mySelectRadio input[type=radio] + label {
    /* make changes here */
}

Without too much effort, I was able to make the labels span the entire width, more or less, it's just going to require some more effort. The main point, though, is that you'll need to adjust the table itself first.