Setting Select2 widths

Question

We have a number of forms that have items on them using the built in Select2 support. They aren't quite wide enough; annoyingly so. For the default selection, you can see the membership type and the $ and first digit of the price, but not the whole thing. Members have to click on the list to see the amount they are being charged, even if they aren't going to change membership plans.

I've identified the divs that wraps around the Select2's, and can control them in other ways; such as hiding them with with either css or js. But not width. I have tried things like:

$(".Membership_Type-content").width(300);

or

div.Membership_Type-content { width: 300px; }

to no effect.

Has anyone done this?

Answer 1

The width for Select2 fields is set as an inline style to the element itself. So, to override the inline width, you'd have to use !important in your CSS.

For reference: https://stackoverflow.com/q/16813220

Answer 2

I recently figured out that you can add a style parameter when generating the Select2. For instance, I was able to force a 600px width here:

  $form->addEntityRef("financial_account[$i]", ts('Source Fund'), [
    'entity' => 'financial_account',
    'style' => 'width: 600px;',
    'api' => [
      'params' => [
        'financial_account_type_id' => 'Expenses',
      ]
    ],
  ]);

So this opens the possibility of a) setting widths however you like when you're creating the forms; b) of modifying existing forms with the buildForm hook.