I am grappling with maintaining the alignment of an input box underneath a chat window while using the float:left property. As there will be multiple chat windows and I want them to remain next to each other, I am uncertain about how to achieve this.
Check out this jsfiddle to see what I have so far:
Could you please help me figure out what I am missing?
Floating the container and removing float:left from the .chat-window will achieve the desired layout. By default, the <div class="chat-window"> display is set to block, creating a line break and causing the <input> to appear below.
Multiple .chat-tab-container elements will float next to each other.
CSS
.chat-tab-container {
float:left;
}
.chat-window {
background:#fff;
height:200px;
width:250px;
border:1px solid #ACD8F0;
overflow:scroll;
}
HTML
<div class="chat-tab-container">
<div class="chat-window"></div>
<input type="text" class="messages"/>
</div>
<div class="chat-tab-container">
<div class="chat-window"></div>
<input type="text" class="messages"/>
</div>
To begin with, ensure that your text box div is nested inside your chat box div.
HTML
<div class="chat-tab-container">
<div class="chat-window">
<input type="text" class="messages"/>
</div>
</div>
Next, position the text box at the bottom of the window using CSS.
CSS
.chat-window
{
float:left;
background:#fff;
height:200px;
width:250px;
border:1px solid #ACD8F0;
overflow:scroll;
position:relative;
}
.messages
{
position:absolute;
bottom:0;
float:left;
}
<div class="messaging-container">
<div class="chat-box"></div>
<input type="text" class="message-input"/>
</div>
<div class="messaging-container">
<div class="chat-box"></div>
<input type="text" class="message-input"/>
</div>
and
.chat-box {
background-color:#fff;
height:200px;
width:250px;
border:1px solid #ACD8F0;
overflow:scroll;
clear:right;
}
.messaging-container { float:left; }
... Essentially float each messaging container as a whole and not individual elements - if 'messaging-container' is meant to be the top level chat container then introduce another level in between
I have been experimenting with the following code: <head> <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script> <script type="text/javascript"> function loadVideo(playerUrl, ...
I am brand new to jQuery and just starting out, so please excuse me if this question seems basic or silly. I would like the header and footer of my page to stay in place while the center content slides in from the right side when the page loads. This websi ...
I am currently attempting to create a unique Navigation Bar design using bootstrap https://i.sstatic.net/HDGFw.jpg Here is the code snippet I am working on: <div class="navbar-header"> <button type="button" class="navbar-toggle" data- ...
I am facing a challenge with changing the transparency of a <div> element's background color using jQuery. An external API provides me with a hexadecimal value for the color: #abcdef I make use of jQuery (version 1.9) to apply this color using ...
After implementing the code below from a helpful CSS Tricks article, my element spanned across the full width of the page, stretching beyond its parent's boundaries: width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin- ...
I utilized Bootstrap in my project, implementing the following code: <div class="input-group"> <input type="text" class="form-control input-lg" autofocus> <span class="input-group-btn"> <button class="btn btn-primary btn-lg" t ...
While the title may not provide much clarity, I am struggling to put into words exactly what I am trying to achieve. I have created a layout in Photoshop which I have shared below to help illustrate my goal. Essentially, I have a blog that displays my sto ...
Currently working on my first website and running into some CSS issues. I'm aiming for a two-column + header layout that fills the entire screen space of the website. I have the following specifications in mind: Header takes up 20% of the screen he ...
I've been working on filtering and searching the table below based on the href value. My code successfully filters the displayed columns in the table, but it fails to work when I search for a string within the href attribute. For instance, if I searc ...
I currently have a Bootstrap 4 dropdown feature on my website, both through a hyperlink and also on the sidebar. The styling includes a[aria-expanded="true"]. Unfortunately, this is causing the element below to have a black background, which is ...
TL;DR I modified my base path from "/" to "custom-subpath" and encountered CSS missing on the production server despite it working well on my local server. Please forgive me, as explaining this issue may be challenging due to my limite ...
I have been developing a tool that can analyze URLs from an uploaded CSV file, search the text content of each URL, and calculate the total word count as well as the occurrences of "saas" or "software". The goal is to generate a new CSV file with the origi ...
Currently, I am involved in a project where we are utilizing a custom UI library that includes some dependencies. These components come with their own corresponding .css files. The structure of the source code looks like this: |- src |-| |- components ...
I've been working on a project using Laravel and Bootstrap 4. Recently, I decided to switch from the default Laravel font, Nunito, to Lato. So, I made the necessary changes in my app.css file: @import url(https://fonts.googleapis.com/css?family=Nun ...
While inspecting the elements, I noticed the presence of <tbody>, within which <tr> is nested. The issue arises when the tbody element has 100% height and width as intended, but <tr> always falls short by 4 pixels in height even when styl ...
Issue: While using directives from ng-matero for DateTime with Angular Material for application design, the dateTimepicker element is not applying the angular material theme as desired. https://i.sstatic.net/zPBp3.png Code Example The app.module.ts file i ...
I am currently facing an issue with my CSS code on iPad. I want to change the background-image displayed based on whether the user is using an iPad or not. Specifically, I want to use headerold.jpg as the background-image for iPads while keeping headernew. ...
Is there a way to update names and job titles directly below the images? To find out more, click on this link ...
I am looking to adjust the color of an input range using JavaScript instead of CSS. Can someone help me with this request? Current CSS Code: input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background: goldenrod !importa ...
I'm looking to add animation to a specific element once the route page finishes loading. This is not related to route page transitions. I've experimented with various methods, trying to animate a progress bar based on dynamic data values. I attem ...