Multi-line

[joergd]

How would I make the individual color blocks float inline - so when the space they're in is say a .span2 - they create multiple lines as they fill up the width?

[tkrotoff]

Sorry for the late answer.

I guess you are talking about when picker: false If you specify a max-width for .simplecolorpicker.inline, then the colors will be over multiple lines if needed.

.simplecolorpicker.inline {
  max-width: 100px;
}

This will work too:

      <div style="max-width: 100px">
        <select name="colorpicker-inline" id="colorpicker-inline">
          <!-- Colors from Google Calendar -->
          <option value="#7bd148">Green</option>
          <option value="#5484ed">Bold blue</option>
          <option value="#a4bdfc">Blue</option>
          <option value="#46d6db">Turquoise</option>
          <option value="#7ae7bf">Light green</option>
          <option value="#51b749">Bold green</option>
          <option value="#fbd75b">Yellow</option>
          <option value="#ffb878">Orange</option>
          <option value="#ff887c">Red</option>
          <option value="#dc2127">Bold red</option>
          <option value="#dbadff">Purple</option>
          <option value="#e1e1e1">Gray</option>
        </select>
      </div>

If you talk about the picker itself (when picker: true), there is already a max-width:

.simplecolorpicker.picker {
  max-width: 264px;
}