Expanding the Bootstrap panel to a specific size with a scrollable panel-body

Is there a way to create a panel in bootstrap with specific maximum and minimum lengths? My goal is to set a fixed length for the panel body and enable a scroll bar if the text overflows that length.

I've been attempting to increase the length of the panel body along with its border. I've tried using min-height and max-height properties, but they don't seem to be working as expected. Is there another method I can try?

<div class="col-lg-8">
     <div class="panel panel-success">
            <div class="panel-heading">
                 <h4 class="generate-logs">LOGS</h4>
             </div>
                    <div class="panel-body" style="min-height: 10; max-height: 10; overflow-y: scroll;">
                            Step 1: <br> Step 2: <br> Step 3: <br> Step 4: <br> Step 5:
                    </div>
     </div>
</div>         

Answer №1

Make sure to specify appropriate css units for the properties like px, %, or em's.

Consider the following piece of code,

style="min-height: 10; max-height: 10;overflow-y: scroll;"

it must be

style="min-height: 10px; max-height: 140px;overflow-y: scroll;"

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

Guide to switching between 3 classes with mouseover using JavaScript

Currently, I am dealing with an unordered list that contains 4 items. The goal is to have the list grow to 100% of its width when hovered over, while all 'noun hovered li' items should shrink to a width of 0%. Once the cursor leaves, everything s ...

Tips for saving information from a textarea into an HTML file

I have a unique question regarding the usage of $fopen and $fwrite functions. My goal is to include a button named "save as HTML" below a textarea. Upon clicking this button, I want a popup box to appear mimicking the 'save as...' dialog window ...

Validating form inputs with jQuery in a Flask application

Utilizing wtforms in my Flask application, I am interested in validating forms in the browser using jQuery. Here is a snippet of my form code: class LoginForm(Form): email = StringField('Email',[validators.DataRequired(message='Sorry, t ...

Tips for customizing the appearance of an HTML dropdown menu

Here is the code snippet: <select name="xyz" id="abc"> <option value="x">10/Page</option> <option value="y">20/Page</option> <option value="z">30/Pa ...

Is the search feature in the Bootstrap 4 dual listbox plugin experiencing issues?

Using the filter option in Bootstrap 4 dual listbox, I noticed that when two results appear and I select the second option, the first option is automatically added to the list. https://www.jqueryscript.net/demo/Responsive-jQuery-Dual-Select-Boxes-For-Boot ...

Navigate to error page from AJAX request in ASP.NET MVC

If an error is returned from an AJAX call in a MVC application, how can you redirect to the error page Error.cshtml located in the Shared folder? $.ajax({ //Some stuff here... error: function (jqXHR, textStatus, errorThrown) { window.loc ...

Create a log table specifically for tracking changes made to the drop-down menu

I need to create a Change log table that will track any changes made in the drop-down menu. For instance, I am working on a worksheet with a select menu called Results which includes options like Positive, Negative, Unknown. I want the system to log any ch ...

Ways to assign values to HTML table cells

I am facing an issue with two table cells where one span is located outside the td tag and the other is wrapped around td. <tr height="30"> <span data-name="toDD1" class="sstNumber"> </span> <td>Y</td> <span d ...

Querying jQuery - how can I accomplish this task?

I have been experimenting with the modal forms available in jQueryTools. I am interested in implementing these modal forms on one of my web pages, taking inspiration from the example provided here: However, I need to make some modifications to the example ...

Issue in PHP Wordpress when trying to access an index that is

I seem to be facing a common issue that others have experienced, but I can't quite figure out where the problem lies. (I've double-checked the isset() function in my code and it appears fine, yet it's still not allowing an email message to b ...

Creating custom events in a JavaScript constructor function

Just beginning to learn JavaScript. I have a custom function that I want to assign events to in the constructor. var myFunction = function(){ /* some code */ } myFunction.prototype.add=function(){ /* adding item*/ } Now I am looking to add an event to ...

What is the best way to create a repeating Jquery loop in code?

Hey there! I've been working on creating a button that toggles the background color from white to yellow and back again using Jquery. However, I've hit a bit of a roadblock with implementing a loop function. If you'd like to take a look at m ...

What is the best way to include a hyperlink in the same line?

I was curious about how to insert a hyperlink following some text: If you need more information on PCSE, make sure to check out the FAQ section on the PCSE website. (INSERT LINK HERE) <div class="panel-body"> <p>If you require any further inf ...

Tips for keeping your avatar contained within a Bootstrap grid

I am attempting to adjust the positioning of my "image holder" (avatar) with a top and bottom margin of 3px, but when I implement this change, the image holder shifts outside of the grid. Below is the code snippet in question: <div class="container con ...

Why is it that my upvote button seems to only function properly for the initial post?

Following the guidelines from tangowithdjango, I implemented a 'like' button in my forum app. The HTML file and Javascript: <script> $(document).ready(function(){ $("#upvote").click(function(){ var postid; postid = $(this).att ...

When a child is added to a parent in Angular UI Tree, it automatically appears in all parent nodes as well

I've been experimenting with the drag and drop feature of Angular UI Tree, and I've encountered a puzzling issue. The JSON data is fetched from my services. Upon receiving it in my controller, I need to format it correctly by adding an empty arra ...

My React project is unable to import the foundation SCSS file into the App.scss file

After installing zurb-foundation using npm, I attempted to import the .scss file into my App.scss file. Utilizing the "live sass server" for compiling the .scss code into .css code, a .css file was generated but did not display any code despite successfull ...

Using regular expressions to replace all special characters, excluding dots

$('#price').keyup(function(){ $('#price').val($('#price').val().replace(/[_\W]+/g, "-")); }) Experience it firsthand here: http://jsfiddle.net/2KRHh/6/. In the scenario above, special characters are eliminated. ...

What could be the reason for the malfunction of my AJAX post request?

I am facing an issue with my AJAX method in Django - it doesn't seem to be working properly. The problem is, I can't pinpoint where the issue lies because there are no errors showing up in the Django debug log, and it returns a 200 status code. ...

What is the process for incorporating a personalized SVG icon into a fontawesome library stored locally (fontawesome-all.js)?

I am trying to incorporate a custom SVG icon into my local fontawesome library (fontawesome-all.js) that is stored in my project's assets folder. I followed the instructions given on https://fontawesome.com/get-started but I am struggling to understan ...