CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
Draco18s no longer trusts SE
Draco18s no longer trusts SE

Reputation: 15941

Positioning jQuery UI Widget

I've got a custom jQuery UI autocomplete that displays multiple columns. This works great, as another developer was the one that created it, but I would like to make a change.

Currently the autocomplete dropdown positions itself so the top-left corner is aligned with the bottom left corner of the input text box. However, due to the dropdown's width (displaying seven columns) extends out past the right side of the page, far enough that on a smaller monitor, it would be offscreen!

I could easily reposition the input box, but I'm looking to reposition the dropdown UI instead. But I can't figure out how. Here's a screenshot of what it looks like:

Current looks

Nothing I've tried in the jQuery UI toolbox (.offset(),.position()) has worked as I can't seem to get a reference to the dropdown menu itself. I've tried inside the _create method, _renderMenu, after targeting the input with .mcautocomplete()...either I end up offsetting the input box, get an error, or nothing happens.

JSFiddle

Upvotes: 0

Views: 406

Answers (2)

tao
tao

Reputation: 90048

You can add a class to your autocomplete using this logic:

$( elem ).autocomplete({ 
    source: ... 
}).autocomplete( "widget" ).addClass( "whatever" );

After that, you can style up that specific autocomplete. Here's an example:

.whatever {
  position: absolute;
  left: 0!important;
}

If you want it centered and know the width of your page you can go:

.whatever {
  position: absolute;
  left: 0!important;
  right: 0!important;
  width: 900px; /* or whatever your page has */
  margin: 0 auto!important;
}

The importants are necessary to override the inline style that is added by jQuery autocomplete itself.

Upvotes: 1

Mottie
Mottie

Reputation: 86413

jQuery UI autocomplete includes a position option which uses the position utility to position the autocomplete popup.

Add something like this to your options (demo):

position: { my : "center top", at: "right bottom" }

Upvotes: 2

Related Questions