Giulio Colleluori
Reputation: 1361
One child of div scrollable one fixed position
I'm just now learning how to use SASS and CSS and I'm having some serious problems figuring out how to make the inside of a chat div scrollable while having the input field at the bottom stay when the scrolling happens. Although I figured out how to keep the bottom input bar fixed, now 2 things happen :
1. The whole div does not scroll anymore
2. Being fixed, now the width of the bottom bar is the same as the screen size since it is 100%, although I need it to be the same as its parent div.
I feel like I'm definitely missing something that a person that knows CSS would spot in a second, but I have spent hours trying to figure it out and still have not. The following is my CSS/HTML : JSFiddle
Here's my code :
#frame {
width: calc(100% + 30px);
min-width: 360px;
height: 92vh;
min-height: 300px;
background: #E6EAEA;
margin-left: -15px;
margin-right: -15px;
}
@media screen and (max-width: 360px) {
#frame {
width: 100%;
height: 100vh;
}
}
#frame .content {
float: right;
height: 100%;
overflow: hidden;
position: relative;
}
@media screen and (max-width: 735px) {
#frame .content {
width: 100%;
min-width: 300px !important;
}
}
@media screen and (min-width: 900px) {
#frame .content {
width: 100%;
}
}
#frame .content .contact-profile {
width: 100%;
height: 60px;
line-height: 60px;
background: #f5f5f5;
}
#frame .content .contact-profile img {
width: 40px;
border-radius: 50%;
float: left;
margin: 9px 12px 0 9px;
}
#frame .content .contact-profile p {
float: left;
}
.contact-profile {
overflow: hidden;
}
#frame .content .messages {
height: auto;
width: 100%;
min-height: calc(100% - 60px);
max-height: calc(100% - 60px);
overflow: hidden;
}
@media screen and (max-width: 735px) {
#frame .content .messages {
max-height: calc(100% - 105px);
}
}
#frame .content .messages::-webkit-scrollbar {
width: 8px;
background: transparent;
}
#frame .content .messages::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);
}
#frame .content .messages ul li {
display: inline-block;
clear: both;
float: left;
margin: 15px 15px 5px 15px;
width: calc(100% - 25px);
font-size: 0.9em;
}
#frame .content .messages ul li:nth-last-child(1) {
margin-bottom: 20px;
}
#frame .content .messages ul li.sent img {
margin: 6px 8px 0 0;
}
#frame .content .messages ul li.sent p {
background: #435f7a;
color: #f5f5f5;
}
#frame .content .messages ul li.replies img {
float: right;
margin: 6px 0 0 8px;
}
#frame .content .messages ul li.replies p {
background: #f5f5f5;
float: right;
}
#frame .content .messages ul li img {
width: 22px;
border-radius: 50%;
float: left;
}
#frame .content .messages ul li p {
display: inline-block;
padding: 10px 15px;
border-radius: 20px;
max-width: 205px;
line-height: 130%;
}
@media screen and (min-width: 735px) {
#frame .content .messages ul li p {
max-width: 300px;
}
}
#frame .content .message-input {
bottom: 0;
width: 100%;
z-index: 99;
}
#frame .content .message-input .wrap {
position: relative;
}
.chatinput {
float: left;
border: none;
width: calc(100% - 40px);
border-radius: 0;
padding: 11px 32px 10px 8px;
text-rendering: optimizeLegibility;
font-size: 0.8em;
color: #32465a;
resize: none;
}
.message-input {
position: fixed;
bottom: 0;
width: 100%;
}
.chatmessagesubmit {
float: right;
border: none;
padding: 12px;
cursor: pointer;
background: #32465a;
color: #f5f5f5;
&:hover {
background: #435f7a;
}
}
.section-year {
float: right;
width: 48%;
}
.section-college {
width: 48%;
}
#msgs {
padding: 0px;
overflow: auto;
height: fit-content;
}
#message_content {
line-height: 13px;
border: 1px solid #ced4da;
}
.panel {
overflow: hidden;
margin-bottom: 60px;
}
#close_chat {
float: right;
font-size: 30px;
margin: 0px 12px 12px 12px;
}<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div id="frame">
<div class="content">
<div class="contact-profile">
<img src="https://www.drupal.org/files/profile_default.png" alt="Dsc 1809">
<p>Chatroom test</p>
<div id="close_chat">
<a data-remote="true" href="/pages/close_chatroom?method=get">
<div style="color:#435f7a; cursor:pointer;">
<svg class="svg-inline--fa fa-window-close fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="window-close" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z"></path></svg>
<!-- <i class="fas fa-window-close" aria-hidden="true"></i> -->
</div>
</a>
</div>
</div>
<div class="messages panel-body" id="messages">
<div class="panel panel-default">
<ul id="msgs">
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>You ready for Kenya?</p>
</li>
<li class="replies">
<img src="/system/users/images/000/000/008/thumb/profile_picture.JPG?1519240015" alt="Profile picture">
<p>whaddup
</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>lol</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>gretgr</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>rethgthyteh
</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>rewgergewrg</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>erqfwere</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>refsrtagrwt</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>brdsgergser</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test lolollo</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>So my question; Is it neater to loose the "=== true" part in the future, or is it good practise to check the type of the variable as well.</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Then, what Javascript will do is type coerce true to match the type of someVar and then compare the two variables. There are lots of situations where this is likely not what one would intend. Because of this, in most cases you want to avoid
== because there's a fairly long set of rules on how Javascript will type coerce two things to be the same type and unless you understand all those rules and can anticipate everything that the JS interpreter might do when given two different
types (which most JS developers cannot), you probably want to avoid == entirely.</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>m going to accept this answer because it works for my example. It still doesnt work for my actual app because I need to append an HTML string to the view node and appendChild needs a DOM node not a string</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Then, what Javascript will do is type coerce true to match the type of someVar and then compare the two variables. There are lots of situations where this is likely not what one would intend. Because of this, in most cases you want to avoid
== because there's a fairly long set of rules on how Javascript will type coerce two things to be the same type and unless you understand all those rules and can anticipate everything that the JS interpreter might do when given two different
types (which most JS developers cannot), you probably want to avoid == entirely.</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p> dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essential</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>But this will only send the name attribute and its value for the specific input field, not the rest of the form input fields. What if I want to send all the form input fields to the server, how can I do that without a form button (I just want
to tab out of the specified input field).</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>strhtyhh</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>erggrdgssggr</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>rthtdfhtftt</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>favssvsfsvdsdf</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>erfqerferqerqer</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>loool whats up</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>dssfgbhhg</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>fvdxfbfgsbbfg</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>sgresggstsrt</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>sgrrttgtg</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>sgrrttgtg</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>this should be one</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>this should be one</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>okay stop</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>okay stop</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>whaaaat</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>whaaaat</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>dammit</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>lafhjgefbjhe</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>dammit</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>two</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>gergaregera</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>hello world</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>hello</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>klhli</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>fuck</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>teeeeeest</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>okay fuck</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>okay whaat</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>hfgdhfgd</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>hgdhkgfk</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>fgdgfd</p>
</li>
<li class="sent"><img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384">
<p>what</p>
</li>
</ul>
</div>
<div class="message-input">
<form id="new_message" class="new_message" action="/messages" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="MRkySbssrxg5xE+AU7+38wbjAFRVnUzsJMLIm5fP0Lea4tXpvafDBXDvXiFS4Vt0crPyISFYtP5nayMsBzt+UA==">
<textarea class="form-control chatinput" placeholder="Write a message..." data-textarea="message" required="required" name="message[content]" id="message_content"></textarea>
<input value="5" type="hidden" name="message[chatroom_id]" id="message_chatroom_id">
<button name="button" type="submit" class="chatmessagesubmit" id="register-button" data-disable-with="Please wait..." data-send="message">
<svg class="svg-inline--fa fa-paper-plane fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="paper-plane" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"></path></svg><!-- <i class="fa fa-paper-plane" aria-hidden="true"></i> -->
</button>
</form>
</div>
</div>
</div>
</div>Upvotes: 2
Views: 878
Answers (3)
Bhuwan
Reputation: 16855
Because position:fixed will fixed the element with respect to the document not to parent element....so you will need to use position:absolute here...
The idea is here to give the height to .messages div equal to calc(100% - 60px) with position:relative and apply position:absolute to the .message-input div...
Also I have removed the unwanted css from your code...
body {
margin: 0;
}
#frame {
background: #E6EAEA;
height: 100vh;
}
#frame .content {
height: 100%;
position: relative;
}
#frame .content .message-input {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #ccc;
padding: 10px 10px 5px;
}
#frame .content .contact-profile {
width: 100%;
height: 60px;
line-height: 60px;
background: #f5f5f5;
}
#frame .content .contact-profile img {
width: 40px;
border-radius: 50%;
float: left;
margin: 9px 12px 0 9px;
}
#frame .content .contact-profile p {
margin: 0;
}
#close_chat {
font-size: 30px;
margin: 0px 12px 12px 12px;
position: absolute;
top: 0;
right: 0;
}
#frame .content .messages {
width: 100%;
height: calc(100% - 60px);
position: relative;
}
.panel {
height: calc(100% - 67px); /* here 67px is message input height */
}
#msgs {
padding: 0px;
overflow: auto;
margin: 0;
height: 100%;
}
#frame .content .messages ul li {
display: inline-block;
clear: both;
float: left;
margin: 15px 15px 5px 15px;
width: calc(100% - 25px);
font-size: 0.9em;
}
#frame .content .messages ul li.sent img {
margin: 6px 8px 0 0;
}
#frame .content .messages ul li img {
width: 22px;
border-radius: 50%;
float: left;
}
#frame .content .messages ul li.sent p {
background: #435f7a;
color: #f5f5f5;
}
@media screen and (min-width: 735px) #frame .content .messages ul li p {
max-width: 300px;
}
#frame .content .messages ul li p {
display: inline-block;
padding: 10px 15px;
border-radius: 20px;
max-width: 205px;
line-height: 130%;
}
#frame .content .messages ul li.replies img {
float: right;
margin: 6px 0 0 8px;
}
#message_content {
line-height: 13px;
border: 1px solid #ced4da;
}
.chatinput {
border: none;
width: calc(100% - 52px);
border-radius: 0;
padding: 10px 30px 10px 10px;
text-rendering: optimizeLegibility;
font-size: 0.8em;
color: #32465a;
resize: none;
box-sizing: border-box;
}
.chatmessagesubmit {
border: none;
padding: 12px;
cursor: pointer;
background: #32465a;
color: #f5f5f5;
vertical-align: top;
height: 48px;
width: 48px;
font-size: 20px;
}<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div id="frame">
<div class="content">
<div class="contact-profile">
<img src="https://www.drupal.org/files/profile_default.png" alt="Dsc 1809">
<p>Chatroom test</p>
<div id="close_chat">
<a data-remote="true" href="/pages/close_chatroom?method=get">
<div style="color:#435f7a; cursor:pointer;">
<svg class="svg-inline--fa fa-window-close fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="window-close" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z"></path></svg>
<!-- <i class="fas fa-window-close" aria-hidden="true"></i> -->
</div>
</a>
</div>
</div>
<div class="messages panel-body" id="messages">
<div class="panel panel-default">
<ul id="msgs">
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>You ready for Kenya?</p>
</li>
<li class="replies">
<img src="/system/users/images/000/000/008/thumb/profile_picture.JPG?1519240015" alt="Profile picture">
<p>whaddup
</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>lol</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>gretgr</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>rethgthyteh
</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>rewgergewrg</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>erqfwere</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>refsrtagrwt</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>brdsgergser</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test lolollo</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>So my question; Is it neater to loose the "=== true" part in the future, or is it good practise to check the type of the variable as well.</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Then, what Javascript will do is type coerce true to match the type of someVar and then compare the two variables. There are lots of situations where this is likely not what one would intend. Because of this, in most cases you want to avoid
== because there's a fairly long set of rules on how Javascript will type coerce two things to be the same type and unless you understand all those rules and can anticipate everything that the JS interpreter might do when given two different
types (which most JS developers cannot), you probably want to avoid == entirely.</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>m going to accept this answer because it works for my example. It still doesnt work for my actual app because I need to append an HTML string to the view node and appendChild needs a DOM node not a string</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Then, what Javascript will do is type coerce true to match the type of someVar and then compare the two variables. There are lots of situations where this is likely not what one would intend. Because of this, in most cases you want to avoid
== because there's a fairly long set of rules on how Javascript will type coerce two things to be the same type and unless you understand all those rules and can anticipate everything that the JS interpreter might do when given two different
types (which most JS developers cannot), you probably want to avoid == entirely.</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p> dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essential</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>But this will only send the name attribute and its value for the specific input field, not the rest of the form input fields. What if I want to send all the form input fields to the server, how can I do that without a form button (I just want
to tab out of the specified input field).</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>strhtyhh</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>erggrdgssggr</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>rthtdfhtftt</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>favssvsfsvdsdf</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>erfqerferqerqer</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>loool whats up</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>dssfgbhhg</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>fvdxfbfgsbbfg</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>sgresggstsrt</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>sgrrttgtg</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>sgrrttgtg</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>this should be one</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>this should be one</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>okay stop</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>okay stop</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>whaaaat</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>whaaaat</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>dammit</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>lafhjgefbjhe</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>dammit</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>two</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>gergaregera</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>hello world</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>hello</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>klhli</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>fuck</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>teeeeeest</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>okay fuck</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>okay whaat</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>hfgdhfgd</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>hgdhkgfk</p>
</li>
<li class="sent">
<img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>fgdgfd</p>
</li>
<li class="sent"><img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384">
<p>what</p>
</li>
</ul>
</div>
<div class="message-input">
<form id="new_message" class="new_message" action="/messages" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="MRkySbssrxg5xE+AU7+38wbjAFRVnUzsJMLIm5fP0Lea4tXpvafDBXDvXiFS4Vt0crPyISFYtP5nayMsBzt+UA==">
<textarea class="form-control chatinput" placeholder="Write a message..." data-textarea="message" required="required" name="message[content]" id="message_content"></textarea>
<input value="5" type="hidden" name="message[chatroom_id]" id="message_chatroom_id">
<button name="button" type="submit" class="chatmessagesubmit" id="register-button" data-disable-with="Please wait..." data-send="message">
<svg class="svg-inline--fa fa-paper-plane fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="paper-plane" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"></path></svg><!-- <i class="fa fa-paper-plane" aria-hidden="true"></i> -->
</button>
</form>
</div>
</div>
</div>
</div>Upvotes: 1
Anzil khaN
Reputation: 1984
Is this you want ??
.notification_wrapper {
margin-left: 20px;
margin-right: 10px;
float: left;
position: relative;
}
.notification_wrapper .dropdown_notification .bell {
cursor: pointer;
}
.notification_wrapper .dropdown_notification .notification_count span {
color: #fff;
background-color: #e5e5e5;
border-radius: 4px;
font-size: 12px;
padding: 4px 8px;
z-index: 99;
}
.notification_count span {
margin-left: 15px;
cursor: pointer;
z-index: 99;
}
.notification_wrapper .dropdown_notification .notification_count span.unopened {
background-color: #f87880;
}
.notification_wrapper.open .notification_list_wrapper {
display: block;
}
.notification_wrapper .notification_list_wrapper {
display: none;
z-index: 999;
width: 330px;
height: 500px;
border: 1px solid #e5e5e5;
position: absolute;
top: calc(100% + 20px);
right: -10px;
background-color: #fff;
}
.notification_wrapper .notification_list_wrapper .notification_header_wrapper {
position: relative;
width: 330px;
height: 37px;
border-bottom: 1px solid #e5e5e5;
box-sizing: border-box;
background-color: #fff;
}
.notification_wrapper .notification_list_wrapper .notification_header_wrapper .notification_header_title {
position: absolute;
top: 4px;
left: 10px;
font-size: 14px;
}
.notification_wrapper .notification_list_wrapper .notification_header_wrapper .notification_header_menu {
position: absolute;
top: 4px;
right: 10px;
font-size: 14px;
}
.notification_wrapper .notification_list_wrapper .notifications {
position: relative;
width: 330px;
height: calc(500px - 37px - 37px);
overflow: scroll;
}
.notification_wrapper .notification_list_wrapper .notification_link_wrapper {
position: absolute;
bottom: 0;
width: 330px;
height: 26px;
border-top: 1px solid #e5e5e5;
padding: 4px 0 8px 0;
text-align: center;
background-color: #fff;
z-index: 2;
}
.notification_wrapper .notification_list_wrapper .notification_link_wrapper:hover {
background-color: #f8f9fb;
}
.notification_wrapper .notification_list_wrapper .notification_link_wrapper .notification_link {
text-align: center;
font-size: 14px;
}
.tabtitle {
font-size: 1vw;
}
.center {
text-align: center;
}
.oval-cell {
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
border-radius: 50px;
width: 100%;
background: $primary;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 15px;
padding-left: 15px;
}
.cell-activity_name {
margin-right: 10px;
}
.cell-profile_name {
margin-right: 20px;
}
.myactivitiesmenu.show {
height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
#frame {
width: calc(100% + 30px);
min-width: 360px;
height: 92vh;
min-height: 300px;
background: #E6EAEA;
max-width: 100%;
,:
}
@media screen and (max-width: 360px) {
#frame {
width: 100%;
height: 100vh;
}
}
#frame .content {
height: 100%;
overflow: hidden;
position: relative;
}
@media screen and (max-width: 735px) {
#frame .content {
width: 100%;
min-width: 300px !important;
}
}
@media screen and (min-width: 900px) {
#frame .content {
width: 100%;
}
}
#frame .content .contact-profile {
width: 100%;
height: 60px;
line-height: 60px;
background: #f5f5f5;
}
#frame .content .contact-profile img {
width: 40px;
border-radius: 50%;
float: left;
margin: 9px 12px 0 9px;
}
#frame .content .contact-profile p {
float: left;
}
.contact-profile {
overflow: hidden;
}
#frame .content .messages {
height: auto;
width: 100%;
min-height: calc(100% - 40px);
max-height: calc(100% - 40px);
overflow: scroll;
}
@media screen and (max-width: 735px) {
#frame .content .messages {
max-height: calc(100% - 105px);
}
}
#frame .content .messages::-webkit-scrollbar {
width: 8px;
background: transparent;
}
#frame .content .messages::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);
}
#frame .content .messages ul li {
display: inline-block;
clear: both;
float: left;
margin: 15px 15px 5px 15px;
width: calc(100% - 25px);
font-size: 0.9em;
}
#frame .content .messages ul li:nth-last-child(1) {
margin-bottom: 20px;
}
#frame .content .messages ul li.sent img {
margin: 6px 8px 0 0;
}
#frame .content .messages ul li.sent p {
background: #435f7a;
color: #f5f5f5;
}
#frame .content .messages ul li.replies img {
float: right;
margin: 6px 0 0 8px;
}
#frame .content .messages ul li.replies p {
background: #f5f5f5;
float: right;
}
#frame .content .messages ul li img {
width: 22px;
border-radius: 50%;
float: left;
}
#frame .content .messages ul li p {
display: inline-block;
padding: 10px 15px;
border-radius: 20px;
max-width: 205px;
line-height: 130%;
}
@media screen and (min-width: 735px) {
#frame .content .messages ul li p {
max-width: 300px;
}
}
#frame .content .message-input {
width: 100%;
z-index: 99;
bottom: 76px;
}
#frame .content .message-input form:after {
content: '';
clear: both;
display: block;
}
#frame .content .message-input .wrap {
position: relative;
}
.chatinput {
float: left;
border: none;
width: calc(100% - 80px);
border-radius: 0;
padding: 5px 32px 5px 8px;
text-rendering: optimizeLegibility;
font-size: 0.8em;
color: #32465a;
resize: none;
}
.message-input {
position: fixed;
bottom: 0;
width: 100%;
}
.chatmessagesubmit {
float: right;
border: none;
padding: 12px;
cursor: pointer;
background: #32465a;
color: #f5f5f5;
}
.chatmessagesubmit:hover {
background: #435f7a;
}
.section-year {
float: right;
width: 48%;
}
.section-college {
width: 48%;
}
#msgs {
padding: 0px;
overflow: auto;
height: fit-content;
overflow: hidden;
}
#message_content {
line-height: 13px;
border: 1px solid #ced4da;
}
.panel {
overflow: hidden;
/* margin-bottom: 60px; */
position: relative;
z-index: 999;
}
#close_chat {
float: right;
font-size: 30px;
margin: 0px 12px 12px 12px;
}
body {
margin: 0;
}<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div id="frame">
<div class="content">
<div class="contact-profile"> <img src="https://www.drupal.org/files/profile_default.png" alt="Dsc 1809">
<p>Chatroom test</p>
<div id="close_chat"> <a data-remote="true" href="/pages/close_chatroom?method=get">
<div style="color:#435f7a; cursor:pointer;">
<svg class="svg-inline--fa fa-window-close fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="window-close" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z"></path>
</svg>
<!-- <i class="fas fa-window-close" aria-hidden="true"></i> -->
</div>
</a> </div>
</div>
<div class="messages panel-body" id="messages">
<div class="panel panel-default">
<ul id="msgs">
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>You ready for Kenya?</p>
</li>
<li class="replies"> <img src="/system/users/images/000/000/008/thumb/profile_picture.JPG?1519240015" alt="Profile picture">
<p>whaddup </p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>lol</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>gretgr</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>rethgthyteh </p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>rewgergewrg</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>erqfwere</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>refsrtagrwt</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>brdsgergser</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test lolollo</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>So my question; Is it neater to loose the "=== true" part in the future, or is it good practise to check the type of the variable as well.</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Then, what Javascript will do is type coerce true to match the type of someVar and then compare the two variables. There are lots of situations where this is likely not what one would intend. Because of this, in most cases you want to avoid == because there's a fairly long set of rules on how Javascript will type coerce two things to be the same type and unless you understand all those rules and can anticipate everything that the JS interpreter might do when given two different types (which most JS developers cannot), you probably want to avoid == entirely.</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>m going to accept this answer because it works for my example. It still doesnt work for my actual app because I need to append an HTML string to the view node and appendChild needs a DOM node not a string</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>Then, what Javascript will do is type coerce true to match the type of someVar and then compare the two variables. There are lots of situations where this is likely not what one would intend. Because of this, in most cases you want to avoid == because there's a fairly long set of rules on how Javascript will type coerce two things to be the same type and unless you understand all those rules and can anticipate everything that the JS interpreter might do when given two different types (which most JS developers cannot), you probably want to avoid == entirely.</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p> dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essential</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>But this will only send the name attribute and its value for the specific input field, not the rest of the form input fields. What if I want to send all the form input fields to the server, how can I do that without a form button (I just want to tab out of the specified input field).</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>strhtyhh</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>erggrdgssggr</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>rthtdfhtftt</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>favssvsfsvdsdf</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>erfqerferqerqer</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>loool whats up</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>dssfgbhhg</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>fvdxfbfgsbbfg</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>sgresggstsrt</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>sgrrttgtg</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>sgrrttgtg</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>this should be one</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>this should be one</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>okay stop</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>okay stop</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>whaaaat</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>whaaaat</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>dammit</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>lafhjgefbjhe</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>dammit</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>two</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>gergaregera</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>hello world</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>hello</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>klhli</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>fuck</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>teeeeeest</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>okay fuck</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>okay whaat</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p></p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>hfgdhfgd</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>test</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>hgdhkgfk</p>
</li>
<li class="sent"> <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
<p>fgdgfd</p>
</li>
<li class="sent"><img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384">
<p>what</p>
</li>
</ul>
</div>
<div class="message-input">
<form id="new_message" class="new_message" action="/messages" accept-charset="UTF-8" data-remote="true" method="post">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token" value="MRkySbssrxg5xE+AU7+38wbjAFRVnUzsJMLIm5fP0Lea4tXpvafDBXDvXiFS4Vt0crPyISFYtP5nayMsBzt+UA==">
<textarea class="form-control chatinput" placeholder="Write a message..." data-textarea="message" required name="message[content]" id="message_content"></textarea>
<input value="5" type="hidden" name="message[chatroom_id]" id="message_chatroom_id">
<button name="button" type="submit" class="chatmessagesubmit" id="register-button" data-disable-with="Please wait..." data-send="message">
<svg class="svg-inline--fa fa-paper-plane fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="paper-plane" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"></path>
</svg>
<!-- <i class="fa fa-paper-plane" aria-hidden="true"></i> -->
</button>
</form>
</div>
</div>
</div>
</div>Upvotes: 1
Biswajit
Reputation: 1037
You need to place div inside a relative div. Give the child width and height as per you want and overflow scrollable. And place a button with position absolute and bottom:0
<div class="parent">
<div class="child">
</div>
<button>Click</button>
</div>
SASS
.parent{
position:relative
.child{
width: 300px;
height: 500px;
overflow: scroll;
padding-bottom: 20px;
}
button{
width: 300px;
height:20px;
position:absolute;
bottom:0;
}
}
Upvotes: 0
Related Questions
- Scroll Div with a Position Fixed child
- Fixed element inside scrollable div
- css - scrollable child of fixed element
- How to make a "Fixed" element Scrollable
- Fixed position and scrolling
- Scroll fixed positioned <div> horizontally
- Scrolling ability in a fixed div
- scrollable div with fixed element inside
- Scroll on fixed position div
- scrollable fixed div