Bootstrap FormGroup/ Input is not fully visible (Half hidden by some layers) only in IOS

Question

I am working on a form group that has an input with bootstrap, it works fine in all the desktop platforms, as well as in Android, but for some weird reasons, it's not fully showing or only showing a half-hidden input field, check the images below.

Android (Works just fine)

This how it is showing in IOS (Issue)

This is the written code responsible for that output.

<div className="form-group search-div">
          <form className='form' ref={form} onSubmit={handleSearch}>
            <button className="search-button" >
              <div className="search-icon">
                <span >{SEARCH_ICON}</span>
              </div>
            </button>
            <input
              type="search"
              className="search-input"
              name="searcText"
              value={searchText}
              onChange={onChangeUsername}
              placeholder="Search"
              aria-label="Search"
              aria-describedby="search-addon" />
          </form>
        </div>

CSS

.search-input {
  /* position: inherit; */
  width: calc(100% - 50px);
  height: 18px;
  /* left: 45px; */
  /* top: -35px; */

  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 18px;
  border: 0px;
  outline: 0px;
  background-color: #FFFFFF !important;
}

Simply don't know what to do here, any inputs if anyone has already worked with similar problem?

Answer 1

You should change your height attribute, the input in iOS has some padding added into it, so 18px on a line-height of 18px is too small for the text height. Try increase the height or reduce the padding in your css, based on the result you wish to achieve.