Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-3561

Z-index for floating components is computed in a wrong way

    Details

    • Type: Bug
    • Status: Open
    • Priority: Normal
    • Resolution: Unresolved
    • Affects Version/s: 8.0.2
    • Fix Version/s: None
    • Component/s: None
    • Labels:

      Description

      Z-index for floating components is computed in a wrong way.
      It starts at 1800 and for every other floating component increases by 1.

      That's a bit wierd.
      It has bad results when you need to have some floating block, for example bar with some input fields and non floating block with some input fields.

      When i use position: absolute; z-index: 1900 on the floating bar, all of the notifications are bellow bar.
      When i don't use position: absolute, all notifications are above floating bar.
      What i need is, that all notifications are bellow the floating bar except notification on element inside the floating bar.

      ZK fiddle: http://zkfiddle.org/sample/tmltjt/2-Wrong-z-index-computation

      I would expect that z-index computation depends on the reference component context, thus value of z-index is only a bit higher then the highest z-index of the context.
      So notification for component which is inside block with max. z-index = 500 should be above the block and notification for component inside normal block with z-index = 1 should be bellow block with z-index 500

        Activity

        Hide
        Worsik Worsik added a comment - - edited

        For now I used workaround by overriding method _fixarrow of Notification:

        zk.afterLoad("zul.wgt", function () {
            var _xNotification = {}
            var supermethod = zk.override(zul.wgt.Notification.prototype, _xNotification, {
                _maxZIndex: function (ref) {
        
                    var parent = ref.parent,
                            refn = ref.$n(),
                            pzi = 1;
                    if (!refn)
                        return 0;
                    if (parent) {
                        pzi = this._maxZIndex(parent);
                    }
                    var zi = (refn.style && refn.style.zIndex) ? zk.parseInt(refn.style.zIndex) : 0;
                    return (pzi && pzi > zi) ? pzi : zi;
                },
                _fixarrow: function (ref) {
                    _xNotification._fixarrow.apply(this, arguments); //call the original method
                    //do whatever you want
        
                    var zi = this._maxZIndex(ref);
        
                    this.setZIndex(zi ? zi + 1 : 1);
                }
            });
        });
        
        Show
        Worsik Worsik added a comment - - edited For now I used workaround by overriding method _fixarrow of Notification: zk.afterLoad("zul.wgt", function () { var _xNotification = {} var supermethod = zk.override(zul.wgt.Notification.prototype, _xNotification, { _maxZIndex: function (ref) { var parent = ref.parent, refn = ref.$n(), pzi = 1; if (!refn) return 0; if (parent) { pzi = this ._maxZIndex(parent); } var zi = (refn.style && refn.style.zIndex) ? zk.parseInt(refn.style.zIndex) : 0; return (pzi && pzi > zi) ? pzi : zi; }, _fixarrow: function (ref) { _xNotification._fixarrow.apply( this , arguments); //call the original method // do whatever you want var zi = this ._maxZIndex(ref); this .setZIndex(zi ? zi + 1 : 1); } }); });

          People

          • Assignee:
            Unassigned
            Reporter:
            Worsik Worsik
          • Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated: