I have a Playa field associated with a channel of entries that have long names, often identical for much of the first 20/30 characters. My Playa field is configured to not allow multiple values and is thus a drop down.

When the drop down is clicked the entries are listed in full, with character wrapping. This allows me to find the entry that I want. But once selected the displayed choice is now truncated with ellipsis so I can't see the identity of the item that I selected.

How can I make this field wider on the CP screen? I have plenty of horizontal width - the Playa field is in a Matrix field that has two columns, each at 50% of the screen.


EE allows you to override control panel styling by adding a override.css stylesheet to the themes folder. So you could just add this rule within that stylesheet:

.playa-ss {width: 100% !important}
  • Tried that, but it did not work. It looks like the displayed text is created by the JavaScript as the form field is just an empty text input that is then filled by actions. My JavaScript is not good enough to hack in this extension, and I'm sure that me even thinking about hacking what is obviously a very mature extension means that I'm going about this completely the wrong way. – Colin Dec 2 '13 at 18:49
  • Actually the JavaScript is not truncating the text. There is just a bunch of nested CSS styles to work through using the above override.css technique. – Colin Dec 2 '13 at 19:00
  • This should work and there is no need to fuss with the JS. Is your override.css file in the correct location? Can you update your question with the contents of the css file – Siebird Dec 2 '13 at 19:21
  • I was dragged away onto something else. Kind of had it working but then broke my override CSS trying to tweak something, and then was dragged away. If/when I figure this out I'll post my solution for critique and any improvements. – Colin Dec 3 '13 at 19:01
  • Used the help from this thread to produce the answer that I posted. – Colin Dec 3 '13 at 21:18

In my


file I added the following to control the horizontal sizing of the Playa single-select drop-down field to have up to 300px width. Would love to hear of a better method.

/* Make the Playa single select drop down fields wider.
 * From http://expressionengine.stackexchange.com/a/17327/2436
 * The fields have a restricted width despite the amount of screen
 * space that is available. This causes the selected item to be truncated
 * with ellipsis. When we use a long naming convention with our channel
 * entries and then use the single-select Playa drop down layout, the
 * string is truncated - not useful if it is the right hand end that
 * has the distinguishing information.
 * The approach is to style the various fields at 100% to occupy the
 * available screen width, but then restrict the width to a reasonable
 * maximum value. Your definition of "reasonable maximum value" will
 * vary.
 * Note that some elegance has been lost with the drop-down arrow
 * being pushed to the edge of the outer bordered box with no padding.
 * This works good enough for now.

/*  The outer box that is drawn around the drop dwn field */
.playa-ss {width: 100% !important; max-width: 300px; }

/* The publish/edit screen is first drawn.
 * This is the selected text when the screen is first drawn with an already
 * selected entry. We need to allow each level to be as wide as possible
 * but not be too wide.
.playa-ss table td.playa-ss-input                        {width: 100% !important; max-width: 300px; }
.playa-ss table td.playa-ss-input li.playa-dp-selected   {width: 100% !important; max-width: 300px; }
.playa-ss table td.playa-ss-input li.playa-dp-selected a {width: 100% !important; max-width: 300px; }

/* The user clicks on the field to make a choice.
 * When the drop-down field is expanded the available values
 * are contained within a <ul> list within a playa-ss-entries
 * division. Make sure that the drop down has the same width
 * so that we can see the choices without line wrapping.
div.playa-ss-entries { width: 100%; max-width: 300px; }

/* A choice has been made (but not yet saved).
 * When the item has been selected the DOM is changed to
 * have a playa-entry list item that contains the anchor
 * that has the label text of the item selected.
.playa-ss table td.playa-ss-input                        {width: 100% !important; max-width: 300px; }
.playa-ss table td.playa-ss-input li.playa-entry         {width: 100% !important; max-width: 300px; }
.playa-ss table td.playa-ss-input li.playa-entry       a {width: 100% !important; max-width: 300px; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.