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

Expansive visuals with the Masonry plugin

Looking to create a Masonry layout with images but running into the issue of large image sizes. Wanting to limit each image to 30% of the screen width while maintaining proportionate height. How do websites like Flickr and Pinterest handle this when uplo ...

jqueryhtmlcssjquery-masonry

Customize node.js response by overriding or adding another return statement

I have two variables, FirstName and LastName, that I need to include in the response data. It is important to note that the FirstName and LastName are not stored in the Student table. let result = await Student.get(id) let FirstName = "Paul" let LastName ...

javascriptnode.js

How can I resolve the issue of using string values for items inside v-autocomplete, but needing them to be numbers in v-model?

I am working with a v-autocomplete component <v-autocomplete v-model="addressRegion" :items="selectLists.regions" item-value="key" item-text="value" ></v-autocomplete> The AddressRegion is curren ...

javascriptvue.jsvuetify.js

The CSS background image is not functioning

.menubar li { float: left; width: 115px; text-align: center; background-image: url(js/left_main_bg_image.gif); } Having issues with the background image not displaying properly in IE, Firefox, and Chrome. I've tried adding it to a tab ...

htmlcssdrop-down-menu

When using JavaScript, I have noticed that my incremental pattern is 1, 3, 6, and 10

I am currently using a file upload script known as Simple Photo Manager. Whenever I upload multiple images and wish to delete some of them, I find myself in need of creating a variable called numDeleted (which basically represents the number of images dele ...

javascriptjqueryhtml

How about this: "Can you turn a picture into text with just one click?"

Seeking assistance to enhance the 'About Us' page on our website. Each team member has a profile with their email address listed below, but we want to add a picture that disappears when clicked, revealing the email address in its place. You can ...

javascriptjquerywordpressonclickimage

tap into adhesive, translucent screen

I designed a webpage with an iframe at the bottom that I set to be transparent so that overlapped elements are visible. However, I encountered an issue where the links beneath the iframe were not clickable unless I disabled pointer-events for the iframe. ...

cssiframetransparency

Is it possible to have a PHP variable embedded within an HTML link tag?

<?php $message = ' <a href="' . $link . '">here</a> '; ?> My goal is to include a clickable link in the $message variable for use in the mail() function. However, despite setting $link with the desired link string, it ...

phphtml

Hidden warning to React-select for being uncontrolled

I've integrated react-select into my code: import React, {Component} from 'react'; import Select, {createFilter} from 'react-select'; let _ = require('underscore') class Test extends Component { constructor(props) ...

javascriptreactjsreact-select

Ensure page is updated after an AJAX request in jQuery Mobile by refreshing the page

My jQueryMobile page structure in index.html looks like this: <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div& ...

javascriptjqueryajaxjquery-mobile

Making adjustments to regular expressions

In my asp.net application, I have a text box where users input a URL and I am using a regular expression for validation. The current regular expression looks like this: ^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(&bsol ...

javascriptasp.netregex

Unexplained Reference Error in Next.js Typescript: Variable Accessed before Initialization

I am currently working on an admin website and encountered the error Block-scoped variable used before its declaration.. I will provide details using images and code. This is my first time seeking help on StackOverflow. Error Message: Block-scoped variab ...

javascriptreactjstypescriptnext.jsreact-query

Incorporating stick-to-top scroll functionality using AngularJS and ng

I am trying to implement a 'sticky' scroll on dynamic content. My current working example can be found here. It seems to be working, but I encounter a small 'flicker' when new items are appended. This issue seems to be related to the se ...

javascripthtmlcssangularjs

Having Trouble with $.ajax Function in my Program

After spending three days experimenting with various methods, I'm still unable to successfully use the Javascript ajax command to send form values to a php script. Despite no errors being displayed and the scripts running smoothly, nothing is getting ...

javascriptphpjqueryhtmlajax

The refresh function in jquery selectMenu is not functioning as expected

After initializing a selectMenu, I am attempting to populate it with data: $.each(data, function (Key, Value) { $('#ddlReportFarms').append($("<option></option>") .attr("value", Value.ID) .text(Value.Name)); }); ...

jqueryselect-menu

The HTML page is failing to call the function in the JavaScript application

I recently started taking a YouTube Javascript course on chapter 34 titled "Make start button work" Javascript tutorial My HTML, CSS, and Javascript files are all located in the same folder. I am using VS Code along with the Live Server extension for codi ...

javascripthtmlfunctiononclick

A guide on changing the style of a Layout component in React

Currently, I am utilizing Next.js alongside Material-UI as the framework of choice. Within my project, there is a Layout component that encapsulates the content with Material-UI's <Container>. I desire to customize the style of the Layout compon ...

cssreactjsmaterial-uinext.js

Arranging cards in a stack using VueJS

I am currently working with a small vue snippet. Originally, I had v-for and v-if conditions in the snippet, but due to issues reading the array, it is now hardcoded. The current setup produces three cards stacked on top of each other. I am exploring opti ...

javascripthtmlcssvue.js

What is the equivalent of getElementById in .ts when working with tags in .js?

Looking to incorporate Electron, Preload, Renderer with ReactJS and TypeScript into my project. <index.html> <body> <div id="root" /> <script src='./renderer.js'/> </body> <index.ts> const root = Re ...

javascriptreactjstypescriptelectron

Cloning a file input does not retain the uploaded file in the cloned input. Only the original input retains the uploaded file

Whenever I duplicate an input type file, I encounter an issue where the uploaded file from the duplicated input is also linked to the original input. It seems like the duplicate input is somehow connected to and taking files for the original one. This is ...

javascriptjqueryfileinputinput-type-file