[Html-widget] Radio button group

[Carl Franks]

On 23/09/06, Matt Rosin <mattr at telebody.net> wrote:
> I've had lots of trouble with checkboxes (empty ones not updated, as mentioned
> in the ML) and radio groups (see below).  I resolved these by switching to
> pulldown menus even for boolean items which leaves the questions up in the
> air. This is a small app I built along the lines of the tutorial using
> DBIx::Class and Mysql. Note these cases coincidentally are skipped by the
> tutorial...

Can you either send a test file, or describe the errors in detail?
Was this with v1.09?, as several errors were fixed regarding 0 values.

> 1. Radio buttons show up on two rows below their label's row, not on same line
> as it. Can't figure out why, don't get containerizing and involvement of css.
> Pasting into static html page comes out okay (on same line). So maybe a css issue?

With a RadioGroup element "foo", I started with the CSS from the file
"examples/simple.css" and then had to add the following css to get
both radio buttons on a single line.

#widget_foo_1_label {
	display: inline;
}
#widget_foo_2_label {
	display: inline;
}

Maybe we ought to give the outer label tag a class name, so that
RadioGroups can be targetted more easily by CSS?

> 2. You can select a radio button once with mouse, but the browser refuses to
> let you click on the other radio spot to restore the value.
>    Firefox 1.07 (linux) maybe thinks the radio group is a label that can't be
> changed, because the closing label tag appears on the last line, after the
> span ends, and not before the span begins which is where I think it should be.
>    This issue is fixed in static html by moving the label closing tag up to
> before the span. In the catalyst app it resumes working if you just do not use
> a label. Simply making two radio button elements did not seem to be a good
> idea either.

Yes, I've confirmed this problem.
I noticed a comment in the code for RadioGroup, saying it should use a
"legend" tag, rather than "label" around the radiogroup. So I checked
the xhtml 1.0 transitional dtd, and it says:
"Each label must not contain more than ONE field
Label elements shouldn't be nested."

Our current output is
<label>
  <span>
    <label>
      <input>
    </label>
    <label>
      <input>
    </label>
  </span>
</label>

So we should maybe change the outer "label" to "legend".
This will cause formatting / CSS issues, but we'll just have to
resolve them, as it just doesn't work at the moment anyway.

One problem I've noticed, is that if you haven't explicitly created a
fieldset to contain the elements, and that fieldset doesn't have a
legend, then the RadioGroup's legend tag causes the RadioGroup to be
rendered above any preceeding elements, at the top of the form.
Does that suggest "legend" is the wrong tag to use here? DIV?

>    Possibly FormElementContainer might work.. it works in the book demo but
> failed in my app for some reason while studying the tutorial.

Are you referring to $w->element_container_class() ?
I've never used it, so can't comment.

Which book demo / tutorial are you referring to?
In what way did it fail?

> Please let me know if these things are both easily solved. If you can explain
> the container stuff and how css works with it one more time that would also be
> quite useful! Also would you recommend FormBuilder to solve these problems?
> Thanks for all your effort.

I hope we can solve them, maybe not easily though ;)
To figure out how elements / containers interact with CSS, I use the
"DOM Inspector" that comes with firefox. You can browse the DOM model,
and then view the "CSS Style Rules" for each element.

Carl