मैं एक फॉर्म समूह पर काम कर रहा हूं जिसमें बूटस्ट्रैप के साथ एक इनपुट है, यह सभी डेस्कटॉप प्लेटफॉर्म के साथ-साथ एंड्रॉइड में भी ठीक काम करता है, लेकिन कुछ अजीब कारणों से, यह पूरी तरह से नहीं दिखा रहा है या केवल आधा छुपा इनपुट फ़ील्ड दिखा रहा है, जांचें नीचे दिए गए चित्र।

एंड्रॉइड (ठीक काम करता है)

enter image description here

यह IOS में कैसा दिख रहा है (समस्या)

enter image description here

यह उस आउटपुट के लिए जिम्मेदार लिखित कोड है।

<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>

सीएसएस

.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;
}

बस यह नहीं पता कि यहां क्या करना है, कोई इनपुट अगर किसी ने पहले से ही इसी तरह की समस्या के साथ काम किया है?

2
gokublack 26 अगस्त 2021, 21:35

2 जवाब

सबसे बढ़िया उत्तर

आपको अपनी height विशेषता बदलनी चाहिए, आईओएस में इनपुट में कुछ पैडिंग जोड़ा गया है, इसलिए 18px की लाइन-ऊंचाई पर 18px टेक्स्ट ऊंचाई के लिए बहुत छोटा है। आप जिस परिणाम को प्राप्त करना चाहते हैं, उसके आधार पर अपने सीएसएस में ऊंचाई बढ़ाने या पैडिंग को कम करने का प्रयास करें।

1
Andrea Bruno Brunato 2 सितंबर 2021, 10:24

हालांकि परीक्षण के लिए कोई बेला प्रदान नहीं किया गया है, पिछला अनुभव line-height:18px विशेषता को हटाने का निर्देश देता है।

1
scooterlord 1 सितंबर 2021, 10:06