Styling issue for advanced dropdown

Hi Adrian, I hope you have seen this issue ??

Hey,

I see the issue your describing but I can’t think of any solution.

Tables (which the repeatable list is) will automatically adapt fill the width of the window … and what you have is 6 columns plus add/remove buttons – including the ‘enhanced’ dropdown lists — which change shape depending on the value displayed.

So what I’m seeing is the ‘enhanced’ dropdown list expanding to display the ‘select or enter an option’ text. This is somewhat expected behaviour, although a problem when it comes to this form.

So what can you do about this?

First I would be looking at the form design – six column seems excessive. I’ve got a similar form with a large number of columns and I have a lot of issues trying to present it on the screen and in generated PDF’s.

Can the website’s design be changed so that the content area is wider? This would relieve the issue some what.

Perhaps remove (or make shorter) the ‘select or enter an option’ placeholder text. I dont have a filter available for this but it is translatable text and by the looks of the website you linked to you’ll be translating those strings anyway.

Failing this, perhaps try creating custom CSS to defined a fixed width for each column. This may be painful … but I’ve had to do this before. Just make sure you test this in various browsers and try to leave as much room as possible so people can see the fields and what they’re typing.

On a side note (or perhaps related to the issue?) I also see something weird happening with the ‘dropdown2’ column. From what I can tell it’s configured with values 1,2,3,4,5 with the ‘enhanced’ and ‘allow add options’ enabled. When the form is loaded we see ‘1’ as the selected (default) value – but when we add a new row it loads to the ‘select or add an option’ instruction … but it should be ‘1’. Something doesnt seem right there but I can’t reproduce it. Are you doing anything like using ‘gform_pre_render’ to pre-fill the field when the form is loaded?

• This reply was modified 7 years, 10 months ago by ovann86.

Hey,

Just thought I would add that I see the same issue in one of my forms and I don’t feel 100% OK with how it ‘looks and feels’ when the column width jumps around.

I’m still not sure what the solution should be here. It looks like your test form is working differently now – have you tried anything, do you have any thoughts on how this ‘should’ work (technically)?

I’m tempted to try running a script when the “enhanced” drop down starts to
1 – get initial width of column that contains “enhanced” drop down
2 – set a fixed width of column based on 1

Might work? can’t see why it wouldnt … but perhaps you have some thoughts?

Hi, I’ve managed to add some custom css with the help of a freelancer, and I need to control the width for specific column in the css. So it’s not a universal solution, but solved my issue.

OK, I see.

I’m not 100% happy with that solution for my use. If someone entered other text in, e.g. ‘12345 67890 12345’, the box goes wider again.

I’ll see if I can work out a solution but will be keen for your feedback with the update if you have the chance.

I will let you know once I’ve released an update with (what I hope is) a fix.

Hi, you can check my form, it doesn’t have the problem you mentioned:
https://ff3dm.com/m-make
If I type a long text in the other choice, it won’t make the column longer because the column max width is fixed.