Vertically aligning an input box within a container

Question

I have the following codepen: https://codepen.io/ftahir192/pen/paeYzV

The codepen consists of overriding styles for the popular Select2 plugin.

I'm running into some problems with vertically aligning the search icon and search input with the search box. As you can see in the codepen, the search icon is pushed slightly to the top, and the search text although looks like it is in the center, does not work nicely when changing the font size.

I've been trying to figure this out for a few hours but am at loss with why I can't get anything like vertical-align: middle; or adding some margin-top/padding-top to fix the error. Ideally I'm trying to make it so that the icon and the search text are responsive with eachother, i.e. one vertical align or margin property that alignsthe entire select2-search class.

I believe the following code in the css is the culprit:

.select2-search {
  font-size: $search-box-font-size;
  font-weight: bold; 
  vertical-align: middle;

Any help will be much appreciated!

Possible duplicate of [Vertical alignment of elements in a div](https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — Vitalii Chmovzh, Feb 11 '18 at 17:59
I did have a look at that link before, but the solutions didn't work for me. I'm not sure if I was specifying them on the correct selector — , Feb 11 '18 at 18:02

K.F · Answer 1 · 2018-02-11T18:19:29.910

0

I think this may be what you're looking for, give that you're open to using flexbox. You can achieve a vertical alignment by adding the following css to the search bar:

.select2-container--bgform .select2-search {
    display: flex;
    align-items: center;
}

What this does is vertically align each child element to the vertical center of the .select2-search element. You can read more here: A Complete Guide to Flexbox.

Additionally, here's the caniuse.com page for flex.

-- Without flexbox, you might want to consider taking a look at this article: CSS vertical alignment without flexbox and their example. Roughly something like this:

  .select2-search {
    position: relative;
    display: block;
    height: 100%;

    &::before,
    .select2-search__field {
      display: inline-block;
      vertical-align: middle;
      text-align: middle;
      margin: 0 0 2px;
    }
  }

edited Feb 11 '18 at 18:19

answered Feb 11 '18 at 18:03

K.F

459
3
12

Thanks for this reply. Unfortunately I have to support IE 11 and caniuse.com states there are a lot of bugs in IE 11 when using flex – Feb 11 '18 at 18:05
Ah, I see. I've edited my answer to include some thoughts on flexbox-less vertical alignment. Good luck! – K.F Feb 11 '18 at 18:20
Thanks for this. Unfortunately not able to get it working with this method – Feb 11 '18 at 18:41
When using basic flexbox settings as suggested in this answer, you will not have any problems using IE11 – Gerard Feb 11 '18 at 18:56
@Gerard, thanks. I tried the solution and it works nicely with a fixed font-size, but anything larger (i.e. 24px) and the text seems to go off-center. My codepen is in the original post – Feb 11 '18 at 19:01

Anonymous · Accepted Answer · 2018-02-11T19:55:18.217

0

I cannot try it in IE, but in Chrome it is working for me by adding these lines to the CSS code:

.select2-search__field {
  height: $search-box-height - 2;
  margin-top: 0 !important;
  font-size: $search-box-font-size;
  width: calc(100% - 41px) !important;
  padding-top: 2px !important;
}

.select2-container--bgform .select2-search:before {
  line-height: $search-box-height - 2;
  vertical-align: top;
}

Or see on Codepen.

edited Feb 11 '18 at 19:55

answered Feb 11 '18 at 18:17

Anonymous

902
10
23

Thanks, I think this is it working. May I suggest removing the code snippets so that it's easier for others to see a quick answer to this solution? :) – Feb 11 '18 at 18:30
Another minor quibble, the top right and bottom right corners of the border are being cut off, due to the line-height property. – Feb 11 '18 at 18:49
1

I fixed the border issue, but I am not sure what you mean by aligning icon and select text. – Anonymous Feb 11 '18 at 19:05
So I'm not sure if it's just me, but the search icon is too close to the bottom by a few pixels (not vertically aligned). Also, when changing $search-box-height from 50 to say 70, the icon and text are no longer aligned. I'm wondering if there's a solution which is fluid with the size of the container? – Feb 11 '18 at 19:13
1

You were right, I calculated it a little bit wrong. Now you can also change the height and the font-size without having to modify anything else. – Anonymous Feb 11 '18 at 19:56
Thanks - this works nicely. Do you know how to set a background color of the icon? When I set a color to .select2-selection, part of the right border is also colored. I don't think there's also an easy way to fill in the entire select box? Any tips appreciated! – Feb 11 '18 at 20:49
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/164933/discussion-between-user3186023-and-tavkomann). – Feb 11 '18 at 21:09

Vertically aligning an input box within a container

2 Answers2