Designing a form within a div container while ensuring that the content remains contained

I've been struggling to perfect this formatting for quite some time now. While I've come across many similar examples to what I'm aiming for, I just can't seem to get it right.

My goal is to create a form that will "popup" using JS for users to fill in. I've managed to handle the JS and other styling aspects with no problem, so I've simplified it to the most basic example that still demonstrates what I'm trying to accomplish.

The header section includes fields for "name" and "description" that need to be filled in, and potentially a few other fields dynamically added. The header might expand by a field or two, so the exact height is unknown. I want the rest of the form, a scrollable list, to adapt its size based on the content added to the header.

I've explored numerous suggestions and attempted to use display: flex;, display: table;, and Display: grid; without success.

I believe I'm overlooking a small detail (or perhaps not), and I'm incredibly frustrated at this point after spending days trying to finalize this single form.

Here's my basic form without all my failed attempts. All I want is for the "form-detail" to scroll within the remaining space of the "container". I know I can achieve this by hard-coding the heights, but as stated earlier, extra content can be dynamically added to the "form-header", making its height uncertain.

Essentially, I need the pink area to stay within the green area (and scroll) with a dynamically changing height for the blue area (depending on whether the optional fields are shown or hidden).

Below is the CSS code:

.container {
   position: absolute;
   left: 50px;
   top: 50px;
   width: 400px;
   height: 400px;
   background-color: lightgreen;
   text-align: center;
}
.title {
   margin-top: 5px;
}
.form-header {
   padding-bottom: 10px;
   margin: 5px;
   border-bottom: 2px solid black;
   background-color: lightblue;
}

.form-header input, textarea  { 
   width: 95%;
}

.form-detail {
   margin: 5px;
   background-color: pink;
   overflow-y: scroll;
}

Here's the HTML code:

<div class="container">
  <form>
    <div class="form-header">
      <div class="title">Name</div>
      <div><input type="text"></div>
      <div class="title">Description</div>
      <div><textarea type="text" rows="5"></textarea></div>
      <div class="title">Optional 1</div>
      <div><input type="text"></div>
      <div class="title">Optional 2</div>
      <div><input type="text"></div>
    </div>
    <div class="title">List</div>
    <div class="form-detail">
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
  </form>
</div>

View the Fiddle here: (https://jsfiddle.net/logan5_42/nz418o9d/14/)

Answer №1

To maximize the remaining height of the container, you can implement the following approach:

.container {
   position:absolute;
   left:50px;
   top: 50px;
   width: 400px;
   height: 400px;
   background-color: lightgreen;
   text-align: center;
   overflow: hidden;
   display: table;
}
form {
  display: table-row-group;
   height: 100%;
}
.title {
   margin-top:5px;
   display: table-row;
   width: 100%;
}
.form-header {
   padding-bottom:10px;
   margin: 5px 5px 5px 5px;
   border-bottom: 2px solid black;
   background-color: lightblue;
   display: table-row;
    width: 100%;
}

.form-header input, textarea  { 
   width: 95%;
}

.form-detail {
   margin: 5px 5px 5px 5px;
   background-color: pink;
   overflow-y: scroll;
   display: table-row;
    width: 100%;
    height: 100%;
}
.content-wrapper {
  width:100%;
  height:100%;
  position:relative;
}

.content {
  overflow-y:auto;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
}
<div class="container">
  <form>
    <div class="form-header">
      <div class="title">Name</div>
      <div><input type="text"></div>
      <div class="title">Description</div>
      <div><textarea type="text" rows="5"></textarea></div>
      <div class="title">Optional 1</div>
      <div><input type="text"></div>
      <div class="title">Optional 2</div>
      <div><input type="text"></div>
    </div>
    <div class="title">List</div>
    <div class="form-detail">
    <div class="content-wrapper">
      <div class="content">
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      </div>
    </div>

    </div>
  </form>
</div>

Answer №2

Include the CSS property overflow-y: auto; in the .container class.

Answer №3

To modify the appearance of your container class, you simply need to adjust the CSS accordingly while keeping the existing structure intact.

.container {
   position:relative;
   left:20px;
   top: 40px;
   width: 350px;
   height: 450px;
   background-color: lightblue;
   text-align: center;
   overflow-y: auto;
}

If you prefer a different style for the scroll bar, you can easily customize it by adding the following lines of code:

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f8f8f8; 
}
::-webkit-scrollbar-thumb {
  background: #999; 
}
::-webkit-scrollbar-thumb:hover {
  background: #666; 
}

