How to create and style a Combobox replacement

The built in combobox is too limited for our needs, so I have created our own.
It consists of a CustomField with a CssLayout containing a Button and a TextField.

Now with Valo, I have set style “v-component-group” on the CssLayout and gotten a pleasing look.

So far so good.

My challenge now is to get this to behave nicely in a Table. Specifically I want the component to resize automatically as the column is resized.

My current CustomField does not resize. It displays with the width that I give it, and does not resize.

Am I right in thinking that I must replace the CssLayout with a HorizontalLayout? (And set it to 100% width, the button to a fixed width and the text field to 100% + expand ratio 1…)

I have tested this, and it works, but I then lose the “v-component-group” styling, since it is only defined for CssLayouts.
I will then have to write my own css replacement. I’ve had a look at the Valo css for “v-component-group” and it looks quite daunting.

To answer myself: You’re wrong…

When I first tried to construct the CustomField with a CssLayout, I tried to set various combinations of widths on the CssLayout and its child components, and didn’t get the effect that I wanted.

The problem is that I assumed that my root CssLayout, which I return from initContent() was the CustomField.
That was wrong. The CustomField is its own thing, and becomes a

around my content.

So, the solution was to set the width of the CustomField to the required width, and set my root CssLayout and my input field to 100% width. So easy.

That gave me the behaviour I wanted. I could also keep the “v-component-group” styling and get the look that I wanted.