Using Bootstrap: adjusting the height of input-group and select elements

How come the select element within an input-group doesn't render similarly to the input element?

I would like the height of the select element to be relative to the input-group.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">
    <button type="submit" class="btn btn-info">
      <i class="fa fa-3x fa-search" aria-hidden="true"></i>
    </button>
  </span>
</div>

<br>

<div class="input-group">
  <select class="form-control">
    <option>
      Option 1
    </option>
  </select>
  <span class="input-group-addon">
    <button type="submit" class="btn btn-info">
      <i class="fa fa-3x fa-search" aria-hidden="true"></i>
    </button>
  </span>
</div>

Thank you very much :)

csstwitter-bootstrapbootstrap-4

Answer №1

Simply make a small adjustment in your form's stylesheet like so 

select.form-control:not([size]):not([multiple]) {
    height: auto!important;
}
<link href="https://mysite.com/font-awesome.min.css" rel="stylesheet"/>
<link href="https://mysite.com/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">
    <button type="submit" class="btn btn-info">
      <i class="fa fa-3x fa-search" aria-hidden="true"></i>
    </button>
  </span>
</div>

<br>

<div class="input-group">
  <select class="form-control">
    <option>
      Option 1
    </option>
  </select>
  <span class="input-group-addon">
    <button type="submit" class="btn btn-info">
      <i class="fa fa-3x fa-search" aria-hidden="true"></i>
    </button>
  </span>
</div>

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

Page rotates on hover effect with RotateY

How can I get an image to rotate on the Y axis when hovered over? My code works in -moz- but not in -webkit- or -o-. What am I missing? .spin-logo { height: 450px; margin: 0 auto; -moz-transition: transform 2000ms ease 0s; -o-animation: transfor ...

htmlcsstransform

Images that have been resized on Android appear blurry when viewed on the second page

Customizing the Toolbar: #main_bar { background: url(../images/logo.jpg) 99% 50% no-repeat; background-size: auto 80%; } The original size of logo.jpg is 220x266px The toolbar has a fixed height of 46px Therefore, the background image appears t ...

androidcssresizebackground-image

Ensure that Roboto font is utilized on IE 11 and Edge browsers

My goal is to implement the Google Roboto font in my project, but I'm noticing that it doesn't display properly in IE11 / Edge browsers. Below is a snippet of my code: <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

htmlcssfontsroboto

django bootstrap datepicker malfunctioning

Having trouble integrating the Bootstrap datepicker in my project. Here is how I have it set up: settings.py: INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.cont ...

djangobootstrap-4python-3.7

Ensure that all Woocommerce products have consistent height while allowing for variations in width

I am struggling with achieving consistent height for all the products on my website, while allowing for variable widths. I attempted to resolve this using UI, but unfortunately it was unsuccessful. Does anyone have suggestions on how to accomplish this u ...

htmlcsswordpresswoocommerce

Ways to implement a parallax effect by changing images within a specific div on scrolling with the mouse

First and foremost, thank you for taking the time to review my question. I am currently developing a website and I need to implement a vertical image transition effect within a selected division, similar to a parallax effect. Within this div, there are 3 ...

javascriptjqueryhtmlcss

Is it considered acceptable to include paragraph elements within a heading tag in HTML5 (such as putting a <P> inside a <H1

Are paragraph elements allowed inside header tags in HTML5? Put simply, is this markup acceptable in HTML5? What are the implications of using it? <h1> <p class="major">Major part</p> <p class="minor"& ...

csshtmlw3c

Using null or undefined for ternary operator formatting in React applications

When styling a component, what should be used if a specific condition is not fulfilled: null, undefined, or something else? For example: errorStyle: { right: locale === Locales.ARABIC ? 0 : null, left: locale !== Locales.ARABIC ? 0 : null, .. ...

javascriptcssreact-native

The nth-child selector is not functioning correctly with material-ui components

Trying to figure out how to give two paragraphs different background colors using nth-child. Here's the JSX: <div className={classes.paragraphs}> <p>Test 1</p> <p>Test 2</p> </div> And the CSS: const useSty ...

cssmaterial-ui

Error encountered during npm installation caused by the extract-text-webpack-plugin

I encountered an error while attempting to install the extract-text-webpack-pluginpm plugin. extract-text-webpack-plugin <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f12124c5e495a125b5a495e4f4f7f0f110e110f">[email  ...

cssnpmwebpack

Varying spacing among elements with identical classes

I'm facing some styling issues. My goal is to ensure that each h3 tag has the same distance between the bottom border of its container (marked with a pink border) and the bottom border of its parent (indicated in the image below): https://i.sstatic.ne ...

htmlcsssass

What is the process for creating this image using HTML and CSS?

Looking to style an image using HTML and CSS. This is what I attempted: <span>$</span><span style="font-size: 50px;">99</span><span style="vertical-align: text-top;">00</span> However, the result doesn't ma ...

htmlcss

Accordion content in motion

After creating an accordion, I wanted to enhance the user experience by adding a transition effect whenever they click on the accordion header. Even though I included height: auto and transition in the accordion container, it did not seem to have any impa ...

javascripthtmlcss

Utilizing CSS for a specific row within the grid-template-areas placement

Hey there, I'm diving into the world of coding and taking on a new project as a beginner. My goal is to recreate Google's Advanced Search page from scratch. Right now, I'm focusing on creating the header section using the power of display: g ...

htmlcsscss-grid

Steps for altering the primary color in PrimeNG__Changing the primary color

What is the most effective way to modify the default primary color for primeNG (saga-blue theme)? Altering --primary-color does not have the desired effect, as elements in node_modules/..../theme.css are styled using the main color hex rather than '-- ...

cssangularprimeng

Transitioning opacity and visibility in iOS CSS styling

Check out this test on a desktop browser by visiting the following link (JSFiddle): a { background: gray; display: block; margin: 100px; padding: 100px; } a span { opacity: 0; -webkit-transition: 0.5s; visibility: hidden; } a:hover span { ...

cssiosmobilesafaricss-transitions

Ensure that the elements are properly arranged inside divs that have been stretched

My goal is to create divs that are all the same size, while aligning some content within each div differently due to varying lengths. The objective is to keep the icon and text in a consistent position within all divs, but allow the divs to expand at the ...

cssflexbox

Ways to add values to a database through modal window

There are two buttons on the interface: login and register. Clicking the login button opens the login modal, while clicking the register button should open the register modal. My objective is to validate the form and insert the values into a database aft ...

javascriptphpjquerytwitter-bootstrap

The positioning of the button was off-kilter in Firefox

app.component.html: <div class="input-group col-12 d-flex align-items-baseline pb-3"> <p class="mb-0 pb-3 col-12">Verify....</p> <input type="url" class="form-control" id="validationC ...

angularbootstrap-4

What steps should I take to eliminate the gap in my fixed bottom navbar?

I'm looking to revamp my menu layout by aligning the links with the social media icons and home button on the same line. The links are nested inside a div within the main navbar class (streetworn-demos), while the social media icons and homepage butt ...

htmlcss