I've encountered an issue with a form group containing an input using Bootstrap. While it works perfectly on desktop platforms and Android, it's not displaying correctly on iOS. The input field is either partially hidden or not fully shown. Below are the images illustrating the problem:
Android (Works fine)
https://i.sstatic.net/S5gDW.jpg
This is how it appears on IOS (Problem)
https://i.sstatic.net/7Rz8L.jpg
Here is the code responsible for this display:
<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;
}
I'm unsure how to resolve this issue. Any suggestions from anyone who has faced a similar problem would be greatly appreciated.