Spacing error in the HTML forms radio buttons

Hi @mogoodrich @wyclif @dkayiwa

I came across the following error shown in the radio buttons

<section id="samples_section" sectionTag="section" headerStyle="title" headerCode="Samples">

 <fieldset>
            <legend>Samples</legend>
            <h3>Samples</h3>         
            <p class="left">
                 <h4>Report is Ready</h4>
                 <obs conceptId="CIEL:5090" labelText="" answers="0,1" answerLabels="Yes,No" style="radio"/>
               <h4>Patient informed</h4>
               <obs conceptId="CIEL:5090" labelText="" answers="0,1" answerLabels="Yes,No" style="radio"/>
                <h4>Report has been issued to the patient</h4>                 
                 <obs conceptId="CIEL:5090" labelText="" answers="0,1" answerLabels="Yes,No" style="radio"/>
          </p>
        </fieldset>
</section>

Above is the code used. But when I see the source I can see a space generated as below

<input type="radio" id="w26_0" name="w26" value="0.0" onmousedown="radioDown(this)" onclick="radioClicked(this)">
<label for="w26_0">Yes</label>
&nbsp;

I am not sure how this &nbsp is generated? is this a known bug? or am I doing something wrong here?

I think this may be a “known bug”. We have not used radio buttons in the “simple form” entry mode before, and I believe nobody has tweaked the output form that the Html Form Entry module generates to properly render radio buttons in the “simple mode”.

A couple points, though–is it that &nbsp that is really causing the problem? Could you include the whole generated radio set, including the No button?

Also, a workaround is to a select list, which is what we do in these cases… it should work properly, and support keyboard navigation and selection.

Take care, Mark

Try using the “answerSeparator” attribute:

        <p class="radio">
            <obs conceptId="PIH:Known chronic disease before referral" style="radio"

                 answerConceptIds="PIH:YES,PIH:NO" answerCodes="yes,no"

                 answerSeparator=""/>

Not sure if you need class=radio, but try it out. The syntax works with the simple form.

Ellen

Hi, Thanks for the code. I am not clear on

“PIH:Known chronic disease before referral”

and

“PIH:YES,PIH:NO”

How can I create these concepts?

In my example, I provided an example with PIH concept mappings (instead of conceptIds or uuids). You don’t have PIH mappings, but are using CIEL mappings (ie. CIEL:5090).

For your example, add the answerSeparator attribute:

Report is Ready

<obs conceptId="CIEL:5090" labelText="" answers="0,1"

answerLabels=“Yes,No” style=“radio”

answerSeparator="" />

Patient informed

<obs conceptId=“CIEL:5090” labelText="" answers=“0,1”

answerLabels=“Yes,No” style=“radio”

answerSeparator="" />

Report has been issued to the patient

<obs conceptId=“CIEL:5090” labelText="" answers=“0,1”

answerLabels=“Yes,No” style=“radio”

answerSeparator="" />

Hopefully this will work for you.

Ellen

@ball Thank you

I managed to get this. Is it the best we could do? I see some slight problem still. :frowning: any suggestion for this problem?

@ball I am having this issue with the yes_no style for Boolean options, which is strange since the output is the same as the radio button with an &nbsp; tag between the radio options. Any idea what this spacing is for as it seems to break the radio buttons in this case.