Bootstrap 4 has an enlarged input field when compared to the select input

I am facing an issue with the size of my select field, which appears larger than my two input fields in Bootstrap 4.3. Can anyone provide guidance on how to make the select field match the size of the input fields? Your assistance would be greatly appreciated!

Below is the code snippet:

<div class="container content-center" id="margin">
    <form name="formcalc">
        <div class="form-group row">
            <label for="staticEmail" class="col-sm-2 col-form-label">Output 1</label>
            <select class="col-sm-10 form-control" id="mySelect" onchange="myFunction();setOne();">
                <option value="0">CHF 0</option>
                <option value="75000">CHF 75'000</option>
                <option value="100000">CHF 100'000</option>
            </select>
        </div>
        <fieldset disabled>
            <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label">Output 2</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="n1" name="txtres" value="CHF " readonly>
                </div>
            </div>
            <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label">Output 3</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="n2" name="txtres2" value="CHF " readonly>
                </div>
            </div>
        </fieldset>
        <button type="button" class="btn btn-outline-danger" id="toggle" data-toggle="modal"
            data-target="#exampleModal">
            button
        </button>
    </form>
    <hr class="featurette-divider">

    <section class="container">
        <p class="lead" id="demo"></p>
    </section>
</div>

picture

Answer №1

Don't use col-sm-10 directly on the select element, instead, wrap the select in a <div class="col-sm-10"> - check out the demo below:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<div class="container content-center" id="margin">
  <form name="formcalc">
    <div class="form-group row">
      <label for="staticEmail" class="col-sm-2 col-form-label">Output 1</label>
      <div class="col-sm-10">
        <select class="form-control" id="mySelect" onchange="myFunction();setOne();">
          <option value="0">CHF 0</option>
          <option value="75000">CHF 75'000</option>
          <option value="100000">CHF 100'000</option>
        </select>
      </div>
    </div>
    <fieldset disabled>
      <div class="form-group row">
        <label for="staticEmail" class="col-sm-2 col-form-label">Output 2</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="n1" name="txtres" value="CHF " readonly>
        </div>
      </div>
      <div class="form-group row">
        <label for="staticEmail" class="col-sm-2 col-form-label">Output 3</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="n2" name="txtres2" value="CHF " readonly>
        </div>
      </div>
    </fieldset>
    <button type="button" class="btn btn-outline-danger" id="toggle" data-toggle="modal" data-target="#exampleModal">
            button
        </button>
  </form>
  <hr class="featurette-divider">

  <section class="container">
    <p class="lead" id="demo"></p>
  </section>
</div>

Answer №2

The <fieldset> element is generating padding on its own. Consider relocating the <select> within the <fieldset>, providing it with its designated <fieldset>, or deleting the <fieldset> from the input elements.

Answer №3

To include the select element without a div, try the following:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp" crossorigin="anonymous"></script>  <title>JS Bin</title>
</head>
<body>
<div class="container content-center" id="margin">
    <form name="formcalc">
        <div class="form-group row">
            <label for="staticEmail" class="col-sm-2 col-form-label">Output 1</label>
            <select class="col-sm-10 form-control" id="mySelect" onchange="myFunction();setOne();">
                <option value="0">CHF 0</option>
                <option value="75000">CHF 75'000</option>
                <option value="100000">CHF 100'000</option>
            </select>
        </div>
        <fieldset disabled>
            <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label">Output 2</label>
             
                    <input type="text" class="form-control col-sm-10" id="n1" name="txtres" value="CHF " readonly>
           
            </div>
            <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label">Output 3</label>
          
                    <input type="text" class="form-control col-sm-10" id="n2" name="txtres2" value="CHF " readonly>
              
            </div>
        </fieldset>
        <button type="button" class="btn btn-outline-danger" id="toggle" data-toggle="modal"
            data-target="#exampleModal">
            button
        </button>
    </form>
    <hr class="featurette-divider">

    <section class="container">
        <p class="lead" id="demo"></p>
    </section>
</div>
</body>
</html>

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

Increase in textbox size depending on selected dropdown value

Our concept involves offering three choices: Email #1 pulled from the database Email #2 retrieved from the database Input a new email Should the user select option #3, a textbox will expand at the bottom of the dropdown menu for easy entry of a new emai ...

Creating a List with Sublists that are displayed when hovering over the parent List is a key element of effective design

Hovering over 'View Rows' should open up both New Records and Old Records <div> <li>Add Rows</li> <li>DeleteRows</li> <li>View Rows <ul> <li>View New Records</li ...

Displaying a message text upon successful AJAX request

I have a web page with an AJAX request that updates data in the database. After the update, I want to display a message to the user on the webpage confirming that the data has been successfully updated. However, currently, no message is being displayed and ...

