euchre-live

commit ddc28d101e73f4fad7df2952bbba54507d522874 (patch)
parent 0ca87da278c7abe78c68f1cf2b354365b695f65d
Author: Chris Karle <chriskarle@hotmail.com>
Date:   Fri, 22 May 2020 01:58:28 -0400

ChatPanel

Fix a bug with chat scrolling.  It was working beautifuly but then
I had the audacity to put a border on the outer div and all hell
broke loose, with the panel freezing and content getting added to the
bottom, breaking the bounds and lengthening the whole page.

Adding a border broke the scrolling.  F*@king CSS.

Diffstat:
M
assets/app.scss
 | 
4
++++
M
assets/components/ChatPanel.js
 | 
9
++-------

2 files changed, 6 insertions(+), 7 deletions(-)
diff --git a/assets/app.scss b/assets/app.scss
@@ -154,8 +154,12 @@
     // background-color: cadetblue;
 
 }
+.cp__outer {
+    width: 100%
+}
 .chat__panel {
     width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
     border: 1px solid;
diff --git a/assets/components/ChatPanel.js b/assets/components/ChatPanel.js
@@ -37,23 +37,16 @@ class ChatPanel extends React.Component {
             }, () => {
                 const element = document.getElementById(id);
                 if (element) {
-                    console.log(element);
                     setTimeout(()=>{
                         element.scrollIntoView();
                     }, 100);
                 }
             });
-            // document.getElementById("chat__tile").scrollIntoView(false);
-            // if (this.chatTile) {
-            //     console.log(this.chatTile);
-            //     this.chatTile.scrollIntoView(false);
-            // }
         }
     }
 
     handleChatIn = event => {
         const val = event.target.value;
-        console.log(val);
         this.setState({ post: val});
     }
 
@@ -72,6 +65,7 @@ class ChatPanel extends React.Component {
     render () {
         const { post, postArray } = this.state;
         return (
+            <div className="cp__outer">
             <div className="chat__panel">
                 <div className="chat__holder">
                     <div className="chat__tile">
@@ -100,6 +94,7 @@ class ChatPanel extends React.Component {
                     />
                 </div>
             </div>
+            </div>
         )
     }