Windowing box inside a container box

I am looking to implement scrolling for just the "chat-messages" div within the "chat-bar" div on my site. I want only this specific section to be scrollable, while the rest of the site remains stationary. Currently, I have to scroll through the entire page in order to view the "input-row" div. When I apply overflow: auto to the "chat-bar" div, it causes the entire input-row to also become scrollable. Can someone provide me with the best CSS/HTML solution to fix this issue? Alternatively, recommendations for a simple JavaScript library would be greatly appreciated.

Here is the link to my jsfiddle:

jsfiddle.net/o9vmfgpx/3

Update: I was able to find a solution, although it feels somewhat like a workaround.

.chat-messages {
    overflow-y: scroll;
    -ms-overflow-style: none;
}
.chat-messages::-webkit-scrollbar {
    display: none;
}

@-moz-document url-prefix() {
    .chat-messages {
        right: -5%;
        padding-right: 3%;
    }
}

This solution has been tested and works on the latest versions of IE, EDGE, Chrome, Firefox, and Opera (as of October 14th, 2016).

javascriptjqueryhtmlcss

Answer №1

It ought to do the trick.

body {
      overflow:hidden;
}
.chat-history {
       overflow:scroll !important;
}

Answer №2

Have you considered implementing the following CSS code?

.conversation-container {
  max-height:250px;
  overflow-y:auto;
}

Answer №3

Give this a shot.

.form-group {
    position: absolute;
    top: 20px;
    right: 20px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to retrieve the value property from document.getElementById as it is null

Can someone help me with reading the input field value in my code? <input type="text" name="acadp_fields[1200]" class="text" placeholder="" value="December 26, 1969"> Here is the code snippet I am us ...

javascript

Accessing CSV data stored externally using JavaScript

Hi there, I am struggling to load external CSV data into a script due to what I believe is the browser's same origin policy restriction. I came across some information about using cross-document messaging as a workaround, but I have no idea how to go ...

javascripthtmld3.js

Saving an XML file using jQuery

Is there a way to save an XML file named "abbrxml.xml" with the content "'Hello world'" using the provided code snippet below? I am having trouble making it work. How can I achieve this? type: 'button', id: 'btnFind', ...

jqueryxmlajaxsave

Is it possible to sketch basic 2D shapes onto 3D models?

Is the technique called projective texture mapping? Are there any existing library methods that can be used to project basic 2D shapes, such as lines, onto a texture? I found an example in threejs that seems similar to what I'm looking for. I attempt ...

javascriptthree.js

In PHP, a boolean variable will not display on the webpage when echoed

I am facing an issue with my PHP code where certain variables are not being echoed properly in the generated JavaScript. The code is designed to check if specific values are assigned in the $_GET global array and assign default values if they are not prese ...

javascriptphpgetboolean

Searching for particular JQuery nested values located within an input element

<input id="ctl00_PlaceHolderMain_RadButtonMango_ClientState" name="ctl00_PlaceHolderMain_RadButtonMango_ClientState" type="hidden" value="{"text":"Mango","value":"Mango","checked":true,"target":"","navigateUrl":"","commandName":"","commandArgument":""," ...

jquery

What's the best way to display the mysqli_error message when making an AJAX call with jQuery?

How can I display the mysqli error message during an ajax call? Here is my PHP code: if(isset($_POST['resumetitle']) || isset($_POST['name']) || isset($_POST['dob']) || isset($_POST['gender']) || isset($_POST[&apos ...

phpjqueryajax

Taking a Query String and Transforming it into an Array

What is the best way to transform this into an array within PHP? &height=0&weight=2&width=10 I am sending data from a jQuery function using .serialize() to a PHP function. Does anyone have any suggestions? ...

phpjquery

Utilizing the Context Object in a Slack API Bolt Project for seamless property transfer between methods

I'm currently working on a Slack app using the JavaScript Bolt framework. This app essentially listens for specific message keywords in channels and then forwards those messages to the users of the app. My main goal is to add a permalink to the forwa ...

javascriptnode.jsslack-apibolt

Retrieving data from a radgrid with the power of jQuery

Trying to extract the text from the label GetName in a radgrid using jQuery. Need to iterate through each record to check the value of the label. Can anyone provide assistance? Thanks! Below is the code for my radgrid. <telerik:RadGrid ID="Gridview1 ...

javascriptjqueryasp.net

I must only assign the result to "value" if the condition of the map is true

I am looking to set the variable "value" to only contain the value that meets the condition in the map function const arr= [1,2,3,4,5]; value = arr.map(item => item > 4 && item) console.log(value); The resulting value is currently [false, false, fa ...

javascriptarraysreactjsdictionaryjsx

Sending specific names as properties

Looking to streamline my repetitive form inputs by abstracting them into a component, I want the following functionality: <InputElement title="someTitle" v-model="someName" @blur="someFunction" name="someName" type="someType"> The desired output wo ...

javascriptvue.js

The Bcrypt hashed password does not match the password hash stored in Mongodb

When I use bcrypt.hash to encrypt a password, the hash generated is normal. However, when I save this hashed password in MongoDB using Mongoose, it appears to be different from the original hash. For example: Password hash: $2b$10$bUY/7mrZd3rp1S7NwaZko.S ...

javascriptnode.jsmongoosehashbcrypt

Utilize Javascript to input text into a webform

I am working on creating a bot that simulates user input for the WattsApp web website. When I manually type a message into the website, it enables a button that allows me to send the message. However, when my script runs, it finds the input box, changes t ...

javascripthtml

Utilizing jQuery and PHP to Serialize and Submit Form Data

My attempts to send form data using jQuery seem to be failing as the data is not reaching the server. Can you please help me identify what mistake I might be making? This is my HTML form: <form id="contactForm" name="contactForm" method="post"> ...

phpjqueryformsserializationform-submit

Can floated divs be prevented from collapsing without taking up any width?

Let's discuss an issue that is not related to block elements collapsing when their children are floated, and has nothing to do with clearing at all. Imagine having a set of floated divs like: <div class="column">Column 1</div> <div cl ...

cssfirefoxbrowsersafaricross-browser

Set the jQuery cookie to change the CSS property to hide the element

Currently, I am utilizing the jquery cookie plugin to make the browser remember the state of a CSS after refreshing the page. Below is an excerpt of my code where a button is clicked: $('#cartHolder').attr('style','display: no ...

jquerycssdomcookies

Is there a way to automatically populate an AngularJS input field?

Attempting to automate filling out a website using JavaScript. The script below: document.getElementsByClassName('form-control')[1].value = "MYNAME"; The input text changes, but upon clicking the submit button it displays as empty. Any as ...

javascriptangularjs

Determine if a specific checkbox with a particular id has been selected using JQuery

Looking for assistance on how to determine if a checkbox with a specific ID is checked or unchecked. <input name="A" id="test" type="checkbox" value="A" /> <input name="B" id="test" type="checkbox" value="B" /> <input name="C" id="test1" t ...

javascriptjquerycheckbox

Tips for displaying personalized error messages from your REST API in a JavaScript client

I'm utilizing a Java REST API that has been generated using swagger. If the client is unauthorized, I am sending custom error messages in response. public Response collaborationCollabIdDelete(Integer collabId, SecurityContext securityContext, Str ...

javascriptjavarestswagger