The JQuery File-Upload plugin remains inactive even after a file has been chosen

I am currently working on integrating the JQuery File-Upload plugin (). The issue I'm facing is that it doesn't respond when a file is selected. Here are some potential problems to consider: No errors appear in the Chrome console. Selecting a ...

JavaScript Evaluation Test Outcome

(Apologies, I am still in the process of learning JavaScript) My goal is to create a checklist quiz that provides different outcomes based on the number of checkboxes selected by the user. There are a total of 7 checkboxes, and if the user selects 1 or few ...

Anticipated the server's HTML to have a corresponding "a" tag within it

Recently encountering an error in my React and Next.js code, but struggling to pinpoint its origin. Expected server HTML to contain a matching "a" element within the component stack. "a" "p" "a" I suspect it may be originating from this section of my c ...

Emphasizes the P tag by incorporating forward and backward navigation options

My goal is to enable users to navigate up and down a list by pressing the up and down arrow keys. For example, if "roma" is currently highlighted, I want it to change to "milan" when the user presses the down arrow key. Here is the HTML code I am working w ...

Guide on how to use JavaScript to upload media stream recorder blobs onto YouTube using the YouTube API

Using mediastreamrecorder.js, I am successfully recording video in 5-second blobs within the ondataavailable function. Here is an example of the code: mediaRecorder.ondataavailable = function(blob) { blob=blob; }; While I am a ...

Dynamic Label Editing on ASP Page Using Master Page

I am working on an ASP page with a Masterpage element on my website. The specific functionality I am trying to implement involves having multiple labels with an edit hyperlink next to each one. When the user clicks on the Edit hyperlink, I want the label t ...

HTML5 Canvas Border

Hey Everyone, I've been working on an HTML5 canvas project where I set the canvas width to $(window).width(). Everything was going smoothly until I added a border, which caused a horizontal scroll to appear. Important: I attempted to use the innerWid ...

JavaScript function is not identifiable

I am currently developing a tic-tac-toe game with 9 buttons that will display either an X or O image depending on the boolean value of the variable isX. The main container for these buttons is a div element with the id 'stage' and each button ha ...

Issue with Next.js: Setting the width to 100vh prevents the height from being responsive on mobile devices

While I understand that using height: 100vh on mobile is generally discouraged for various reasons, I'm curious as to why height: 100vh paired with width: 100vh in Next.js doesn't produce the expected result. Instead of a full-height square, I en ...

Minor Chrome compatibility problems with CSS alignment

As someone who is new to stackoverflow, I've always found it to be a valuable resource for answers. I've had success building HTML 5 banner ads using GSAP (Greensock Animation Platform) in the past, but now I'm facing a CSS alignment issue t ...

Increase the Step Size of an HTML Number Input by Holding Down the Time

Is there a way to implement increasing increment/step size for number inputs in HTML based on how long the user holds the stepper arrows? For instance, starting at step size=1 and gradually ramping up to larger increments like 5, 10, 20, etc. after holdin ...

HTML5 input type Color displays individual RGB values

This code snippet opens up a variety of options for the user to manipulate different color values such as R, G, B, HEX VALUE, HUE, etc. However, the specific requirement is to only extract the Red value. <input id="color_pick"type="color" value="#ff0 ...

Having trouble with the link attribute not functioning properly for a radio button in Chrome?

<a> hyperlink for radio button is not functioning correctly in Chrome. Here is the code segment in question: <td width='7%' bgcolor='#E8E8E8'> <a href='issue.php?admin=Yes&&user=$user'> <inp ...

Issues with Ajax response causing PHP and HTML submit button to not function properly

When I have an input on my webpage that is linked with AJAX, it searches for a name in the database and returns the result as an HTML form with values from the database. However, the submit button within the form is not functioning properly. Here is a sni ...

I'm curious, what height would be most suitable for a first impression?

I'm in the process of building a website and I want to ensure that all elements are visible within the div without requiring users to scroll. However, I know that screen resolutions vary between computers. What can I do to address this issue? Is ther ...

Increased pixels being incorporated into my line spacing

Looking for a solution: A <div> containing only one word at a font size of 16px with a line-height set to 1. Encountering issues with extra space above the text in Chrome and Firefox, while the text bleeds slightly out of the bottom. IE exacerbates t ...

What is the best way to implement NgClass on a single iteration within NgFor while utilizing parent/child components?

My goal is to toggle the visibility of tiered buttons when a parent button is clicked. I am using ngFor to generate three buttons on tier 1, but I'm struggling to select only the desired tier when clicked instead of affecting all of them. I've m ...