Databases
StackOverflow2013
Postsdbo
POjquery select tag not being brought to front
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery select tag not being brought to front
    primarykey
    data
    text
    <p>I have the following function, which brings a given element to the front, and changes a couple of properties. The element in question is a select box.</p> <pre><code>function expandTags(event){ var pos = $(this).position(); $(this).css("position", "absolute"); $(this).css("left", pos.left + "px"); $(this).css("top", pos.top + "px"); $(this).css("height", $(this)[0].scrollHeight + 20 + "px"); $(this).attr("size", $(this).data("list_item").data("tags").names.length); $(this).css("zIndex", 9999); } </code></pre> <p>The code works, all except for the zIndex - while the element does get updated to have this value, it seems to have no affect. When the select box's height is expanded, it overlaps another select box (essentially identical) in a row below it. Which is in front of this select box. Regardless of what I set that boxes zIndex to, it always remains on top.</p> <p>The HTML of the boxes after the action is as follows: the one that should be on top.</p> <pre><code>&lt;select style="width: 100px; height: 173px; position: absolute; z-index: 9999; left: 252px; top: 0px;" size="11" class="tags" name="StaggeredMessage[0][message][tags]" id="StaggeredMessage_0_message_tags" &gt; &lt;option&gt;&lt;/option&gt; .... &lt;/select&gt; </code></pre> <p>The one that should be below (but is on top):</p> <pre><code>&lt;select style="width: 100px; height: 80px; position: relative; z-index: 100;" size="4" id="StaggeredMessage_1_message_tags" name="StaggeredMessage[1][message][tags]" class="tags" title="Default for Carrier Id: "&gt; &lt;option&gt;&lt;/option&gt; .... &lt;/select&gt; </code></pre> <p>They are in different relatively positioned <p> and tags.</p> <p>I can't see what the cause of this could be, any thoughts?</p> <p>Thanks</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USZack Newsham
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjquery select tag not being brought to front
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POjquery select tag not being brought to front
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POjquery select tag not being brought to front
      1. This table or related slice is empty.
      1. VTUpMod
    1. COon a different but related matter, for better performance, try not to abuse the use of $(this), you may place it in a variable like: var $this = $(this). In addition, you may write the css properties and values as an object, then pass it to the $this.css(). That way you will call the function once and your code will look cleaner as well.
      singulars
      1. POjquery select tag not being brought to front
      1. USjinmichaelr
    2. COThanks, I'm fairly proficient in JS, but just begining with jQuery really, good things to remember!
      singulars
      1. POjquery select tag not being brought to front
      1. USZack Newsham
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload