当position:absolute时,DOM元素不显示

时间:2022-07-18 20:30:10

I'm using jQuery Mobile 1.4.5. I have an element that is not displaying, under the following conditions: 1. Its CSS position is "absolute" 2. It is in the DOM under a JQM "grid":

我正在使用jQuery Mobile 1.4.5。在以下条件下,我有一个不显示的元素:1。它的CSS位置是“绝对的”2.它位于JQM“grid”下的DOM中:

<div class="ui-grid-a">
  <div class="ui-block-a">
    <div class="tt_autocomplete_wrap">
       <ul class="jqm_autocomplete ui-listview ...bla >
          <li class="ui-first-child" >
            <a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="#">Not Seen If Absolute</a>

See the details here: http://jsfiddle.net/needlethread/kkpjq8ww/

详情请见:http://jsfiddle.net/needlethread/kkpjq8ww/

If the CSS position of the .jqm_autocomplete element is set to "absolute", the first element in the demo does not display. I've left it displaying in the fiddle, but uncommenting the line shows the problem:

如果.jqm_autocomplete元素的CSS位置设置为“absolute”,则演示中的第一个元素不会显示。我把它显示在小提琴中,但取消注释该行显示问题:

.jqm_autocomplete {
  /* uncomment the next line to see the problem */
  /*    position: absolute; */

However: it is positioned correctly - it can be seen using the developer tools in outline form, exactly where it should be. And its z-axis position is also in front of everything.

但是:它的位置正确 - 可以使用大纲形式的开发人员工具,确切地说它应该在哪里。它的z轴位置也在一切之前。

I can't see any difference in the computed styles of the working and non-working elements, but am I missing something?

我看不出工作和非工作元素的计算样式有什么不同,但我错过了什么?

EDIT: looks like one of them is getting clipped. Fiddle updated to show this clearly: http://jsfiddle.net/needlethread/kkpjq8ww/16/

编辑:看起来其中一个正在削减。小提琴更新显示清楚:http://jsfiddle.net/needlethread/kkpjq8ww/16/

2 个解决方案

#1


try commenting position: relative on its parent div css class ie: <div class="tt_autocomplete_wrap"> and uncomment position: absolute;

尝试评论位置:相对于其父div css类ie:

并取消注释position:absolute;

on the CSS

在CSS上

.tt_autocomplete_wrap {
    /*position: relative;*/
}

Hope this helps!!!!

希望这可以帮助!!!!

#2


Try this:

$("#element").show();

#1


try commenting position: relative on its parent div css class ie: <div class="tt_autocomplete_wrap"> and uncomment position: absolute;

尝试评论位置:相对于其父div css类ie:

并取消注释position:absolute;

on the CSS

在CSS上

.tt_autocomplete_wrap {
    /*position: relative;*/
}

Hope this helps!!!!

希望这可以帮助!!!!

#2


Try this:

$("#element").show();