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

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


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

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

1 Like

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

1 Like

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

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


try to use ion-select option

1 Like