Databases
StackOverflow2013
Postsdbo
POAlign text with bottom as it comes in during a chat?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAlign text with bottom as it comes in during a chat?
    primarykey
    data
    text
    <p>I'm building a custom web chat application, and while I have the basics worked out, I've been wondering if this was possible... right now, the chat comes in at the top of the div, and when it reaches the bottom, the div starts scrolling. This works. This is great. But I was wondering if it was possible to create it more like an IRC client, where the chat comes in initially at the <em>bottom</em> of the div, then each new line comes in below the old ones, etc, and again, when the div is full, it starts scrolling.</p> <p>I've managed to get part of this working: I can get it displaying this way. But I can't find a way to scroll it; either the scroll doesn't appear (when there's no overflow on the inner, text div, despite there being an overflow on the outer, container div), or it's confined to the width of the text rather than the width of the container div.</p> <p>Some options I've tried:</p> <pre><code>&lt;div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;"&gt; &lt;div id="chatmessages" style="overflow: auto; position: absolute; bottom: 0;"&gt;&lt;/div&gt;&lt;/div&gt; </code></pre> <p>This has the text appear properly at the bottom, but no scrollbar ever appears.</p> <pre><code>&lt;div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;"&gt; &lt;div id="chatmessages" style="overflow: scroll; position: absolute; bottom: 0;"&gt;&lt;/div&gt;&lt;/div&gt; </code></pre> <p>This has the text appear properly at the bottom, and a scrollbar appears, but it's only ever as wide as the text, even if width=100%... and when the text reaches the top, the scrollbar remains gray.</p> <p>Basically, do I want the scrollbar on the inner or the container div, is this even possible, how do I force it to work, and am I going about this entirely wrong?</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. USAndrew
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAlign text with bottom as it comes in during a chat?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAlign text with bottom as it comes in during a chat?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POAlign text with bottom as it comes in during a chat?
      1. USIan Mercer
      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