Answer №4

Try removing the height constraint of 400px from the container class and instead, use min-height as indicated below. This adjustment may resolve the issue you are experiencing.

.container {
   position:absolute;
   left:50px;
   top: 50px;
   width: 400px;
   min-height: 200px;
   background-color: lightgreen;
   text-align: center;
}
.title {
   margin-top:5px;
}
.form-header {
   padding-bottom:10px;
   margin: 5px 5px 5px 5px;
   border-bottom: 2px solid black;
   background-color: lightblue;
}

.form-header input, textarea  { 
   width: 95%;
}

.form-detail {
   margin: 5px 5px 5px 5px;
   background-color: pink;
   overflow-y: scroll;
}
<div class="container">
  <form>
    <div class="form-header">
      <div class="title">Name</div>
      <div><input type="text"></div>
      <div class="title">Description</div>
      <div><textarea type="text" rows="5"></textarea></div>
      <div class="title">Optional 1</div>
      <div><input type="text"></div>
      <div class="title">Optional 2</div>
      <div><input type="text"></div>
    </div>
    <div class="title">List</div>
    <div class="form-detail">
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
  </form>
</div>

Answer №5

I have made some modifications to your demo and resolved the issue. You need to include overflow: hidden in the container class and specify a fixed height for the form-detail class.

.container {
   position:absolute;
   left:50px;
   top: 50px;
   width: 400px;
   height: 400px;
   background-color: lightgreen;
   text-align: center;
   overflow: hidden;
}
.title {
   margin-top:5px;
}
.form-header {
   padding-bottom:10px;
   margin: 5px 5px 5px 5px;
   border-bottom: 2px solid black;
   background-color: lightblue;
}

.form-header input, textarea  { 
   width: 95%;
}

.form-detail {
   margin: 5px 5px 5px 5px;
   background-color: pink;
   overflow-y: scroll;
   height: 140px;
}
<div class="container">
  <form>
    <div class="form-header">
      <div class="title">Name</div>
      <div><input type="text"></div>
      <div class="title">Description</div>
      <div><textarea type="text" rows="5"></textarea></div>
      <div class="title">Optional 1</div>
      <div><input type="text"></div>
      <div class="title">Optional 2</div>
      <div><input type="text"></div>
    </div>
    <div class="title">List</div>
    <div class="form-detail">
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
  </form>
</div>

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

Tips for eliminating flicker upon the initial loading of a webpage caused by dynamic changes in CSS styles through JavaScript

Struggling with the load order of my CSS and JavaScript... Currently, I have a div with a blue background that is styled to appear sliced diagonally. However, upon initial page load (or CTRL+SHIFT+R), there's a brief moment where the slice effect doe ...

Tips for handling value updates when a user clicks a checkbox using jQuery

Having trouble with updating values when a checkbox is clicked. When the checkbox is clicked once, the value is added correctly. However, if the user rapidly clicks on the same checkbox multiple times, the value is not added or subtracted properly and gets ...

Is there a way to position text at the bottom of a card?

Looking to showcase multiple articles on a single page? I utilized Bootstrap 5 cards to create a visually appealing layout. While everything turned out as I hoped, the only issue I'm facing is that the "read more" link is not positioned at the bottom ...

Transforming JSON data into an HTML template

Incorporating Angular 6 in my project, I have come up with the following templates: Header, Left panel, Body part, Footer Header, Left panel, Body part, Right panel, Footer Header, Body part, Footer Considering the numerous templates, I am aiming to tran ...

Scraping data from Mass Lottery's website with the help of Beautiful Soup

