Fixed #87

Author: lcdsantos

public/jquery.selectric.js

@@ -281,8 +281,11 @@
     /** Activates the plugin */
     activate: function() {
       var _this = this;
+      var hiddenChildren = _this.elements.items.closest(':visible').children(':hidden').addClass(_this.classes.tempshow);
       var originalWidth = _this.$element.width();
 
+      hiddenChildren.removeClass(_this.classes.tempshow);
+
       _this.utils.triggerCallback('BeforeActivate', _this);
 
       _this.elements.outerWrapper.prop('class',

public/jquery.selectric.min.js

@@ -264,8 +264,11 @@
     /** Activates the plugin */
     activate: function() {
       var _this = this;
+      var hiddenChildren = _this.elements.items.closest(':visible').children(':hidden').addClass(_this.classes.tempshow);
       var originalWidth = _this.$element.width();
 
+      hiddenChildren.removeClass(_this.classes.tempshow);
+
       _this.utils.triggerCallback('BeforeActivate', _this);
 
       _this.elements.outerWrapper.prop('class',

src/jquery.selectric.js

@@ -155,6 +155,17 @@ describe('basic suite', function() {
     expect($('.selectric-wrapper').width()).toBe(selectWidth);
   });
 
+  it('should have same width of original <select> even if parent is hidden', function() {
+    loadFixtures('hidden.html');
+    var selectHidden = $('#select-hidden').selectric({
+      inheritOriginalWidth: true
+    });
+    selectHidden.closest('.wrapper').show();
+    var selectWidth = selectHidden.width();
+    selectHidden.closest('.wrapper').hide();
+    expect($('.selectric-wrapper').width()).toBe(selectWidth);
+  });
+
   it('should replace diacritics', function() {
     select.append('<option>áàãéèíìóòõúùñçÿ</option>');
     select.selectric('refresh');

test/basic.spec.js

@@ -0,0 +1,9 @@
+<div style="display: none;" class="wrapper">
+  <select id="select-hidden">
+    <option value="bilberry">Bilberry</option>
+    <option value="blackberry">Blackberry</option>
+    <option value="blackcurrant">Blackcurrant</option>
+    <option value="blueberry">Blueberry</option>
+    <option value="cantaloupe">Cantaloupe</option>
+  </select>
+</div>