Problem with resizing in CSS and jQuery

I need help creating a chatbox that can be resized. I've almost got it, but the bottom part of the chatbox detaches when I resize it. Also, I'm having trouble making the userList a fixed size that won't be affected by resizing.

Check out the code on jsbin.

HTML:

  <div id="chatWindow">
    <div id="dragBar"></div>
    <div id="container">
      <div class="content">
      <p>Some text here</p></div>
      <div class="content">
      <p>More text here</p></div>
    </div>

    <div id="usersList">
      ... <!-- User list items -->
    </div>


  <div id="inputTxt"></div>

  </div>

CSS:

body{
    background: #e6e6e6 
}

#chatWindow{
width:750px;
height:400px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:darkgray;
}

#usersList{
  ... <!-- Users list styles -->
}

#dragBar{
  ... <!-- Drag bar styles -->

}

#container{
  ... <!-- Container styles -->  
}

.content{
  ... <!-- Content styles -->
}

#inputTxt{
  ... <!-- Input text styles -->
}

.user{
  ... <!-- User styles -->


}

JS:

$(function() {
  $( "#chatWindow" ).resizable({
    alsoResize: '#dragBar',

   });
    });

Answer №1

Keep the lower section fixed.

body{
background: #e6e6e6 
}

#chatWindow{
width:750px;
height:400px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:darkgray;
  position: relative;
  padding-bottom: 48px;
}

#usersList{
  position:relative;
  background-color:#CCC;
  height:100%;
  width:25%;
  position:relative;
  float:right;
  overflow-y:scroll;
}

#dragBar{
  background-color:darkblue;
  width:750px;
  min-height:23px;
  max-height:23px;

}

#container{
float:left;
  width:75%;
  height:100%;
  background-color:#CCC;
  clear:both;
  overflow-y:scroll;
  word-wrap:break-word;
}

.content{
  width:95%;
  min-height:10px;
  background-color:lightgray;
  float:left;
  margin:5px;
  clear:both;
}

#inputTxt{
  position:absolute;
  width:100%;
  height:25px;
  background-color:green;
  clear:both;
  bottom:0;
  z-index: 1;
}

.user{
  margin:4px;
  width:150px;
  height:30px;
  background-color:white;
  margin-left: auto ;
  margin-right: auto ;


}

Fiddle: http://jsbin.com/ibimaq/18/edit

Answer №2

If you want to prevent overflow in #chatWindow, consider using the CSS property overflow:hidden.

#chatWindow{overflow:hidden;}

http://example.com

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

What is the best way to ensure that a sidebar occupies the entire height of our webpage?

Here is the current layout of my sidebar: https://i.sstatic.net/c1sy6.png I want it to always occupy full height, how can I achieve this? I've tried using height: 100%, but it doesn't seem to work. Here is my CSS code: #sidebar { /* Make s ...

Problems arise when Twitter Typeahead, Knockout JS, and Twitter Bootstrap 3 are unable to cooperate harmoniously

I'm currently working on integrating the knockout-bootstrap custom binding for typeahead jQuery with Bootstrap 3, specifically to use it with Durandal 2.0. However, I'm facing some challenges in getting it to function correctly. The original bind ...

Confirmation of numerous checkbox selections

I am facing a challenge with a form that contains multiple questions answered through checkboxes. I need to validate that at least one checkbox is selected in all the questions, otherwise an alert message should pop up. Is it possible to achieve this val ...

Track the number of books read per month using an array of objects

