I'm having a bizarre issue with the style an entityreference autocomplete field implemented as an editablefield in a views table:

The throbber is far too wide, and the popup is actually positioned almost off the page. I'm also having a devil of a time trying to troubleshoot it because the usual techniques for inspecting a popup aren't working-- it immediately disappears before I can inspect it, lol.

Any ideas would be greatly appreciated.

CommentFileSizeAuthor
bootstrap-er-autocomplete-editablefield.png36.85 KBWorldFallz
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

WorldFallz created an issue. See original summary.

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Category: Bug report » Support request
Status: Active » Closed (won't fix)

This level of support really falls outside normal usage scope. Anytime one gets into complex integrations with other modules/js like this, there is bound to be issues. I don't have the time or energy to try and help debug this.

WorldFallz’s picture

WorldFallz CreditAttribution: WorldFallz commented

Thanks for the quick reply. I can certainly empathize with your workload, but I promise I wasn't looking for you to fix it for me, just maybe point me in the right direction.

In any case, for the benefit of others, I was able to finally locate a method to inspect the element with chrome: http://stackoverflow.com/questions/19422214/how-can-i-inspect-disappeari....

Once I was able to do that, it was easy to find out that the element in question was an absolutely positioned ul.dropdown-menu. I was then able to manually adjust the width, left, and right properties until it lined up properly. I was also able to manually set the width of the autocomplete input element and input-group-addon (for the throbber) to be more reasonable when contained within a table cell.

My guess is a 'proper' fix would be to alter the element to which it's relatively positioned, but I couldn't figure out which one it was and with proper narrow targeting of the css, I was able to fix it for this specific instance for I'm moving on.