Databases
StackOverflow2013
Postsdbo
POContent Area within Fixed Positioned Panel Won't Scroll
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POContent Area within Fixed Positioned Panel Won't Scroll
    primarykey
    data
    text
    <p><strong><em>Foreward:</strong> After getting no response from <a href="https://stackoverflow.com/questions/17330162/chrome-screwing-up-fixed-positioning-on-sticky-elements">this</a> question and having no better thoughts on how to hack it to work, I decided just to try my layout again from scratch. But the link and this note are really only for your reference, they don't necessarily affect this question.</em></p> <p>I'm building a web page where if the user scrolls past the page header, the page will become a "full-screen" page, with two fixed-positioned toolbars, one at the top of the screen and another at the bottom. The bottom bar is "attached" to an offscreen content area (that is, they are both wrapped in a container <code>div</code>). Then, when the bottom bar is clicked, the secondary content panel will slide up below the top toolbar and fill the remaining on-screen space, down to the bottom of the viewport.</p> <p>Most of this is working just fine, but I have one last problem. If the content in that secondary content area exceeds the height of the screen, it will get "clipped" (but perhaps not in the CSS sense) and a scrollbar will <em>not</em> appear, even if the container div is given the style <code>overflow: auto</code>. (If <code>overflow: scroll</code> is used instead, the scrollbar shows up, of course, but scrolling is still not possible). Is there a problem with my markup somewhere which is preventing scrolling (either an HTML issue, more likely a CSS issue, or maybe some wild combination)?</p> <p>As a test case, I added the jQuery UI "resizeable" widget to my content area and then <em>was</em> able to successfully get a working scrollbar. The only thing it did was add the class "ui-resizable" to the content container, with the style <code>position: relative</code>, but just adding that to the standard <code>.container.comment</code> did not achieve the same effect. Of course, I do not actually want this content area to be resizable, but it proved the concept is at least, in theory, possible.</p> <p><strong>The Goods:</strong></p> <p>URL in question: <a href="http://weathersourcepa.com/iProj/newsticky/stickies2.html" rel="nofollow noreferrer">http://weathersourcepa.com/iProj/newsticky/stickies2.html</a></p> <p>Class Hierarchy for bottom ("comment" panel):</p> <pre><code>.commentarea &lt;-- Section container .commentbar &lt;-- Toolbar .container.comments &lt;-- Container for the content area .content.comments &lt;-- The actual content area for this part of the page </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USDevin
    plurals
    1. 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
    1. VO
      singulars
      1. POContent Area within Fixed Positioned Panel Won't Scroll
      1. USVlad
      1. VTFavorite
    1. This table or related slice is empty.
 

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