HTML5: Dropdown control is possessed in browsers!

[nisaga]

Has anyone else had an issue with a dropdown control 'rebounding' like a yo-yo in FireFox and/or Chrome?

I've got nested drop-downs in one of my topics and a bookmark in one of the second-level ones. When a user clicks a link to the bookmarked drop-down, the page opens with the bookmarked drop-down (and its parent dropdown) open - yay, everything working as expected.

But, when/if the user then closes the parent drop-down (whether the bookmarked drop-down is open or closed) and then proceeds to try to open it again, the control opens momentarily to show the contents, but then closes immediately.

Any ideas or suggestions for fixes are welcome!

Code fragment:

Code: Select all

<MadCap:dropDownHead>
                    <MadCap:dropDownHotspot>Reviewing your planned and submitted holiday requests</MadCap:dropDownHotspot>
                </MadCap:dropDownHead>
                <MadCap:dropDownBody class="greyborder">
                    <p>You can review your holiday requests and the number of days remaining in two areas within <MadCap:variable name="Basic.Product Name" />:</p>
                    <ul>
                        <li><b>My Absences</b>. The 'My Absences' area is perfect if you need to check your holiday balance, change a request or check more details about any individual request.</li>
                        <li><b>My Absence Calendar</b>. Your absence calendar allows you to see how your absence requests fit in with the public holidays that you don't have to work, your non-working days and any training activities or sick days that you may have scheduled.</li>
                    </ul>
                    <MadCap:dropDown>
                        <MadCap:dropDownHead>
                            <MadCap:dropDownHotspot><a name="MyAbsencesArea/Screen"></a>In 'My Absences'</MadCap:dropDownHotspot>
                        </MadCap:dropDownHead>
                        <MadCap:dropDownBody>
                            <p>You can review your absence from the Home screen (if this area is not visible on the Home screen, go to <b>My Self</b> > <b>Holiday & Absence</b> > <b>Absences</b>:</p>
                            <p style="padding-top: 0pt;">
                                <img src="../../Resources/Images/Absences_MyAbsencesList.bmp" style="width: 721px;height: 488px;">
                                </img>
                            </p>
                            <p>The number of days or hours at the top of the My Absence area are:</p>
                            <table style="width: 100%;margin-left: 0;margin-right: auto;mc-table-style: url('../../Resources/TableStyles/Clear.css');" class="TableStyle-Clear" cellspacing="0">
                                <col class="Column-Column1" style="width: 127px;" />
                                <col class="Column-Column1" />
                                <tbody>
                                    <tr class="Body-Body1">
                                        <td class="BodyE-Column1-Body1" style="font-weight: bold;">
                                            <p>Entitlement</p>
                                        </td>
                                        <td class="BodyD-Column1-Body1">
                                            <p>This amount is calculated by <MadCap:variable name="Basic.Product Name" /> based on the details that are configured by your HR Team.</p>
                                        </td>
                                    </tr>
                                    <tr class="Body-Body1">
                                        <td class="BodyE-Column1-Body1" style="font-weight: bold;">
                                            <p>Total Remaining</p>
                                        </td>
                                        <td class="BodyD-Column1-Body1">
                                            <p>This amount shows you how much time you have available to book in the current absence year.</p>
                                        </td>
                                    </tr>
                                    <tr class="Body-Body1">
                                        <td class="BodyB-Column1-Body1" style="font-weight: bold;">
                                            <p>Total Taken</p>
                                        </td>
                                        <td class="BodyA-Column1-Body1">
                                            <p>This amount includes both the absence requests you have submitted for approval and the absences that you have created in draft form for the current absence year.</p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <p style="padding-top: 0pt;"><b>Note:</b> Your draft absence requests are not automatically sent for approval: if you want to send them to your line manager, you must click <img src="../../Resources/Images/arrows and icons/Open_AbsenceRequest.bmp" style="width: 18px;height: 18px;" /> to open them and click <b>Submit for Approval</b>.</p>
                        </MadCap:dropDownBody>
                    </MadCap:dropDown>

[i-tietz]

I see that your bookmark is in the hotspot, not the body ... does it behave the same way if you insert the bookmark into the dropdownbody?

I know that MC does fairly heavyweight-programming to make nested dropdowns to behave the way they do.
E.g.: Once I noticed that the 2nd level dropdown is opened and so is the parent dropdown and the place on the page that the browser jumps to is the top of the parent dropdown, and not the bookmark itself ... which is sort of a smart move, if the content of the 1st level dropdown before the 2nd level dropdown isn't too long for the screen, because that would push the actual bookmark off the visible screen.

[nisaga]

Ah, thanks for the suggestions, I will see if they make a difference!

I remember seeing questions on the forum about opening one drop-down on the page but not the others, so I'll need to do some more reading to get your example working, but hopefully your first suggestion does the trick!

Thanks again!