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?


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


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. – Jason Varga Dec 14 '12 at 2:50
  • Very interesting indeed. – Jeremy Gimbel Dec 14 '12 at 3:37

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.