jQuery ui split button glitch

Question

Using a jQuery UI split button with a drop down menu over an ui-state-disabled table row will make some menu options unreachable. Why?

example: jsFiddle

Trying to select Partner 2 option is almost impossible.

Tested in Google Chrome Version 33.0.1750.152 and Firefox 28.0

score 0 · Answer 1 · answered Mar 28 '14 at 12:49

Seems to be a z-index related issue; the row has a ui-state-disabled and this affects the elements with the same z-index.

I have fixed it by adding an higher z-index to the menu ul-li.

Code:

<ul style="z-index:1">
    <li><a href="?op=viewPromotions" idpartner="0">All partners</a>

    </li>
    <li><a href="?op=viewPromotions&amp;idPartner=1" idpartner="3">Partner 1</a>

    </li>
    <li><a href="?op=viewPromotions&amp;idPartner=2" idpartner="1">Partner 2</a>

    </li>
</ul>

Demo: http://jsfiddle.net/IrvinDominin/zEeb2/

jQuery ui split button glitch

1 Answers1