Tips on ensuring that PRE elements expand to fit column size without growing when additional data is added

I am facing a design challenge where I have a main card (1) that contains two sub-cards (2 and 3) using Bootstrap columns. Sub-card number 2 adjusts its height dynamically based on the screen size, while sub-card number 3 consists of a code snippet element and buttons. My goal is to make both sub-cards equal in height. The code snippet element will receive new data dynamically, so I need it to have scroll bars for readability purposes. I managed to achieve this by assigning a specific height to the card:

height: 10rem; overflow: auto; display: flex; flex-direction: column-reverse;

However, I want the height to adapt according to the size of sub-card 1, similar to when the height is set to 100%. So, I want it to look like it does with 100% height but function as if it has a specific height set. Is this feasible?

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<div class="mt-1" id="comcard">

  <div class="card">
    <div class="card-header" id="headingOne">
      <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <i class="fas fa-exchange-alt"></i> CARD
          </button>
    </div>

    <div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#comcard">
      <div class="card-body">
        <div class="row">
          <div class="col-sm col-md-5 col-lg-4 col-xl-3">
            <div class="card h-100">
              <div class="card-header">
                CARD 2
              </div>
              <div class="card-body">

                <form>
                  <div class="form-group row">
                    <label for="Select1" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                    <div class="col-sm-7">
                      <select class="form-control" id="Select1">
                        <option selected value="0">1</option>
                        <option value="1">2</option>
                      </select>
                    </div>
                  </div>
                </form>

                <!-- More form elements here -->

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

          <div class="col-sm col-md-7 col-lg-8 col-xl-9">
            <div class="card h-100">
              <div class="card-header"> CARD 3 </div>
              <div class="card-body d-flex flex-column">
                <div class="card" style="height: 100%; overflow: auto; display: flex; flex-direction: column-reverse;">
                  <div class="card-body" id="terminal_div">
                    <pre id="terminal_pre"></pre>
                  </div>
                </div>

                <fieldset id="group_io">
                  <div class="input-group mt-2">
                    <select class="custom-select col-sm-2" id="io_select">
                      <option value="0" selected>1</option>
                      <option value="1">2</option>
                    </select>
                    <input type="text" class="form-control">
                    <div class="input-group-append">
                      <button class="btn btn-outline-success" type="button">Send</button>
                    </div>

                    <button type="button" class="btn btn-secondary ml-2">Clear</button>
                  </div>
                </fieldset>
              </div>
            </div>
          </div>

        </div>

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

</div>

Pre tag with 100% height (Expands indefinitely with new data):

https://jsfiddle.net/Fperola/kL17ewpv/17/

Pre tag with specific height (e.g., 10rem) (Adds scroll bars but not responsive to different screens):

https://jsfiddle.net/Fperola/kL17ewpv/16/

csstwitter-bootstrapbootstrap-4pre

Answer №1

It seemed impossible to achieve with just CSS, so I had to resort to using jQuery for the solution. Here are the key steps that were taken:

  • Assigned IDs card2 and card3, along with a class ourClass for simplicity
  • Modified the inline style to 
    overflow-y: scroll; display: flex; flex-direction: column-reverse;
  • Implemented jQuery logic to fetch results from #card2 and adjust #card3 accordingly

Below is the functional code snippet. For the full effect, please run it on a full page:

setInterval(function() {
  $('#terminal_pre').append("123");
  $('#terminal_pre').append("&#10;");
}, 1000);

function setRelevantHeight() {
  var newHeight = $("#card2").height();
  $('#heightHere').text($("#card2").height());
  $("#card3").height(newHeight);
  var newAdjustedHeight = newHeight - 175;
  //console.log("newAdjustedHeight:",newAdjustedHeight);
  $(".ourClass").height(newAdjustedHeight);

}

$(document).ready(function() {
  setRelevantHeight();
})

