Field Disabled when "embedded" between table fields

[biggeeves]

There are 5 variables: Var1, Var2, Var3, Var4 and XYZ.

Variables, Var1- Var4, in a table format in the Shazam HTML editor. Var1 and Var3 are 2 drop down choices. Var2 and Var4 are integers (0-10). (I don't think the validations matter)

XYZ, a drop down choice, in the online designer is NOT in the Shazam table. A sample of the table is below.

Everything works when the online designer fields are ordered with XYZ outside the fields in the table:

• Var1
• Var2
• Var3
• Var4
• XYZ

Bug In the online designer if field XYZ is moved between Var1 and Var4 the drop down choices for XYZ are not available. Clicking on the drop down choice element displays nothing. Nothing is triggered. It's as if the field is "locked" or has no choices. The options for XYZ are present in the HTML code.

• Var1
• Var2
• XYZ
• Var3
• Var4

If variable ABC is introduced between Var1 and Var4 it has the same effect.

• Var1
• Var2
• XYZ (options are not displayed)
• ABC (options are not displayed)
• Var3
• Var4

By reordering the fields in the online designer the options for XYZ and ABC are functional again.

• Var1
• Var2
• Var3
• Var4
• XYZ (functional)
• ABC (functional)

The HTML field in "Shazam Setup":

5. Has your child ever been diagnosed with any of the following disorders? Please select all that apply.

Disorder	Been Diagnosed	Age When Diagnosed
Variable 1	Var1	Var2
Variable 3	Var3	Var4

<!-- Add your Shazam HTML Here -->
<p>5. Has your child ever been diagnosed with any of the following disorders? Please select all that apply.</p>
<table class='disorders'>
    <tr>
        <th style="width:50%">Disorder</th>
        <th style="width:25%">
            Been Diagnosed
        </th>
        <th>
            Age When Diagnosed
        </th>
    </tr>
    <tr>
        <td>Variable 1</td>
        <td>
            <div class='shazam'>Var1</div>
        </td>
        <td>
            <div class='shazam' data-shazam-mirror-visibility="Var2">Var2</div>
        </td>
    </tr>
    <tr>
        <td>Variable 3</td>
        <td>
            <div class='shazam'>Var3</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="Var4">Var4</div>
        </td>
    </tr>
</table>

[123andy]

I made a test form, tried moving the xyz around, and tried both auto-complete and normal dropdowns and was unable to replicate your issues. Can you please try with this and see if you can replicate?

I did change your variable names to lowercase (Var1 to var_1) and removed the data-prefix.

I am using chrome on a mac.

<!-- Add your Shazam HTML Here -->
<p>5. Has your child ever been diagnosed with any of the following disorders? Please select all that apply.</p>
<table class='disorders'>
    <tr>
        <th style="width:50%">Disorder</th>
        <th style="width:25%">
            Been Diagnosed
        </th>
        <th>
            Age When Diagnosed
        </th>
    </tr>
    <tr>
        <td>Variable 1</td>
        <td>
            <div class='shazam'>var_1</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="var_2">var_2</div>
        </td>
    </tr>
    <tr>
        <td>Variable 3</td>
        <td>
            <div class='shazam'>var_3</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="var_4">var_4</div>
        </td>
    </tr>
</table>

Issue14_2018-08-30_0921.zip

[biggeeves]

Your version works. Sorry when I boiled it down I should have tried it.

I moved the problematic instrument to a new project, copied the Shazam HTML and I was able to reproduce the problem. Below is the exact code

<!-- Add your Shazam HTML Here -->
<p>5. Has your child ever been diagnosed with any of the following disorders? Please select all that apply.</p>
<table class='disorders table table-striped'>
    <tr>
        <th style="width:40%;">Disorder</th>
        <th  style="width:30%;">
            Been Diagnosed
        </th>
        <th style="width:30%;">
            Age When Diagnosed
        </th>
    </tr>
    <tr>
        <td>Intellectual Disability (formerly mental retardation)</td>
        <td>
            <div class='shazam'>dis_int</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_int_age_dx">dis_int_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Unspecified Intellectual Disability (Intellectual Development Disorder)</td>
        <td>
            <div class='shazam'>dis_unint</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_unint_age_dx">dis_unint_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Global Developmental Delay</td>
        <td>
            <div class='shazam'>dis_delay</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_delay_age_dx">dis_delay_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Language Disorder</td>
        <td>
            <div class='shazam'>dis_lang</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_lang_age_dx">dis_lang_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Speech Sound Disorder</td>
        <td>
            <div class='shazam'>dis_sound</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_sound_age_dx">dis_sound_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Social (Pragmatic) Communication Disorder</td>
        <td>
            <div class='shazam'>dis_social</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_social_age_dx">dis_social_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Autism Spectrum Disorder (formerly: Autistic Disorder, Rett's Disorder, Childhood Disintegrative Disorder,
            Asperger's Disorder, Pervasive Developmental Disorder not otherwise specified/PDD NOS)
        </td>
        <td>
            <div class='shazam'>dis_aut</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_aut_age_dx">dis_aut_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Minimal Brain Dysfunction</td>
        <td>
            <div class='shazam'>dis_brain</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_brain_age_dx">dis_brain_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Attention Deficit/Hyperactivity Disorder (ADHD, ADD)</td>
        <td>
            <div class='shazam'>dis_adhd</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_adhd_age_dx">dis_adhd_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Specific Learning Disorder</td>
        <td>
            <div class='shazam'>dis_learn</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_learn_age_dx">dis_learn_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Developmental Coordination Disorder</td>
        <td>
            <div class='shazam'>dis_dev</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_dev_age_dx">dis_dev_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Stereotypic Movement Disorder</td>
        <td>
            <div class='shazam'>dis_move</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_move_age_dx">dis_move_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Tourette's Disorder</td>
        <td>
            <div class='shazam'>dis_tour</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_tour_age_dx">dis_tour_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Persistent (Chronic) Motor or Vocal Tic Disorder</td>
        <td>
            <div class='shazam'>dis_tic</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_tic_age_dx">dis_tic_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Separation Anxiety Disorder</td>
        <td>
            <div class='shazam'>dis_anx</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_anx_age_dx">dis_anx_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Selective Mutism</td>
        <td>
            <div class='shazam'>dis_mutisum</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_mutisum_age_dx">dis_mutisum_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Conduct Disorder</td>
        <td>
            <div class='shazam'>dis_conduct</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_conduct_age_dx">dis_conduct_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Oppositional Defiant Disorder</td>
        <td>
            <div class='shazam'>dis_defi</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_defi_age_dx">dis_defi_age_dx</div>
        </td>
    </tr>
    <tr>
        <td>Disruptive Mood Dysregulation Disorder</td>
        <td>
            <div class='shazam'>dis_distruptive</div>
        </td>
        <td>
            <div class='shazam' shazam-mirror-visibility="dis_distruptive_age_dx">dis_distruptive_age_dx</div>
        </td>
    </tr>
</table>
[DiagnosticProcess_2018-08-30_1248.zip](https://github.com/susom/redcap-em-shazam/files/2337097/DiagnosticProcess_2018-08-30_1248.zip)

I tested this under surveys and via direct data entry. Both are problematic.

I hope you are able to reproduce the error on your system. Shazam is the only external module enabled on this project and there are no hooks or plugins.

[biggeeves]

The instrument zip is https://github.com/susom/redcap-em-shazam/files/2337097/DiagnosticProcess_2018-08-30_1248.zip

[123andy]

Okay - I created this form, added the shazam, and it is working as a data entry form without any issues that I can see with question 6. in the middle of the age inputs. It also works as a survey.

What browser are you using? Can you include a screen shot so I know what I'm supposed to see?

[biggeeves]

I'm using chrome browser, latest version, on a PC.

[biggeeves]

It is not clickable because there many elements layered on top of it.

Once the element (below) is deleted, and others like it, the "inactive" drop down is clickable. These elements can be highlighted in the DOM via Chrome's inspector and they do appear "above" the inaccessible element (#6 question).

<tr id="dis_int-tr" sq_id="dis_int" class="shazam-vanished" style="position: absolute; opacity: 0;"><td class="labelrc questionnum col-xs-1" valign="top" style="display: none;"></td><td class="labelrc col-xs-6"><label class="fl" id="label-dis_int" aria-hidden="true"> Intellectual Disability (formerly mental retardation)</label></td><td class="data col-xs-5"></td></tr>

I noticed that the normal highlighting of text is off too. When I try to highlight the text from "4. has...." to "5. Has your...(Shazam)...." it jumps all of a sudden. I think this confirms the hidden elements are somehow layered on top of the #6 question making the #6 dropdown inaccessible to clicks.

[123andy]

So when a tr is ‘hidden’ I couldn’t remove it from the page. We could look into modifying the css for the ‘shazam-vanished’ to set their z-index so they are behind the rest of the document perhaps…. I can’t replicate on my Mac and am having troubles trying to do it through VMware…. I’ll have to get a pc to test, but if you are playing around, I would try the index..

-a

On Aug 30, 2018, at 12:55 PM, Big Geeves notifications@github.com<mailto:notifications@github.com> wrote:

It is not clickable because there many elements layered on top of it.

Once the element (below) is deleted, and others like it, the "inactive" drop down is clickable. These elements can be highlighted in the DOM via Chrome's inspector and they do appear "above" the inaccessible element (#6https://github.com/susom/redcap-em-shazam/pull/6 question).

Intellectual Disability (formerly mental retardation)

I noticed that the normal highlighting of text is off too. When I try to highlight the text from "4. has...." to "5. Has your...(Shazam)...." it jumps all of a sudden. I think this confirms the hidden elements are somehow layered on top of the #6https://github.com/susom/redcap-em-shazam/pull/6 question making the #6https://github.com/susom/redcap-em-shazam/pull/6 dropdown inaccessible to clicks.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/susom/redcap-em-shazam/issues/14#issuecomment-417447356, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AHHasaSyoRFdfCcfdx81cKLkrSIkupnjks5uWENKgaJpZM4WR_17.

[biggeeves]

.shazam-vanished { z-index: -9999; }

Works.

The field rises to the top and is now clickable.

[123andy]

Ok - I’ll add that in…. I can’t hide them since they are needed for redcap’s internal branching logic and in the past I moved them off the page but that led to some odd issues in some browsers so I went with the absolute positioning which worked fine in testing :-). Thanks for the help!

-A

On Aug 31, 2018, at 5:47 AM, Big Geeves notifications@github.com<mailto:notifications@github.com> wrote:

.shazam-vanished { z-index: -9999; }

Works.

The field rises to the top and is now clickable.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/susom/redcap-em-shazam/issues/14#issuecomment-417653194, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AHHasXbIf5T0r9KDFpoo6CrhTTHCR7pRks5uWTB0gaJpZM4WR_17.