I have a Pixel & Tonic multi-select field with 50-60 rows in it. The users obviously need to be able to easily select more than one item. By default, the P&T field shows about 4 items at a time, which is making this enormously difficult to use - I'm half tempted to switch to categories. I don't see anywhere where I can set the height of the multi-select field when setting up the custom field.

Looking at the source, I should be able to target it with CSS/JS (#sub_hold_field_128 select) and set its height:

<div id="sub_hold_field_128" >                                                                              
   <fieldset class="holder">
      <input type="hidden" name="field_id_128" value="n" />
      <select name="field_id_128[]"  multiple="multiple">
          <option value="al">Alabama</option>
          <option value="ak" selected="selected">Alaska</option>
          <option value="az" selected="selected">Arizona</option>
          <option value="ar">Arkansas</option>
          ... etc ...

What is the easiest way to set this? Do I need to tie into a hook like cp_css_end?

2 Answers 2


After a few minutes I was able to figure out an easy way to do this. I found a similar question here on EESE about adding custom JS to a new entry. I was able to put the CSS I needed right in instructions of the field. I had to keep everything on one line, because the field instructions look like they're being parsed with XHTML, so it was adding paragraph tags around each line. I ended up adding:

<style type="text/css" media="screen">#sub_hold_field_128 select {height:500px;}</style>

That ends up being wrapped in paragraph tags, leaving a less than desirable extra space between the title and the field, but this works, and is an easy solution.

enter image description here

  • Now that is nifty! Thanks for posting the answer Commented Dec 13, 2012 at 21:29
  • Great, this will be helpful.
    – 4midori
    Commented Dec 13, 2012 at 23:38
  • I should add here that I wrote an article back in January 2009 about adding JS to instruction fields (in EE1). I forgot I wrote the article, but it looks like you can still add JS and CSS to instruction fields just fine in EE2. Article: Robust and Clean ExpressionEngine Field Instructions with jQuery in the Control Panel Commented Dec 14, 2012 at 20:23
  • Exactly what I needed - thank you for exposing this feature. Commented Jun 27, 2013 at 15:34

As a small edition to this (and it's a great solution by the way!), when I need to do something like this ... rather then putting the CSS (or JS!) directly into the instructions field, I create a .css or .js file and then add the link to the instructions field:

<script src="/assets/js/ee_cp.js"></script>


 <link rel="stylesheet" type="text/css" href="/assets/css/ee_cp.css">

The obvious benefits of this is that it's then very easy to add or edit if I've made a mistake or require an addition!

A good example of where I use this is with a Pixel & Tonic 'pill' field type. For example, in one channel (lets say a News channel), I may have different fields depending on if it's a generic news item, a media release, a simple quote, etc. With some pretty basic JS, I can use the Pill field type to allow a user to select the 'Content type', and then show/hide other fields based on that selection. Boom!

I think it's lovely that Ellislab included this (possibly as a simple side effect of the instructions field, but lets not get picky!).

  • Nice technique. I've wanted to do something like this in the past, I'll keep it in mind. Commented Dec 14, 2012 at 2:50
  • Very interesting indeed. Commented Dec 14, 2012 at 3:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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