$(window).resize(function() {
  setRelevantHeight()
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="mt-1" id="comcard">

  <div class="card">
    <div class="card-header" id="headingOne">
      <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <i class="fas fa-exchange-alt"></i> CARD
      </button>
    </div>

... (truncated for brevity) ...            

<p id='heightHere'> this is </p>
</div>

Answer №2

After following the guidance of @Akber Iqbal, I successfully implemented it as intended. I made a few tweaks to enhance its functionality:

  • Included an event call triggered when the main card is displayed, ensuring the correct sizing of the cards on the initial display:

    $('#collapseOne').on('shown.bs.collapse', function (){
    setRelevantHeight();
 });

  • Utilized a fieldset that contains the elements within the body of card 2 as a reference for determining the height of this card:

    function setRelevantHeight() {
  let newHeight = $("#fieldsetcard2").height();
  let temp = newHeight + 91;
  $("#card3").height(temp);
  let newAdjustedHeight = newHeight - 48;
  $(".ourClass").height(newAdjustedHeight);
}

Below is the finalized code snippet:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="mt-1" id="comcard">

  <div class="card">
    <div class="card-header" id="headingOne">
      <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <i class="fas fa-exchange-alt"></i> CARD
      </button>
    </div>

    <div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#comcard">
      <div class="card-body">
        <div class="row">
          <div id='card2' class="col-sm col-md-5 col-lg-4 col-xl-3">
            <div class="card h-100">
              <div class="card-header">
                CARD 2
              </div>
              <div class="card-body">

                 <fieldset id="fieldsetcard2">
                  <form>
                    <div class="form-group row">
                      <label for="Select1" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                      <div class="col-sm-7">
                        <select class="form-control" id="Select1">
                          <option selected value="0">1</option>
                          <option value="1">2</option>
                        </select>
                      </div>
                    </div>
                  </form>

                  <form>
                    <div class="form-group row">
                      <label for="Select2" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                      <div class="col-sm-7">
                        <select class="form-control" id="Select2">
                          <option selected value="0">1</option>
                          <option value="1">2</option>
                        </select>
                      </div>
                    </div>
                  </form>

                  <form>
                    <div class="form-group row">
                      <label for="Select3" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                      <div class="col-sm-7">
                        <select class="form-control" id="Select3">
                          <option selected value="0">1</option>
                          <option value="1">2</option>
                        </select>
                      </div>
                    </div>
                  </form>

                  <form>
                    <div class="form-group row">
                      <label for="Select4" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                      <div class="col-sm-7">
                        <select class="form-control" id="Select4">
                          <option selected value="0">1</option>
                          <option value="1">2</option>
                        </select>
                      </div>
                    </div>
                  </form>
                </fieldset>

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

          <div id='card3' class="col-sm col-md-7 col-lg-8 col-xl-9">
            <div class="card h-100">
              <div class="card-header"> CARD 3 </div>
              <div class="card-body d-flex flex-column">
                <div id="temp_id" class="card ourClass" style="overflow-y: scroll; display: flex; flex-direction: column-reverse;">
                  <div class="card-body " id="terminal_div">
                    <pre id="terminal_pre"></pre>
                  </div>
                </div>

                <fieldset id="group_io">
                  <div class="input-group mt-2">
                    <select class="custom-select col-sm-2" id="io_select">
                      <option value="0" selected>1</option>
                      <option value="1">2</option>
                    </select>
                    <input type="text" class="form-control">
                    <div class="input-group-append">
                      <button class="btn btn-outline-success" type="button">Send</button>
                    </div>

                    <button type="button" class="btn btn-secondary ml-2">Clear</button>
                  </div>
                </fieldset>
              </div>
            </div>
          </div>

        </div>

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

</div>

View the updated code here.

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

The functionality of aria-expanded is not functioning properly when set to false

Having trouble with the bootstrap accordion feature. When the page loads, the accordions are expanded by default instead of being collapsed. I want them to start collapsed and then expand when clicked. Here is the HTML code: <!DOCTYPE html> &l ...

jqueryhtmlcsstwitter-bootstrapweb-deployment

interactive symbols in a reorganizable tree structure

I have been developing a customizable tree list for our users to arrange their website content. It allows them to add and rearrange pages by dragging and dropping. Each list item includes the page name and three icons (lock, visible, and edit). The challe ...

javascriptjqueryhtmlcssjquery-ui

Ways to utilize CSS for capturing user-inputted text in a text field

I have a question about incorporating user input text into CSS styling. Specifically, I am looking to create a color background option (#ffffff) where the designer can input their own color and have it displayed once saved in the body background style. Wh ...

cssbackground-colorshopifyliquid

I am looking to have two elements positioned next to each other in equal dimensions, such as the reCaptcha feature

Could someone assist me in positioning these elements side by side, each taking up 50% of the screen? I'm unsure if this can be achieved while using the reCaptcha iFrame. <div class="g-recaptcha" data-sitekey="sitekey" style="transform:scale(0.5); ...

htmlcss

How can I reference a Bootstrap icon in the buttonImage attribute of a jQuery datepicker?

How can I customize the jQuery datepicker button image? I want to use the Bootstrap calendar icon as the button image for the jQuery datepicker. The icon image can be referenced in the HTML page like this: <i class=icon-calendar></i> When us ...

twitter-bootstrapiconsangularjsjquery-ui-datepickerangular-ui

Adding a translucent overlay on top of a background image within a div, while keeping the text on top

Here is the current code that I am working with: <div class="square"> <div id="wrapper"> <h2>Text</h2> <h3>Text</h3> </div> </div> .square { padding: 10px; width: 150px; height ...

htmlcssimagebackgroundhover

Clearly define where each navigation bar item should be displayed within your Django application using Bootstrap

I've been attempting to specify the exact page where this navbar dropdown should be displayed. I attempted adding this line: {% if request.resolver_match.url_name == 'club_selection' %} class = "active" {% endif %} but it doesn&ap ...

htmldjangotwitter-bootstrap

Is it possible to vertically resize just one of three divs to match the size of the window?

I'm facing a challenge in creating a responsive webpage with multiple divs. Here is the structure I am trying to achieve: <div id="container"> maximum width of 1200 and height of 1000 <div id="vertically-static-top">20 pixels high< ...

htmlcssresizeresponsive

What is the best way to incorporate a button that, when clicked, reveals two separate images on the frontend?

describe food option heredescribe juice option hereHow can I create a button using HTML, CSS, JavaScript, and Bootstrap that displays different images for food and juices when clicked? For example, clicking on "food" will display 3 different food images, w ...

javascripthtmlcssbootstrap-4bootstrap-5

Alter certain terms in HTML and update background using JavaScript

I want to create a filter that replaces inappropriate words and changes the background color using JavaScript. Here is what I have so far: $(document).ready(function () { $('body').html(function(i, v) { return v.replace(/bad/g, &apos ...

javascriptjquerycsshtml

Avoid cascading of the 'display' property in JavaScript styling to prevent inheritance

Is there a way in Javascript to toggle the visibility of a larger portion of HTML without affecting inner display properties with display: <value>? Despite setting an outer display property using Javascript, the inner display properties are also alt ...

javascripthtmlcss

Having issues with a Retina iPhone interacting with a website built using responsive Twitter Bootstrap

I'm currently utilizing Twitter Bootstrap alongside responsive CSS for a web page that is optimized to run in a UIWebView. My goal is to ensure the consistency of the page's appearance across all iPhones, with an exception for images. These imag ...

iphonecssiostwitter-bootstrapresponsive-design

Kindly make sure that the package.json file contains a valid "main" entry

Just added Bootstrap to my React project using npm. Imported Bootstrap with the following code: import 'bootstrap/dist/css/bootstrap.min.css'; However, I encountered an error that says: Cannot find module 'D:\project\my-app\n ...

reactjsnpmbootstrap-4import

Is there a way to position the button on the right side rather than the center using a negative right Y value?

I'm looking for something that: Has a button on the right side, not just beside the input. The current setup involves using an unattractive width: 138%, which doesn't consistently work across different browsers and devices. The button ends up a ...

htmlcssbootstrap-5

What is causing the colored SVG to appear lighter than the intended color after using a mask to recolor it?

I have a project using VueJS where I am trying to change the color of SVGs by looping through them and using mask and rect tags. However, I am noticing that as the icon index increases, the color of the icon becomes lighter. What could be causing this issu ...

htmlcsssvgmaskrect

Remove the footer from the main section

I'm facing an issue with the web page layout of my website. Here is a snippet of the structure: <body> <div class="container"> <div class="sidebar"> </div> <div class="content"> </div> </div> < ...

htmlcss

Changing date format in Mui DatePicker

I need some assistance with customizing the mui DatePicker. Specifically, I would like to set the date format to display as Day, DD Month. For example: Monday, 10 September Below is the code snippet I am currently working with: <LocalizationProvider d ...

htmlcssreactjsdatematerial-ui

Tips for aligning the timing of two CSS animations

I'm struggling to achieve a synchronized CSS animation where a progress bar fills up and a background changes simultaneously. For example, I want the progress bar to fill in 5000ms, with the background image changing every 5000ms as well. Despite se ...

css

Adding margin to an HTML element causes the entire page to shift downward

Despite successfully applying margin to other elements, I encountered an issue with #searchbarcontainer where it causes the entire page to shift downward. My goal is to center it slightly below the middle of the page, but I'm struggling to find a solu ...

htmlcssbootstrap-5

Distribute the elements evenly between two separate divs

Hello everyone! I have a unique challenge that I hope someone can help me with. I have a list of links to various tests, but different sections require these links to be displayed in different ways. One section needs them spread over two columns, while an ...

htmlcsslist