customize country list item height (virtuallist)

[EricSong8612]

Hi there, I'm trying to style the country list item with customized height. but the problem is that there is a gap between each items, which is caused by the position top value of each item i think. According to the source code, a virtual list is used here. but the parameters are hard-coded. so is there any way to change this?

[viktornar]

It would be great if it would be possible to pass width to virtual list as well instead of having hard coded it.

@EricSong8612 Right now I'm using a hack at some point:

export default class OverriddenReactTelephoneInput extends ReactTelephoneInput {
  getCountryDropDownList = () => {
    const data = this.state.preferredCountries.concat(this.props.onlyCountries);

    return (
      <VirtualList
        width={ 250 }
        height={ 90 }
        itemCount={ data.length }
        itemSize={ 40 }
        style={ this.props.listStyle }
        className="country-list"
        scrollToIndex={ this.state.highlightCountryIndex }
        scrollToAlignment="center"
        renderItem={ ({ index, style }) => {
          const country = data[index];
          const itemClasses = classNames(this.props.listItemClassName, {
            preferred: findIndex(this.state.preferredCountries, (c) => c.iso2 === country.iso2) >= 0,
            highlight: this.state.highlightCountryIndex === index
          });

          const inputFlagClasses = `flag ${country.iso2}`;

          return (
            <div
              key={ `flag_no_${index}` }
              data-flag-key={ `flag_no_${index}` }
              className={ itemClasses }
              data-dial-code={ country.dialCode }
              data-country-code={ country.iso2 }
              onClick={ this.handleFlagItemClick.bind(this, country) }
              style={ style }
              title={ `${country.name} - ${country.dialCode}` }
            >
              <div
                className={ inputFlagClasses }
                style={ this.getFlagStyle() }
              />
              <span className="country-name">
                { country.name }
              </span>
              <span className="dial-code">
                { `+${country.dialCode}` }
              </span>
            </div>
          );
        } }
      />
    );
  }
}

and then

 <OverriddenReactTelephoneInput
       onlyCountries={ onlyCountries }
       preferredCountries={ ['en'] }
       onChange={ this.handleCountryChange }
       initialValue={ initialValues.countryCode }
 />

I have used findIndex from lodash function since we already using it in our project.

It's also possible to override width and height with max-width and max-height in css, but then VirtualList doesn't work correctly with keyboard navigation :/