I am currently using beautiful soup to extract all the keno numbers that have ever been drawn. While I have a good understanding of how to achieve this, I am encountering an obstacle. My goal is to retrieve both the game numbers and the corresponding winni ...

Insert the characteristics of the object into the header of the table, and populate the rows of the table

I have created an HTML table that displays specific object properties when the mouse hovers over a designated object. For example, hovering over the dog object will display the dog's name. I want to expand this functionality to also show the cat' ...

Connect to a point on the leaflet map using an external <a> tag reference

I have a leaflet map and I am trying to create a link that, when clicked, will activate a specific marker on the map. Essentially, I want the linked marker to simulate being clicked when the link is clicked. Here is an example of the link: <a href="#" ...

How to Keep PHP Include Visible within the div using Bootstrap 4

I utilized PHP include to add the information inside the modals for the albums, but it is not hidden as specified in the div class where it is included. You can check out the music page on . However, here is the code snippet for the music page where I in ...

The visual symbol is not being shown on the selection box in Mozilla Firefox

I've encountered an issue with a checkbox I created to display a + and - for expand and collapse functionality. HTML Code: <input type=checkbox class="ins" ng-model=show ng-class='{open:show}'><b>Show</b> CSS code: .ins ...

Retrieve the content of a specific HTML tag using JavaScript

Is it possible to extract the content of a specific HTML tag as a string or XML format? <body> <script src="jquery.min.js"> //var test = document.getElementsByTagName("input"); //alert(test[0]); $(document).ready(function ( ...

Utilizing AnimateCSS within a ReactJs component

After installing Animate.CSS with the command npm install animate.css --save, I noticed it was saved in the directory ./node_modules as a locally packaged module. I went through the Animate.CSS documentation on Github, which mentioned that adding class na ...

Having trouble integrating the css and js animation files into my Django project

settings.py import os BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) SECRET_KEY = '@6qt%i+0&_=z0#zl^+!u3bw6c7dmg4e3khboj%7s7439z9#ky(' DEBUG = True ALLOWED_HOSTS = [] INSTALLED_APPS = [ 'django.contrib.admin& ...

How to Align <ul> to the Right in Bootstrap 4

Looking to align a list to the right in the header section, here is the code snippet: <div class="collapse navbar-collapse" id="app-header-nav"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class=" ...

"Which is better for maximizing the efficiency of an image grid: CSS or Jquery? What are the key

As a UX Designer looking to enhance my coding skills, I must admit my code may not be perfect. Please bear with me as I navigate through this process. I am in the process of revamping my portfolio website. The original seamless grid was created using a Ma ...

How can I create a timed slideshow of images?

Is there a way to make a series of images slide automatically after closing or stopping a video? To see the specific website in question, click here: Upon visiting the site, a video pops up. How can I program the image slides to transition every 7 secon ...

Is there a way to show output on render rather than using console.log in node.js?

I have successfully sorted the objects as shown in the link below. My next challenge is to integrate the sorted object into my render function rather than just using console.log(). I'm uncertain if converting it back into an object is the right appro ...

Error: AsyncPipe received an invalid argument of type '[object Object]'. This has caused an error due to an invalid pipe argument

I'm currently working on developing a contact management system that includes CRUD operations using Angular 8 and Spring Boot. Every feature is functioning correctly except for the search functionality. My goal is to search for data based on a specifi ...

Aligning two identical components within the same container when triggered by a single click

Currently, I am exploring Angular 2 and Typescript and have been developing a pager component for a table. The pager functions correctly, but I have encountered an issue with having two pagers - one above the table and one below it. When the next button on ...

Why doesn't "align-self: flex-end" relocate the game board to the bottom of the screen?

Hey there, I am currently working on developing a Connect 4 game and have decided to use a table for the board. To position the board properly, I am utilizing flexbox. Although I have specified align-items as 'flex-end' in order to bring it to th ...

What is the best way to save JavaScript array information in a database?

Currently working on developing an ecommerce website. My goal is to have two select tags, where the options in the second tag are dynamically populated based on the selection made in the first tag. For example, if "Electronics" is chosen in the first tag f ...