Fix the positioning of a div in BootStrap and CSS code

Hey there, I'm relatively new to CSS/Bootstrap and currently in the process of learning. I might need to incorporate some CSS into the "chat_funcs" div, but unsure about what code to input to achieve my desired outcome.

The issue at hand:

What I am aiming for is: https://i.stack.imgur.com/Ni9ZZ.png

My current code snippet:

HTML:

<div id="chat" class="col-md-3 col-xs-12">          
    <span class="titulo">Chat</span>            
    <div class="msg">Test message</div>
    <div class="msg">Test message</div>
    <div class="msg">Test message</div>       
</div>  

<div id="chat_funcs" class="pull-right col-md-3 col-xs-12">
    <div class="pull-left">
        <input class="form-control" type="text">
        <input class="btn btn-default" type="button" value="Send">
    </div>
</div>  

CSS:

#chat {
  background-color: red ; 
  overflow: scroll; 
  overflow-x: hidden; 
  height: 80%; 
  position: absolute; 
  right: 0; 
  display: inline-block; 
}

Answer №1

To achieve this task, you can utilize an additional HTML div container. While there are other methods available, this particular solution was the first to come to mind.

Below is the HTML markup:

<div id="chat-container" class="col-md-3  col-xs-12">
    <div class="row">
        <div id="chat" class="col-md-12 col-xs-12">
            <span class="titulo">Chat</span>
            <div class="msg">Test message</div>
            <div class="msg">Test message</div>
            <div class="msg">Test message</div>
        </div>
    </div>
    <div class="row">
        <div id="chat_funcs" class="col-md-12 col-xs-12">
            <div class="pull-left">
                <input id="message-text" class="form-control" type="text"><br/>
                <input class="btn btn-default" type="button" value="Send">
            </div>
        </div>
    </div>
</div>

And here is the corresponding CSS:

#chat-container{
    position: absolute;
    right: 0;
    width: 160px;
}

#chat {
  background-color: red ; 
  overflow: scroll; 
  overflow-x: hidden; 
  height: 80%; 
  width: 100%;
  display: inline-block; 
}

#message-text{
    width: 140px;
}

You can view a demonstration on this fiddle link.

I trust that this information proves helpful.

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

HTML template without the use of server-side scripting languages like PHP or Ruby on

Is there a way to develop HTML templates without relying on backend languages such as PHP or Ruby on Rails? I tried using JavaScript, but I encountered issues with my current code when adding nodes after the DOM is loaded. An ideal solution for me would ...

Switch Image on Hover in Panel Group

After delving into Bootstrap, I encountered an issue. I have a Panel-Group with an image and some text. The challenge is switching the image on hover, but it should change when hovering over the panel, not just the image itself. I've found solutio ...

Adjusting the Size of Dialog Windows in Lightswitch HTML Client

When using the MS Lightswitch HTML Client, if a dialog menu option contains too many characters to fit within the length of the dialog window, the text will be cut off and replaced with (...). Is there a way to add a scroll bar or adjust the text size in ...

Is there a reliable method for directing to the Google "I'm Feeling Lucky" result consistently?

I am currently working on a solution in my application to easily link to NFL player profiles on NFL.com using their names. Since the URL structure of the player profile pages on NFL.com is not consistent, I am attempting to generate a link to Google's ...

A guide to using Angular to emphasize text based on specific conditions met

Currently, I am developing a testing application that requires users to choose radio type values for each question. The goal is to compare the selected answers with the correct answers stored in a JSON file. To achieve this, I have implemented an if-else ...

Using a local variable within quotes in Angular 4 (HTML) and utilizing ngFor

In my current project, I am utilizing Angular2-Collapsible. The objective is to display the details upon clicking a table row. Below is the code snippet provided. Specifically, if I add [detail]= "detail1", the collapsible-table-row-detail will appear when ...

What is the best way to make an input text the focus when an item on a dropdown menu is clicked?

I have a website with a dropdown menu and an input box. I want the user experience to be more seamless by automatically focusing the mouse cursor inside the input box when they click on an option in the dropdown menu. This way, users can start typing right ...

Shiny Chrome, Flexible Flexbox, and plump div elements

Looking to enhance my understanding of flexbox. Encountering a display issue in Chrome where the right column is too wide and the left column is too skinny, while it displays correctly in Firefox. Any suggestions on how to fix this for Chrome? .child ...

Unable to initialize the bootstrap datepicker module

I'm having trouble initializing bootstrap-datepicker from this GitHub repository: https://github.com/uxsolutions/bootstrap-datepicker. I can't seem to get it to work properly or call any methods or events on it. My setup includes Laravel 5.4.7, ...

Looking for a Horizontal Layout?

@foreach (var item in APModel) { <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> <div class="card" style="width: 18rem;"> <img src="h ...

Having trouble with GSAP Scrolltrigger PIN functionality in Next.js?

When I comment out the pin: true property in my code snippet below, everything works as expected except that the container wrapping the sections that should scroll horizontally does not stick to the top. However, if I uncomment the pin: true line, the enti ...

Deletion of ::before and ::after pseudo-elements upon addition of the class is-sticky

One issue I'm facing is that when the class is-sticky is applied to my menu, the ::before and ::after pseudo-elements on my logo become unnecessary. As I am not very proficient in JQuery, I have been unable to resolve this by searching online. The HT ...

Javascript - When I preview my file, it automatically deletes the input file

My form initially looked like this : <form action="assets/php/test.php" method="post" enctype="multipart/form-data"> <input type="hidden" name="MAX_FILE_SIZE" value="1000000" /> ...

Unable to open Google Maps link within React application

I've set up a conditional link based on location, using the following code: <a href={`https://maps.google.com/maps?q=${delivery_branch.latitude},${delivery_branch.longitude}`} target={"_blank"} >{`${delivery_branch.street}, ${d ...

Can you explain the significance of the "row" class in Bootstrap, how it differs from containers, and how it interacts with col-***-*?

I've been browsing through the guide found at http://getbootstrap.com/css/ and I'm having trouble grasping the purpose of the "row" class. I experimented with some examples provided in the guide like: <div class="row"> <div class="c ...

Designing a sleek border for form input fields

Seeking assistance in finding a solution as my extensive online search has been unsuccessful. Currently, I have this code to style my form labels: label { display:inline-block; height: 15px; width: 350px; float: left; padding: 5px; ...

jquery mobile integrated seamlessly between image1 and image2

One issue I'm facing with jquery.mobile is that there seems to be a gap between photo1 and photo2 when displayed on my mobile device. Any suggestions on how to eliminate this space and have the images appear seamlessly next to each other? Thank you in ...

Scrollbar becomes inactive following the loading of AJAX content

Having an issue with loading a div using Ajax. The div loads, however the scrollbar within it stops working afterwards. In Main.html, I load content from other HTML files like so: <div id="content1" > </div> The content is loaded as follows: ...

Look into HTML and JavaScript problems specific to IOS devices

I have encountered some HTML markup and JavaScript functionality issues on my web-app that seem to only occur on iPad and iPhone. Unfortunately, I do not have access to any iOS devices to debug these problems. How can I replicate and troubleshoot these i ...

Automatic table width expansion with CSS

I'm in the process of creating a new website, and I want the layout to resemble the following: +---+--------------+ |# | | |n | #page | |a | table.basic | |i | | |g | | |a | | |t | ...