So I have a standard page with standard components that have no-code. It is completely configured no custom components. My drop downs contain about 8 characters and it's only shows 5 when expanded despite the the dropdown taking up half the screen. See attached.

enter image description here It is a CSS issue enter image description here

Any ideas how I can fix this?

2 Answers 2


Looks like a CSS issue.

It may be helpful to inspect the element the browser dev console and see what style rules are being applied. It looks like the width on the select option is set to a fixed size and that text-overflow is set to ellipsis which is cutting off the text.

If you go into the browser console and inspect the select dropdown and then click on the one of the options in the source you can see what is being applied and change it on the fly under element style.

  • indeed it is! I'll post another picture and edit my question.
    – tjcinnamon
    Commented May 26, 2016 at 20:40
  • How can I fix it on the fly for a standard component?
    – tjcinnamon
    Commented May 26, 2016 at 20:44
  • 1
    The ellipsis is cutting it off because the container width is smaller than text, so that's the problem. It's not a true select html option list. Let me create a Lightning component dropdown and inspect how to fix it.
    – Andrew L.
    Commented May 26, 2016 at 20:56
  • any headway on this?
    – tjcinnamon
    Commented Jun 7, 2016 at 13:56

So apparently this is a new "feature" in Summer Release 2016. Lightning takes your longest picklist value and then sets the width of the drop down and truncates that value.

So I hope you don't use a picklist of years!!! I'll refrain from my opinions on this decision.

Also, my solution was to arbitrarily add characters to a low use value. I took 3:00 AM and made it 3:00 AM_____ that stretched it out enough

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .