What steps can be taken to ensure that the content in column two does not impact the positioning of content in column one?

Is there a way for the input text container to remain in its original position within the layout even after submitting text? Usually, when the data displayed container's height increases, it pushes the input text container down.

Despite trying absolute positioning, everything works fine until I submit the text. After that, I am unable to use the text area or submit button without reloading the page. Could this be caused by the contents of the input container shifting?

Although I attempted using position absolute, it rendered the input unusable after a single submit. Removing it caused the input container to move to the bottom. I also tried using transform: translate(-50%, -50%) and moving all children of the input container, but to no avail.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bdbda6a1a6a0b3a292e7fce1fce0">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="container position-relative">
  <div class="row">

    <!-- First container -->
    <div class="col-12 col-md-3 order-1 order-md-0">
      <div class="card text-center">
        <h2>Car Park Number</h2>
      </div>
    </div>

    <!-- 2nd container with position-absolute -->
    <div class="col-12 col-md-3 input-container order-2 position-absolute mb-5">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Enter Car Park Number Prefix:</h5>
          <textarea class="form-control" id="carParkNumberInput" rows="3" placeholder="Enter prefix (e.g. TY)" oninput="validateInputForPrefix(this)"></textarea>
          <button class="btn btn-primary ripple mt-3" id="submitPrefixBtn">Submit</button>
        </div>
      </div>
    </div>

    <!-- 3rd container -->
    <div class="col-12 col-md-9 order-0 order-md-1">
      <div class="card custom-height-card">
        <div class="card-body">
          <div id="yourContainerId" class="row"></div>
        </div>
      </div>
    </div>

  </div>
</div>

Answer №1

Absolutely positioning is not commonly used in a primary layout. It should only be implemented if you understand its purpose, which involves removing the element from the normal document flow.

When setting up your layout, it is important to consider the overall structure. For example, when trying to create three columns, you may actually only have two. The first column may have two stacked children, while the second column has one child. Ensuring the correct setup means that the content of the second column will not affect the height or position of the first column.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64060b0b10171016051424514a574a56">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="container position-relative">
  <div class="row">

    <!-- First container -->
    <div class="col-3">
      <div class="card text-center">
        <h2>Car Park Number</h2>
      </div>

      <div class="input-container mt-3 mb-5">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Enter Car Park Number Prefix:</h5>
            <textarea class="form-control" id="carParkNumberInput" rows="3" placeholder="Enter prefix (e.g. TY)" oninput="validateInputForPrefix(this)"></textarea>
            <button class="btn btn-primary ripple mt-3" id="submitPrefixBtn">Submit</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 3rd container -->
    <div class="col-9">
      <div class="card custom-height-card">
        <div class="card-body">
          <div id="yourContainerId" class="row">
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</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

How to access a variable from within a Phonegap DB function and return it outside of the

I'm struggling with a phonegap db JavaScript script that isn't returning the final string variable "feeds" outside the function. It's currently showing as "undefined". I need help making the necessary changes to properly return the "feeds" v ...

Can you explain the steps to implement this feature in a modal window using jQuery?

My HTML list contains a bunch of li elements. ul li img .det li I am looking to create a modal popup that appears when I click on something. I want this modal popup to have previous and next buttons, preferably implemented using jQuery. I have alr ...

responsive position absolute to the auto width of position absolute

Here is an example of my CSS code: https://jsfiddle.net/80e4u0dd/ When you hover over the orange box, the a element gets underlined. The orange box needs to stay above the "long text" in the green box, just like it is currently. The issue is that the oran ...

Attempting to execute a PHP script through a JavaScript if statement

I have a form that requires validation with JavaScript. In one of the if statements, after all other conditions have been validated, I want to execute my PHP script that updates an SQL database with one of the passwords. Here is the final validation code: ...

What could be preventing my logo from properly resizing with html/css?

* { box-sizing: border-box; padding: 0; margin: 0; } ul { list-style-type: none; } .nav-links, .logo { text-decoration: none; color: #000; } .logo { max-width: 80%; width: 20%; height: 20%; } .navbar { padding: 20px; height: 50vh; ...

BorderContainer and ContentPane dojo widgets combine to create a powerful layout system

Currently, I am in a traineeship at a company where I need to use a program developed by another trainee back in 2012. I have made some updates to the program, but encountered an issue: In the original report, the web page had a layout with a column on th ...

Fetch operates based on the specified categoryId

Hey there, I'm currently in the process of learning JS and trying to fetch data from an API. I've successfully fetched all the work from api/works and displayed them in a div. Now, I'm looking to create 3 buttons that represent 3 categories ...

Sending values to URL using the <a> tag in HTML

I currently have the selected language stored in a variable (var lan= urlParam('language')). I am trying to pass this language as a parameter (without PHP) in a URL within an "a" tag, like so: <a href="http://hotelscombined.sitewish.gr/HotelN ...

Trying to showcase information received from a server using an API

For a school project, I am developing a website that can retrieve weather data (currently just temperature) based on a city or zip code from openweathermap.org using an asynchronous call. I have successfully retrieved the data from the API, but I am strug ...

I prefer boxes to be aligned next to each other without any gaps, and I won't be

In my quest to showcase 3 boxes seamlessly lined up in a row, I am faced with the challenge of eliminating spaces between them. My goal is to accomplish this feat without resorting to the font-size property. html,body { height:100%; width ...

What is the correct way to integrate HTML input elements into JavaScript code without encountering a type error?

I'm having some trouble with this code snippet. It's my first time coding and I can't figure out what's causing the issue. The error message I'm receiving is: "TypeError: Cannot read properties of null (reading 'value&ap ...

The lobster custom font is malfunctioning in Internet Explorer

I am trying to use the unique font called lobster. After downloading the lobster.woff2 file, I stored it in the font folder. In my custom CSS, I added the following: @font-face { font-family: 'Lobster'; font-style: normal; font-weight: 40 ...

Customizing the cursor for disabled custom controls in Bootstrap 4

I'm having trouble changing the cursor for disabled custom-control elements like checkboxes and radiobuttons. The following style isn't working as expected: .custom-control-input:disabled ~ .custom-control-label::before { cursor: not-allowe ...

Learn how to toggle the display of a div using jQuery, just like the functionality on the popular website

Visit Mashable here Below is the script I am currently using: $(document).ready(function(){ $(".show_hide5").mouseover(function(){ $('.selected').removeClass('selected'); $(this).next().fadeIn("slow").addClass(&apo ...

ways to add spacing between bootstrap columns

I am currently using Bootstrap 5 and I'm trying to create a row with 6 columns. I have added gutter in the row but for some reason, the spacing between the columns is not being applied. Can anyone help me figure out what I'm doing wrong here? Bel ...

Tips for extracting both the div and entire inner content using JavaScript

I need to retrieve the inner content of a div using JavaScript For example: <div id="content" style="height: 20px; overflow: hidden"> content<br>content<br>content<br> </div> This is my HTML code. I only know the div&apos ...

What are the steps to add 8 columns to the second row in my table?

this is an example of HTML code that showcases a table structure with multiple rows and columns. You can view the full code snippet here. The table includes different sections, such as section1, section2, section3, and section4 in the first row (tr). In t ...

Ways to manipulate the content of a div

HTML <span class = "Box"> <div class = "active"> <a href ="#-night"> <span class ="list">4</span> <span class="locations"><?php echo $location; ?></span> <span ...

Incorporating HTML5 audio elements in JavaScript

I am working on a project where I need to create a grid of 16 audio files with separate links for each in HTML, CSS and JavaScript. Each box in the grid should link to a different audio file. My initial thought was to use a table to achieve this, so I cre ...

"The functionality of the personalized checkbox is not working as expected

Having an issue with my custom checkbox where only the first one gets selected when I select the bottom checkbox. I suspect it might be a styling problem, but I'm unsure. I've recreated the issue in a sandbox for you to check out: https://codesan ...