Jquery UI dialog with autocomplete select box

Question

I need to implement autocomplete select box inside jqueryUI dialog.

Currently dialog is overflowing the select box. (click the select box) I have found a solution by removing jqueryUI style overflow:hidden.

.ui-dialog {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
padding: .2em;
outline: 0;
}

But the overflow is a native dialog style that comes by default, that is why I think it is not the perfect solution. I also have many other dialogs pop-ups accross the project and removing oveflow might cause some of them not to work properly.

Is there any other better solution?

Thanks.

Ian A · Accepted Answer · 2014-02-20 15:35:47Z

1

I managed to fix this by appending the <input> that represents the dropdown to the wrapper after the autocomplete and tooltip has been created. i.e. Move line 18 of your JS Fiddle

.appendTo( this.wrapper )

to line 30 (after this):

.tooltip({
    tooltipClass: "ui-state-highlight"
})
.appendTo( this.wrapper );

See http://jsfiddle.net/nA5L2/1/

answered Feb 20, 2014 at 15:35

Ian A

6,2382 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery UI dialog with autocomplete select box

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related