Question

Lookup single line field transparent background

Forms Layout Designer

Updated April 18, 2024

asked on September 22, 2023

I've created a form for an AP process in the new form designer that uses a lookup populating a single line field. This works great for type-ahead lookup of values but the end users don't like that the lookup results show with a semi-transparent background. I've looked in the theme settings and have tried figuring the correct .css selector to affect the background on the lookup drop down through inspect elements but I'm not having any luck.

Does anyone know the correct element to select and value to update to make the background solid on the lookup list?

Thank you in advance for any assistance you can provide.

I have already addressed the other issue shown above where the text wraps to the next line by increasing the size of the field.

0 0

Answer

SELECTED ANSWER

replied on October 2, 2023

It's a gradient background, so we just need to override that with something solid. However, it's tricky however to pin down exactly which element the background is associated with, since it disappears when you try to select it's component in the Inspector. After some trial and error, I found that there is an element of type fl-auto-complete-list, and it has a child element applying the background via class name of ac-list. So we can just apply a different background to that element and class.

Give this a try (tested on Version 11.0.2212.30987):

fl-auto-complete-list .ac-list {background:white;}

1 0

Replies

replied on October 3, 2023

That works great Matthew. Thank you!

I couldn't figure out how to get the proper selector because of what you mentioned. I could see it the drop down show up in the Elements listing when it was opened but trying to expand the element in developer tools caused the drop down to close and it would disappear.

1 0

View 1 previous reply

replied on October 3, 2023

Yeah, I had to go a couple levels up above the field, and set it to "break on subtree modification" so that the page basically froze once the pop-up was there (even before it loaded the text into it) and then I was able to investigate the fl-auto-complete-list element and its children.

0 0

replied on October 4, 2023

Great! Now I know how to handle it next time. Thanks again :)

1 0

replied on April 18, 2024

@████████ how did you figure out the text wrap?

0 0

replied on April 18, 2024

@Chynna Reddix I just increased the size of the field so that it was big enough to display on one line.

0 0

You are not allowed to follow up in this post.

Question

Question

Lookup single line field transparent background

Answer

Replies

Sign in to reply to this post.