search_facet_input width not wide enough

[littlebee]

Hi,

I'm having a problem that I couldn't resolve through css. The width of search_facet_input, computed by autoGrowInput(), is just a little too little. See https://skitch.com/lilbee/g5fua/greencon-2011-attendees

The only solution I've come up with is a hack on hack:

Index: public/javascripts/vendor/visualsearch.js
===================================================================
--- public/javascripts/vendor/visualsearch.js   (revision d5bab795c8d3e2a047896f403fe9cab4fe226b7d)  
+++ public/javascripts/vendor/visualsearch.js   (revision cfcbe179e877eada55916cbf390df051badec9e2)
@@ -1458,7 +1458,7 @@
                      .replace(/>/g, '>');

         $tester.html(value);
-        $input.width($tester.width() + 3);
+        $input.width($tester.width() + 6);
         $input.trigger('updated.autogrow');
       });

Is there a way to do this via css?

I doubt you would want to pull the change above as clearly this problem is instigated by something in our css, combined with the visualsearch css. I can try to add an option to specify what the padding is and submit that in a pull request if unable to do via css.

Thanks for yet another super awesome component!

~b

[samuelclay]

Yeah, it's something in your CSS. There's an invisible div that's positioned nearby (look for it in the DOM), which is used to measure the width of text. Check the auogrowInput() method to see how it's being created. From https://github.com/documentcloud/visualsearch/blob/master/lib/js/utils/jquery_extensions.js#L29-35:

  var $tester = $('<div />').css({
    opacity     : 0,
    top         : -9999,
    left        : -9999,
    position    : 'absolute',
    whiteSpace  : 'nowrap'
  }).addClass('VS-input-width-tester').addClass('VS-interface');

You'll want to change your styling to allow for that element.

[neyer]

i'm having this same problem; i think it's with bootstrap. what'd you do to fix this?

[littlebee]

See above, "hack on hack". I created have a fork but it has some other changes to facilitate other requirements I was given like "Facet Menu (autosuggest) Should Appear When Input Gets Focus". That's actually now configurable in my fork. I should probably transfer that fork over to Pathable (https://github.com/pathable) since other colleagues are also contributing to it. For now though it's at https://github.com/littlebee/visualsearch

[neyer]

ahh, got it. thanks @littlebee

[littlebee]

note that the commit on my fork does it a little different than above and allows you to change the extra padding via css. see, https://github.com/littlebee/visualsearch/commit/383bf97331bfd4cbc370fb5e29ab8339e377a8b7

[devdemon]

Just would like to mention this for future reference: Sometimes your box-sizing is set to border-box, for visualsearch.js this has to be set to content-box

.VS-search * {-moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box;}