Height of input-group-append and prepend in Bootstrap 4.0 is displayed incorrectly

Currently utilizing Bootstrap 4 and encountering an issue that I can't seem to resolve. The height of the input-group-append and input-group-prepend elements increases when screen resolution is decreased. You can view the problem in the following animated gif:

https://i.sstatic.net/g5YiX.gif

I've gone through the documentation for input-group but can't identify any issues with my current code, as shown in the snippet below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<hr/>
<div class="row">    
  <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
    <div class="row">
    
      <div class="input-group input-group-sm mb-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <div class="input-group-prepend">
          <span class="input-group-text" id="testPot">Power</span>
        </div>
        <select class="custom-select custom-select-sm">
          <option value="value">text</option>
        </select>
      </div>
        
      <div class="input-group input-group-sm mb-3 col-xl col-lg col-md col-sm col">
        <input type="text" class="form-control">
        <div class="input-group-append">
          <span class="input-group-text">KVA</span>
        </div>
      </div>
    
      <div class="input-group input-group-sm col-xl col-lg col-md col-sm col mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">Y</span>
        </div>
        <input type="text" class="form-control" name="name" value=""/>
        <div class="input-group-append">
          <span class="input-group-text">KVA</span>
        </div>
      </div>

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

Here's the codepen link where the gif was recorded, if you need another source to replicate the issue.

Is there a mistake on my end or is it a Bootstrap bug? How can this be resolved?

Thank you!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

It seems like the issue you're facing is caused by the width of the elements within the columns not fitting properly, resulting in them breaking into multiple lines. Adding some border classes can help highlight this issue. Take a look at the following example where I have simplified the classes for your original approach:

<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<hr/>

<div class="container-fluid">
<div class="row">

  <div class="col-4">
  <div class="row">

    <div class="input-group input-group-sm mb-3 col-md-6 border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text" id="testPot">Power</span>
      </div>
      <select class="custom-select custom-select-sm form-control">
        <option value="value">text</option>
      </select>
    </div>

    <div class="input-group input-group-sm mb-3 col border border-info">
      <input type="text" class="form-control">
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

    <div class="input-group input-group-sm mb-3 col border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text">Y</span>
      </div>
      <input type="text" class="form-control" name="name" value="" />
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

  </div>
  </div>

</div>
</div>

<hr/>

The suggestion here is to place all your inputs within col-12 wrappers instead of col-4, which occupies one-third of the screen width due to the grid system having 12 columns. This allows for better spacing or increasing the main wrapper size. Below are examples demonstrating both approaches:

Example 1: Inputs groups on col-12 wrappers

[Updated HTML code for Example 1]

Example 2: Increase main wrapper width

An alternative solution could be adjusting the size of the main wrapper, such as using col-8 instead.

[Updated HTML code for Example 2]

Answer №2

Give this a shot: HTML:

<div class="search-block" style="display:inline-block;position:relative;">
      <div class="form-input-icon form-input-icon-right">
        <i>KVA</i>
         <input type="text" class="form-control form-control-sm form-control-rounded">
       <button type="button" class="search-block-submit"></button>
    </div>

CSS: 

.form-input-icon > i {
    position: absolute;
    z-index: 1 !important;
    margin: 11px 2px 4px 10px;
    z-index: 3;
    width: auto;
    font-size: 15px;
    text-align: center;
    left: 0;

}

.form-input-icon .form-control {
    padding-left: 34px;
}

.form-input-icon.form-input-icon-right > i {
    left: auto;
    right: 3px;
    margin: 11px 10px 4px 2px;
}

.form-input-icon.form-input-icon-right .form-control {
    padding-left: 16px;
    padding-right: 35px;
}

.search-block {
    position: relative;
}

.search-block .form-input-icon > i {
    margin-top: 5px;
}

.search-block .search-block-submit {
    position: absolute;
    top: -1px;
    right: 0px;
    height: 38px;
    width: 38px;
    background: none;
    border: none;
    z-index: 4;
    cursor: default;
}

See it in action here: http://plnkr.co/edit/kllOdHc7SKeyrC9ZMuzT?p=preview

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

Is there a way to use the same color picker tool for adjusting both the background and text colors simultaneously?

My goal is to create functionality where the user can change the background color by clicking on the background of the div, and change text color by clicking on the text within the div. var box1 = document.querySelectorAll('.color1'); var pic ...

javascripthtmljquerycss

The PHP/MySQLi registration form is displaying a blank white page without any visible output or error messages

Hey everyone, I'm currently working on a simple registration form in PHP and no matter how many times I try to run it, all I get is a blank white page. There are no errors or outputs, just pure emptiness. I was hoping someone could shed some light on ...

phphtmlmysqlformsmysqli

PHP error: Index not defined

One challenge I’m encountering is with a dating site form that includes the following categories: firstname,lastname,username,password,email,mysex,yoursex,relationship,date of birth, and country I've completed the PHP code to send information to a ...

phphtmlmysql

Exploring Angular 7: Understanding the HTML5 Fullscreen API and Overcoming Errors

