Creating a responsive container in Bootstrap that adjusts height dynamically, featuring a text input box positioned at the bottom

I am currently using Bootstrap 4 to design a desktop chatbot inspired by Google's Bard. My goal is to have a container that spans the height of the screen, with the text input located at the bottom of the container. Additionally, I want the container to have a scrollbar in case the user inputs and responses exceed the container size, while ensuring that the text input always stays at the bottom.

My attempt so far involved:

.col-md-9 {
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem;
  background-color: #fff;
  display: flex;
  position: absolute;
  bottom: 0;
  align-items: flex-end;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.full-page {
  height: 100vh;
  overflow-y: scroll;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17757878636463657667572239253924">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43212c2c37303731223303766d716d70">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div style="text-align: center;">
  <div style="display: inline-block; text-align: justify;">

    The UK Supreme Court has been hearing an appeal from PACCAR Inc and others against the Competition Appeal Tribunal and others. The case revolves around the legality and effectiveness of third-party litigation funding arrangements. The key issue is the
    interpretation of a statutory definition, specifically whether litigation funding agreements (LFAs) that entitle the funder to a percentage of any

    <div class="container-fluid border pt-3" style="full-page">
      <pre><div id="result"></div></pre>
      <div class="col-md-9">
        <textarea id="input_text" name="input_text" placeholder="Enter a prompt here"></textarea>
        <br />

        <button type="submit" id="submit-btn" name="submit-btn" value="{{ summary['id'] }}" class="btn btn-primary float-right">
      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" id="spinner" style="display: none"></span>
      
      Submit</button>
      </div>

      <br><br><br>
    </div>

  </div>
</div>

I also experimented with 

<div class="fixed-bottom">...</div>
, but found that it caused the input text to stretch across the entire screen. While this method could work, I need assistance with customizing it to fit my needs. Essentially, I aim to replicate the layout of Bard.

https://i.sstatic.net/ZLRln.png

Challenges I've encountered:

  1. The container fails to expand to the full height of the screen.
  2. Difficulty in positioning the text input at the bottom of the container with equal width.
htmlcssbootstrap-4

Answer №1

You're currently using the 'full-page' class within the style attribute. To apply the class styling correctly, consider moving it to the class attribute of the div element.

.col-md-9 {
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem;
  background-color: #fff;
  display: flex;
    bottom: 0;
  position: sticky;
  height: 50px;
  top: calc(100% - 50px);
  align-items: flex-end;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.full-page {
  height: 90vh;
  overflow-y: scroll;
}
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89a97978c8b8c8a9988b8cdd6cad6cb">[email protected]</a>/dist/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a667a67">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div style="text-align: center;">
    <div style="display: inline-block; text-align: justify;">

      The UK Supreme Court has been hearing an appeal from PACCAR Inc and others against the Competition Appeal Tribunal and others. The case revolves around the legality and effectiveness of third-party litigation funding arrangements. The key issue is the
      interpretation of a statutory definition, specifically whether litigation funding agreements (LFAs) that entitle the funder to a percentage of any

      <div class="container-fluid border pt-3 full-page">
        <pre><div id="result"></div></pre>
        <div class="col-md-9">
          <textarea id="input_text" name="input_text" placeholder="Enter a prompt here"></textarea>
          <br />

          <button type="submit" id="submit-btn" name="submit-btn" value="{{ summary['id'] }}" class="btn btn-primary float-right">
      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" id="spinner" style="display: none"></span>
      
      Submit</button>
        </div>

        <br><br><br>
      </div>

    </div>
  </div>
</body>
<html>

I've made enhancements to the code based on the issues you highlighted in your comment. By changing 'position:absolute;' to 'position:sticky;', you can set the page's height as desired while keeping the input at the bottom of the page.

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

Utilizing CSS classes and IDs for unordered lists

What's the correct way to write it when the ul is a class instead of an id? ul#Menu li a{} ul.Menu li a{} isn't functioning correctly ...

css

The Bootstrap navigation bar vanishes when viewed on mobile devices

I've integrated Bootstrap 5 with my navbar, but when viewed on a mobile device, the buttons disappear. Even hovering over them doesn't display anything. Is there a solution for this issue? Below is the code snippet: <nav class="navbar na ...

htmlcssbootstrap-5

Utilizing inline styles with the asset pipeline feature in Rails

<%= link_to root_path do %> <div class=""> <div style="background-image:<%= image_tag " image1.png "%>"> </div> <div> <h2>Title</h2> <p>Paragraph</p> </div& ...

cssruby-on-rails-5asset-pipeline

Ways to reduce the size of images within a bootstrap carousel

I'm currently working on creating a carousel that will serve as a background image cover for my website, similar to the revolutionary slider in WordPress but without using a plugin. I am developing it specifically for my static website. The challenge ...

javascriptjqueryhtmlcsstwitter-bootstrap

NodeJS for CSS Parsing and Selecting

Can anyone recommend a NodeJS library similar to https://github.com/alexdunae/css_parser? I have tried using https://github.com/visionmedia/css, but it doesn't fulfill all my requirements. For example, when I parse the following CSS: .behavior1 {co ...

cssnode.js

`Is it challenging to convert JSON into HTML, leading to undefined results?`

I am currently attempting to extract YAHOO data by utilizing getJSON and YQL. Although the connection is successful, I can retrieve the data and log it in the console. However, I am facing difficulties when trying to display this data on the JSP page I am ...

javascripthtmljson

Is it advisable for a component to handle the states of its sub-components within the ngrx/store framework?

I am currently grappling with the best strategy for managing state in my application. Specifically, whether it makes sense for the parent component to handle the state for two subcomponents. For instance: <div> <subcomponent-one> *ngIf=&qu ...

htmlangulartypescriptngrx

Encountering an error that states "this.push is not a function" when trying to select the 2nd or 3rd option

My goal is to extract elements from a drop-down menu and populate a list box based on the selection. The selected value from one list box should then be transferred to another list box, specifically from Available to Selected. However, while selecting Deve ...

htmlangularjsarrays

Positioning the label for a Material-UI text field with an icon adornment when the shrink property is set

https://i.stack.imgur.com/E85yj.png Utilizing Material-UI's TextField, I have an Icon embedded within. The issue arises when the label "Your good name here" overlaps the icon instead of being placed beside it. This problem emerged after I included ...

javascriptcssreactjsmaterial-ui

grab the content from a text editor and insert it into a div element

Currently, I am trying to extract text from my content editable div and place it in another div (similar to the one seen on stack overflow). However, I am encountering a frustrating issue. 1. My content div seems to be lagging behind. When I type in my ed ...

javascripthtmlcss

Bring JavaScript Function into Vue's index.html File

Recently in my code files, I noticed the following: function example() { console.log("testing"); } In another file, I have something like this: <head> <script src="../src/example.js" type="text/babel"></sc ...

javascripthtmlvue.js

using ng-class or ng-style for displaying error messages when validating a text area content

I'm curious about the most effective "angular" method for changing the character count style for validation purposes. I have a text area with a 250-character limit. Instead of restricting users to exactly 250 characters, we want to allow them to excee ...

javascriptcssangularjs

Switching the arrow direction in Bootstrap 4 menu toggles

I'm a beginner with Bootstrap 4. My navigation menu includes a dropdown item with the standard caret pointing down, added automatically by Bootstrap. Now, I want to make the caret point up after opening the dropdown menu for the nav item. Despite ext ...

jquerycsstwitter-bootstrapbootstrap-4caret

Breaking Long Strings into Multiple Lines Using React Material UI Typography

Currently, I am working with ReactJS and incorporating MaterialUI components library into my project. However, I have encountered a problem with the Typography component. When I input a long text, it overflows its container without breaking onto a new lin ...

javascripthtmlcssreactjsmaterial-ui

Contact on the go with our handy mobile contact form

Having some difficulties with the contact form on my website. The link to the form is: here. I am currently working on making the form mobile-friendly (the rest of the site scales down using @mobile screen tags in the CSS). The form is stacked, so there ...

htmlcssforms

I am experiencing an issue on my webpage where clicking on the login button does not seem

My website code includes: <form method="POST" action="{% url 'lawyerdash' %}"> {% csrf_token %} Username<input type="text" name="username"><br> Password<input type="password" name="password" ><br> & ...

htmldjango

Tips for stopping Infinite Scroll from loading pages when the tab is inactive

I'm currently developing a website using Bootstrap 4 and jQuery, which consists of 3 tabs, each containing masonry elements loaded on scroll with the Infinite Scroll plugin. I'm trying to figure out a way for the Infinite Scroll to only load cont ...

javascriptjquerybootstrap-4infinite-scroll

The margin-left attribute in HTML does not seem to be functioning properly

When I am working on a .php file, I dynamically generate HTML content (like a template) for each result returned from the search input: while ($row = mysqli_fetch_array($result)) { //image echo "<img id=" . '"' . "myImg" . '"' ...

phphtmlcss

What is the best way to ensure a multi-page form is validated using HTML5 and JavaScript before progressing to the next page?

Currently, there are two functionalities at play. The submit button is not being recognized while the functionality in JS $(".next").click(function(){..} is working as expected. HTML This section involves 4 fieldsets. I am attempting to validate ...

javascripthtmljquerycssbootstrap-4

What are the consequences of submitting a form to a different website through POST method?

Dealing with a CMS that does not offer an easy way to add a NodeJS route for handling form data can be quite challenging. I'm considering the following setup - would this be considered bad practice or unsafe? Server 1 (Ghost CMS) : www.domain.com &l ...

javascripthtmlnode.jsexpressghost-blog