How to target a specific field in the Control Panel with CSS or JS to increase its height (P&T Multiselect)?

Question

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 ...
      </select>
  </fieldset>

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

Answer 1

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.

Answer 2

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>

or

 <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!).