How to modify configurable list widget?

Morning dear supporters, I've found a very useful widget called "Configurable list". I would like to insert the form in a landing page, but first I would like to change the widget a little bit. If you check my form, I would like to make the drop down list to select the item narrower and place the "+" button between the two fields. Do you think it is possible? Does the text from the items in the drop down list determine the width of the field?

Thanks in advance for your help

Carlos 

Hello Carlos,

Thank you for contacting our Support.

Configurable list widget can be adjusted with CSS. But I wasn't sure what you would like to do. Do you want the plus sign to be placed between the drop-down fields?

Or you had something else in mind. 

Also, this part I didn't understand completely: 'I would like to make the drop down list to select the item narrower ' if you can give more information about that, please.

A width of the field can be adjusted with CSS as well.

If you can give us more information how would you like to adjust the fields it would be great.

Thank you!

Hi Nik

Ok, for your first doubt: yes, precisely, I want to place the plus sign between the drop down fields

Consequently, if you could place the plus sign between the two, the general width of the two drop down fields will grow.

This links with your second doubt: what I had in mind is to keep all fields in the same width. If you could insert the plus sign in between the two drop down fields and the widget can mantain the same width as the input fields down below, it would be perfect.

Hope I've made myself clarer

Carlos 

Hello,

As I talked to our User Interface designers, I learned that it is not possible to carry the add button into the above line. However it is still possible to arrange width of the elements. 

Please add this code to your widget's CSS:

select {

width: 80px !important;

}

Change the value to increase or decrease the fields width.

If you insist on adding the add button into the last line of the widget, I can open a feature request about it. However, I can not give you a timeframe when this feature will be implemented.

I hope this answer helps. Please don't hesitate to contact us for your further queries.

All the best!

Hi Seth, ok, thanks for the info. I will try to find another solution. We need to implement the form in a landing page with a time limited offer, so I cannot wait for your implementation.

Thanks anyway!

Best

Carlos

Thank you for the update, I checked the requirements that you have and I'm also quite confused why the "+" button would be in between the two drop down fields? 

Please note that the "+" button's function is to add a new row or item in the Configurable list widget, it cannot be on ALL the items, which is why it is placed at the bottom. 

If you simply wish to adjust the width of the drop down fields, that is possible. If you could provide a sample screenshot or a design of the layout, that would help us better understand. 

We'll wait for your response. 

Hi Charlie, I understand your argument; for us it was more a question of design. But I understand that the plus button has to appear only once, and with our design it would leave a gap in each new line.

I will use the css code to adjust the width and leave the plus button at the bottom.

Thanks a lot

Carlos

Hello Carlos,

On behalf of my colleague, you're welcome.

Do not hesitate to contact us if you have any additional questions.

Thank you!