Consider the following array of objects: const sampleArray = [{"read":true,"readDate":2021-01-15T18:21:34.059Z}, {"read":true,"readDate":2021-01-15T18:21:34.059Z}, {"rea ...

In order to access the localStorage from a different component, a page refresh is required as it is

UPDATE: Just to clarify, this question is NOT duplicate of how to retrieve the value from localstorage. My scenario is unique and the issue lies with Angular itself rather than localStorage. I am currently developing an Angular7 application. In one of my ...

Maximizing efficiency in website reloading and development with Sinatra using Ruby along with Rack and Haml

In my efforts to build a Sinatra website, I have gone from using Shotgun to now utilizing Rerun for reloading my Thin server whenever I make file edits. However, the development cycle is proving to be quite time-consuming. Even small changes to CSS, JavaS ...

Tips for incorporating animated features into a bar graph using jQuery

How can I create a dynamic animated bar graph using jQuery? I am looking to make the bar slide up from the bottom, incorporating images for both the bar and background. I have already set the positioning in CSS and now need to add animation to make the bar ...

style for a bootstrap form input

Can the form-control from Bootstrap be made inline for input without relying on the grid system like col-md-2? This is the one aspect of Bootstrap that I find particularly frustrating. ...

Axis Labels for x and y in Flot Chart

Have you ever wondered if it's possible to display titles for the x and y axes on a Flot graph? Take a look at the following code snippet: $.plot($("#placeholder_1w"), [d], { series: { lines: { show: true, fill: false, fillColor: "red" } ...

Ensure that the dynamically inserted <title> tag remains intact in Angular even when the page is re

Can the dynamic title tag be preserved when the page is refreshed? When I refresh the page, the title tag reverts back to the original one specified in the index.html temporarily before switching back to the dynamically added one. I want the title tag to ...

Executing a series of functions sequentially in jQuery

I have a pair of function groups: $(document).ready(function() { var id = $(this).attr('id'); // The first group of functions getCountry(id); // The second group of functions getResult(id, 'all'); }); Eac ...

JavaScript will continue to run uninterrupted even after refreshing the webpage

Has anyone else encountered the issue of a javascript on a page continuing to run even after the page is refreshed? From what I understand, javascript is single-threaded and should stop running when the page is refreshed. Just to provide some background, ...

What is the best way to utilize AJAX to send a value from a foreach loop in Laravel?

I'm encountering an issue where all forms are sending the value as if it's from the first form, however, my intention is for each form to send the data inside it when I press the send button. Blade @foreach($car_lists as $car_list) <li class= ...

The json encoding process results in a non-JSON entity

Utilizing $.ajax to validate data in my controller has been successful, except when there are processes preceding the variables that are placed into an array for json encoding. Despite the controller echoing the data, the view fails to render it as json en ...

Is it possible to use a PHP array as a JSON-encoded object for a select field value and interact with it using JavaScript?

I have a PHP function that retrieves database values to populate a select form field. I am attempting to fill the option elements with all relevant data from the query (id, name, min, max) without needing an AJAX request. To achieve this, I decided to json ...

Using Selectpicker with Jquery .on('change') results in the change event being triggered twice in a row

While utilizing bootstrap-select selectpicker for <select> lists, I am encountering an issue where the on change event is being triggered twice. Here is an example of my select list: <select class="form-control selectpicker label-picker" ...

The operation failed because the property 'dasherize' is inaccessible on an undefined object

While attempting to execute the following command: ng generate component <component-name> An error occurred saying: Error: Cannot read property 'dasherize' of undefined Cannot read property 'dasherize' of undefined The confi ...

"Notification: The marker element has been eliminated" encountered while attempting to restore text ranges using Rangy within a Vue component

I have a rather intricate Vue component that includes a contenteditable div. My goal is to highlight words within this div using the Rangy library and add extra markup while retaining this markup even after editing the text. Initially, I planned on asking ...

Filtering a table based on user selection: specifying column, condition, and value using JavaScript

I am new to JavaScript and looking to implement real-time filtering on a table based on user input. My project utilizes Django and PostgreSQL for storing the table data. template <form action="" method="get" class="inline" ...

Simulated FileList for Angular 5 App Unit Testing

Imitation FileList In my pursuit of writing a unit test (Angular5), I have encountered the need for a FileList. Despite researching extensively, I have been unable to uncover any clues or solutions. I am starting to question whether this is even feasible ...