[Solved] Part of autosuggest div that overflows qtip is hidden

[jstewmc]

Hey guys,

I have a form in a qtip, and an autosuggest on one of the form's inputs. When the suggestion div appears, the part of the div that flows beneath the qtip's bottom edge is hidden.



Here is the CSS for div.autosuggest (I tried setting its z-index to 7000 since .qtip has a z-index of 6000; The autosuggest is from scriptaculous http://wiki.github.com/madrobby/scriptac...ocompleter).

JS Code

.autosuggest { margin: 0; padding: 0; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #333; position: absolute; width: 250px; background-color: white; z-index: 7000; }

I tried turning off .qtip-wrapper { overflow-y: hidden; } with FireBug, but that gets me a vertical scroll bar on the right side.



I'm using the minified version of qTip version 1.0.0-rc3, May 12 2009. Screenshots are from FireFox 3.5.2, but the same thing happens in Safari 4.0.3. Haven't tried IE yet, but I'd image it's the same problem.

It has to be something with CSS:overflow/height/position, right? Shouldn't the suggestion div exist outside of the qtip since it's absolutely positioned? It's embarrassing, but I can't figure it out. Thanks!

[jstewmc]

Hey-o! After some fresh thinking this morning, I removed the .qtip-wrapper's positioning and it worked. I have no idea where else that will break things downstream, but we'll see.

To remove the .qtip-wrapper's positioning, find line 1080 in the source code (as of 10/10/09) and remove the bold part. Pretty simple...

JS Code

1080: '  <div class="qtip-wrapper" style="position:relative; overflow:hidden; text-align:left;">' +

By the way, I didn't want to gush in the first post, but I love this library!!! Awesome job Craig! Thank you for all your hard work.

[Leksat]

Here is my solution for similar problem:

JS Code

$(element).qtip({
  ...,
  api: {
    onRender: function() {
      this.elements.wrapper.css('overflow', 'visible');
      this.elements.contentWrapper.css('overflow', 'visible');
      this.elements.content.css('overflow', 'visible');
    },
  ...
  }
});

[Craig]

Yeah the qtip-wrapper has relative positioning and overflow set to hidden by default... removing it can cause problems with the border-radius stuff though Meh... qTip2 is where it's at anyway guys, upgrade and feel the love!