Databases
StackOverflow2013
Postsdbo
POSelect box closes when using javascript scrollTop function
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSelect box closes when using javascript scrollTop function
    primarykey
    data
    text
    <p>I have an issue where I have box that is kind of like a live feed and updates constantly. This live feed has overflow-y: scroll and I use scrollTop to bring them to the bottom of the container.</p> <p>However if clicks on the select box it will automatically get closed when the live feed is updating and scrollTop is called.</p> <p>This seems to only be broken in Chrome (Version 27.0.1453.110 m) It works correctly in IE, FF, Opera, Safari.</p> <p>You can view the example here, click on the select box and wait for the other box to start scrolling, the select box will lose the dropdown: <a href="http://jsfiddle.net/xa3D2/2/" rel="nofollow">http://jsfiddle.net/xa3D2/2/</a></p> <p>HTML</p> <pre><code>&lt;select&gt; &lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt; &lt;option&gt;3&lt;/option&gt; &lt;option&gt;4&lt;/option&gt; &lt;option&gt;5&lt;/option&gt; &lt;/select&gt; &lt;div id="scrollBox"&gt; &lt;/div&gt; </code></pre> <p>JS</p> <pre><code>function addContent() { $('#scrollBox').append('&lt;div&gt;'); $('#scrollBox').scrollTop($('#scrollBox').prop('scrollHeight')); setTimeout(addContent,500); } setTimeout(addContent,500); </code></pre> <p>CSS</p> <pre><code>#scrollBox { border: 1px solid #ccc; overflow-y: scroll; word-wrap: break-word; background: #fff; color: #000; text-align: left; position: absolute; top: 50px; left: 0; right: 0; width: 100px; height: 300px; } #scrollBox div { height: 50px; border: 1px solid #00f; } </code></pre> <p>I guess my question would be is this a Chrome bug? Is there a possible way around this?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USarosolino
    1. USarosolino
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    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. POSelect box closes when using javascript scrollTop function
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POSelect box closes when using javascript scrollTop function
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POSelect box closes when using javascript scrollTop function
      1. This table or related slice is empty.
      1. VTUpMod
    1. COFYI the focus on select is not lose in chrome, seems the issue more difficult to catch unfortunately
      singulars
      1. POSelect box closes when using javascript scrollTop function
      1. USA. Wolff
    2. CO@roasted, I have revised my question I see the focus remains but the problem is the dropdown disappears and you have to click on it again.
      singulars
      1. POSelect box closes when using javascript scrollTop function
      1. USarosolino
    3. COI can't find a solution but here are 2 similar question worth reading: http://stackoverflow.com/questions/3872375/jquery-javascript-scrolltop-not-working-as-expected-on-chrome-to-restore-scrollb and http://stackoverflow.com/questions/1830080/jquery-scrolltop-doesnt-seem-to-work-in-safari-or-chrome-windows
      singulars
      1. POSelect box closes when using javascript scrollTop function
      1. USPrecastic
 

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