Unable to decrease the height of the textbox

Question

Unable to decrease the height of the textbox

Need help adjusting the height of a bootstrap textbox.

     <div class="form-group row">  
<label class="col-xl-3">Posted Speed Limit (mph)</label><input type="text" class="col-xl-1 ps" autocomplete="off" id="sl" onkeydown="return keyval(event)" onkeyup="return valkey(event)" name="num3" required="required"><span id="rspan" class="rspan"><span>&#9888;</span>Enter a numeric value > 0 and ≤ 90</span></input>
</div>

Here is the CSS for the class = "ps":

    .ps{
  min-height: 2%;
}

I'm struggling to adjust the height of the textbox. The width can be modified but not the height. Any suggestions?

html css django bootstrap-4

Answer 1

Answer №1

After testing out your code, I would recommend considering using an ID for better control over the CSS properties. It's possible that the col-xl-1 class CSS is conflicting with your own styles. Another approach you could take is to use !important in your CSS to give it higher priority.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <style>
        #txtBox1 {
            margin: 10px;
            min-height: 50px;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" class="col-xl-1 ps" id="txtBox1">
        <button class="btn btn-primary">Submit</button>
    </form>
</body>
</html>

Answer 2

After testing out your code, I would recommend considering using an ID for better control over the CSS properties. It's possible that the col-xl-1 class CSS is conflicting with your own styles. Another approach you could take is to use !important in your CSS to give it higher priority.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <style>
        #txtBox1 {
            margin: 10px;
            min-height: 50px;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" class="col-xl-1 ps" id="txtBox1">
        <button class="btn btn-primary">Submit</button>
    </form>
</body>
</html>

Unable to decrease the height of the textbox

Answer №1

Similar questions

Display text with ellipsis on one of the two spans within a container

Eliminate unnecessary scrollbar from fancybox iframe

Issues with uploading files

Bokeh and Django are not compatible when it comes to owning models, as there can only be one document owner for each model

Is it feasible to add to an ID using ngx-bootstrap's dropdown feature?

Content that is dynamically generated by a database

Getting the first nested object within an object in Angular 8: A comprehensive guide

Demonstrate a array of values at varying angles within a circle using the functionalities of HTML5 canvas

Ways to update the div's appearance depending on the current website's domain

Ways to transfer JavaScript arguments to CSS style

Bootstrap creates a small and calculated width for elements

Using lxml to extract data from dynamic HTML elements

What is the best way to remove information from the database automatically after one hour has passed?

Switch between divs using an update panel

`To position an element within a div without affecting its layout, use absolute positioning``

Using checkboxes to select all in AngularJS

The copying of array values is not supported by Chromium

Passing the value selected from a datepicker to PHP without refreshing the page through the use of XMLHttpRequest: Guide

Tips for wiping clean and restarting data in a modal?

Utilize the "request" object in a views function without explicitly passing it as an argument