search

mrmarkfrench / country-select-js

A quick jQuery-based country picker based on https://github.com/Bluefieldscom/intl-tel-input.git
MIT License
282 stars 107 forks source link

responsiveDropdown breaks the dropdown when the element is initially hidden #90

Open makedin opened 2 years ago

makedin commented 2 years ago

When the responsiveDropdown option is true, the width of the dropdown for selecting countries is set to the element's offsetWidth:

if (this.options.responsiveDropdown) {                
      $(window).resize(function() {                
          $('.country-select').each(function() {                
          var dropdownWidth = this.offsetWidth;                
              $(this).find('.country-list').css("width", dropdownWidth + "px");                
          });                
      }).resize();                        
}

This works well when the element is visible when the code runs, but causes trouble when it's not: the offsetWidth is zero when the element is hidden (MDN). This in turn means that the dropdown's width get set to 0px, making for a suboptimal user experience.

I'm not sure how to go about properly fixing this, but perhaps there could at least be a minimum value greater than 0px for the dropdown's width?