开发者

jQuery Resizable handle z-index

I noticed that the jQuery UI's resizable handles are on top of all other elements in the page. I checked using Chrome's devel开发者_如何学JAVAoper tools and saw that they are automatically given a z-index of 1001. Is there a way to disable this and just give them the same z-index as the resizable element? Thanks.


Works best for me, cause without !important the rule gets overwritten.

.ui-resizable-handle { z-index: auto !important; }


The z-index is set with CSS, not JavaScript. You will need to edit the CSS responsible, in this case:

.ui-resizable-handle { 
    position: absolute;
    font-size: 0.1px; 
    z-index: 99999; 
    display: block;
}

Or, define your own rule to override the behavior. See this page for more information: http://www.mail-archive.com/jquery-ui@googlegroups.com/msg09524.html


For us this was the most convenient and least hacky way to override the default settings for jQuery-ui objects. You can replace the "resizable" component with any of their components. Just make sure this is run after jQuery is loaded but before your $(element).resziable() call.

$.extend($.ui.resizable.prototype.options, { zIndex: 2147483647 });


instead having to put !important z-index rules in your CSS, you can just remove this option from the resizable prototype, and then all handles will get the z-index you define in your CSS. usually you don't even have to define one.

// delete the zIndex property from resizable's options
// only have to do this once, before instantiating any resizables

delete $.ui.resizable.prototype.options.zIndex;


Actually, jQuery UI 1.12.1 Resizable resizer z-index default is 90.

That's not documented, but we can initialize it :

$(element).resizable({
  zIndex: 0,
});

// Red one, resizer appears through foreground divs
$("#w1").resizable(); // z-index resizer 90

// Gold one, no resizer appears through silver div
$("#w2").resizable({
  zIndex: 0, // z-index resizer 0
});
#w1, #w2, #w3 {
  position: absolute;
  width: 150px;
  height: 100px;
}

#w1 {
  left: 10px;
  top: 10px;
  background-color: red;
}

#w2 {
  left: 40px;
  top: 40px;
  background-color: gold;
}

#w3 {
  left: 70px;
  top: 70px;
  background-color: silver;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="w1"></div>
<div id="w2"></div>
<div id="w3"></div>

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