Black background appears when using HTML input data-list with Ionic

Ionic Framework Ionic React
1

Problem: Black bar appears when using the “dropdown” button on a HTML input data-list

2020-11-25 07.42.45
2020-11-25 07.42.45650×1312 612 KB

Code:

   <div className="MobileDropdownInput">
      <input className="input" list="browsers" placeholder="Channel" />
      <datalist id="browsers">
        <option value="Internet Explorer"></option>
        <option value="Firefox"></option>
        <option value="Google Chrome"></option>
        <option value="Opera"></option>
        <option value="Safari"></option>
      </datalist>
    </div>

Is there a workaround to avoid this, or change the “black” to a different colour for a better experience.

1 Like
2

try to run your application in the browser and find unnecessary black space using the inspect element tool

1 Like
3

the browser version of the application wouldn’t prompt the native ios keyboard which creates the black bars.

4

connect your mobile using data cable and then type this URL “chrome://inspect/#devices” .
then you will find whats wrong with your app

f2cc3ca7ad3a8a3752479cbb6571febedd3a72c0_2_690x387
58fc0b193f0bd712c182a53bf5479df4c276ee7c_2_690x387
df82491b6d4fdba8786c8305025e2532575dbb17_2_690x387

5

try to use ion-select option

1 Like