ivaynberg/select2 — pull request #5 by justindujardin (2012-03-28 17:00:22+00:00)
Title: Add support for flexible width select2 elements.

**This pull request may not ready to be merged, but I'm opening it to get eyes on it.**

**User Statement**

As a developer working with select2, I want to specify `%` based widths, so that select2 may be used in a fluid layout.

**Implementation**

- Use absolute positioning on the search input wrapper, results container, and choices container.
- Use 100% width for the drop down, and single-select search input.

**Testing**

Manual testing has been performed using a simple example page, on FireFox8, Chrome, Safari, and Opera.

**Notes**

I've made a few visual changes, to bring the style closer to the original Chosen. I believe these changes are good; here's a list of what I changed, and why I chose to change it:

- remove a few border lines, to reduce dropdown content area visual clutter.
- remove the blue focus rings, to keep the visual effects subtle -- They work best when they're barely noticed.
- remove the rounded edges from the single-select search input for consistency -- selection highlights, for example, don't have rounded edges, and are part of the visual group of elements inside the main rounded container.
- removed the focus rectangle from the 'close' button when depressed.
- flip the single select gradient (top -> bottom) in safari, so that it renders the same as in other browsers.

If these changes not desired, they can be easily picked out of the CSS file, while leaving the flexible width changes intact.

**Known Issues**

- The dropdown results list is only positioned when it is opened, not when the element resizes (e.g. because of a browser window resize.) This results in rare situations in which the dropdown alignment can be thrown off in the multiselect (e.g. if the select2 is sized down considerably, and the number of rows needed to show the current selection changes.)
- CSS specified widths, from non inline-element styles, will be converted to pixel widths. This is because there is no clear way to get the original CSS value, with it's specified units. jQuery and a google search show that the returned width you get is going to be a pixel width.
- On the single select, because the search input is absolutely positioned, font-size changes require updates to the CSS margins for the results list (to vertically align properly). Perhaps we could set the margin-top on the results list programmatically when the drop-down is opened, based on the height of the search input container?