I am currently using Angular 7 and I am trying to implement a fullscreen button in my app. I have utilized the HTML5 Fullscreen API and created two functions for this purpose: openfullscreen() { // Trigger fullscreen console.log('gg'); ...

angularhtmltypescriptangular-clifullscreen

The Transform feature doesn't seem to be functioning as expected within the Bootstrap

I was experimenting with creating a simple transform transition animation using css and js, so I wrote the following code: (test page) <!DOCTYPE html> <html> <head> <style type="text/css"> *{ ...

javascriptjqueryhtmlcsstwitter-bootstrap

When attempting to use the ResponsiveSlides plugin, the functionality of 'Image links' seems to be disabled in the Chrome browser

While everything is functioning perfectly in Firefox and IE, I've encountered an issue with Chrome. It only works after right-clicking and inspecting the element; once I close the Inspector, it stops working - displaying just an arrow cursor as if the ...

jqueryhtmlcss

Nested jQuery UI Selectable causing propagation problems

My issue lies in the nested jQuery UI selectable functionality. When I click on Item 1, it is selected as expected. However, when clicking on Item 111 or 1111, it selects all the way up to Item 2. What I require is for only the element that is clicked on t ...

jqueryhtmljquery-uijquery-ui-selectable

Implementing Angular2 with conditional loading

One of the requirements for my project is to redirect users to the login page before loading the Angular2 application, without actually loading it. The project is built using angular2-quicksart. After minifying the Angular2 js file: <script> va ...

javascripthtmlangularsystemjs

Struggling to center a MatIcon within a MatButtonToggle component in an Angular project

I've been struggling to center the MatIcon in the MatButtonToggle, trying multiple methods without success. It may seem like a minor issue, but it's causing quite a bit of trouble for me. Can someone please guide me on how to make this adjustment ...

cssangulartypescriptsassangular-material

HTML5, canvas covering every element

Below is the code that I am working with: <html> <head> <title>canvas</title> </head> <body> <canvas width="1745" height="569" style="width: 1730px; height: 1680px; position: absolute; z-index: 1"></canvas> ...

csshtml

Troubleshooting: Style sheets not loading on a page rendered by node

Today was my first attempt at learning Node.js and creating a basic server to display a single page with a header tag. However, I encountered an error stating that the CSS file could not be loaded. This is the code I used: const express = require('ex ...

javascripthtmlcssnode.js

Adding a color picker to a Kendo Grid

I am working with a kendo grid that has inline editing feature. I am looking to add a kendo colorpicker to a specific column. Is there a way to display the selected color even when the row is not in the editing mode? Does anyone have an example of how to ...

javascripthtmlkendo-uikendo-gridkendo-colorpicker

Is there a way to store a class property as a variable using PostCSS?

Looking to store a dynamic property in a variable for use with calc(). There is a class with a height that changes dynamically. .cuerpo-detalle { height: x; } The goal is to create a variable that captures the height property of the .cuerpodetalle cla ...

javascriptcsspostcsscssnext

Post request failed as it was made from a site other than the main page

Having some trouble with the POST functionality in Node since I am new to it. I have a basic website set up, with the following code: app.get('/sign',(req,res)=>{ res.sendFile(path.join(__dirname, 'static', 'index.html' ...

htmlnode.jshttpwebpost

modify the appearance of HTML controls in real time with C#

Is there a way to dynamically add an additional navigation item to my website's menu list when the admin logs in through admin.aspx? The menu list is created using HTML controls such as <ul>...<li>, and I would like the new navigation item ...

c#htmlcssasp.net

In search of advice on the best web-based database management technology

I'm looking to create a prototype for a web-based database manager, similar to the desktop version in the image below, with specific features in mind. Initially, the schema will be provided through a flat file. Considering HTML5 as an option, I am a ...

javascripthtmldatabase-schema

Why dashes are incompatible with inner <span> elements?

Is there a way to make hyphens work on text with <span> elements for highlighting without breaking the algorithm? I don't want a workaround like &shy;. https://i.sstatic.net/JGl1M.png The Code (sandbox: https://codepen.io/anon/pen/ayzxpM): ...

csscss-hyphens

Creating separation between a dropdown menu and its corresponding button

I'm dealing with a situation where I have a button that reveals a hidden droplist upon hover. The problem is that there is no space between the button and the droplist, causing interference with the functionality. My attempt to create some distance b ...

htmlcss

D3 Chart: What is the best way to insert images into a node?

Within the jsFiddle demo provided in this query, there is code displayed. I am curious about how I can assign images to each node. var graph = { "nodes":[ {"name":"1","rating":90,"id":2951}, ] } You can access my jsFiddle Demo through this ...

javascriptjquerycssd3.js

Angular not updating the values in real time

First and foremost, I am utilizing socket.io to emit data. Data is emitted upon connection (so the website does not appear blank) as well as when certain events occur. Upon initial connection or page refresh, everything updates and functions smoothly. Howe ...

javascripthtmlangularjs