Change size field autocomplete Orbeon

Hello!!

I have a field autocomplete, where products are loaded from archive xpl. this work correctly and showed all items in the autocomplete.

But there are items that the label it's big and cannot view all label in the field autocomplete:



I read the documentation from autocomplete field and i use this line "  .orbeon .xbl-fr-autocomplete .xforms-input input { width: 200px }" to modifed the width from autocomplete field. but this not work.

I attatch the code to form builder:

 

<xh:head>
        <xh:title>Captura de Precios</xh:title>
        <style type="text/css"> .orbeon .xbl-fr-autocomplete .xforms-input input { width: 200px } </style>.....

Also, i try to create a custom.css to my autocomplete field, but this not work.

So my questions, is it possible view a step by step to modified the width to autocomplete field or exist any example for this?

Many thanks Regards

Hi Alejandro,

Try something along those lines:

.orbeon .xbl-fr-autocomplete .yui-ac-content { max-width: 600px }

By default the `max-width` is at 400px, hence the above CSS extending it to 600px. Also, you might want to play with the `min-width`, which by default is of 200px, and that you might want to increase as well. And note that the exact CSS to use might depend on what version of Orbeon Forms you're on.

To experiment with this, I'd recommend you use the Chrome Dev Tools, or similar, load your page with the autocomplete, have the list of suggestion show, and then in the DOM look for search for `yui-ac-content` and remove the `display: none` on that element, so the list of suggestions shows while you can experiment with CSS properties in the Dev Tools.

I hope this helps,

Alex