3

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?

2

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

  • I've come back around to this issue by user request. Made one failed attempt in October, now trying again and no luck. I added this to a custom extension's css that I've verified loads on the page in question: select { width: 500px; !important; /* This will increase the rule score */ } It doesn't make a difference. I've verified I am not using a cached css too. – Rob Brandt Jan 8 '16 at 1:36
  • Hi Rob, not sure if it's different with Wordpress or Joomla (don't know what CMS you're using), but on Drupal, the width of the Select2 fields aren't actually controlled by <select> elements. Those elements are set to {display:none} even when the user is interacting with the field. The width is actually controlled by the divs near/around the <select> element. So if you try a CSS selector like .crm-select2 {width: 500px; !important;}, I'm hopeful that should do the trick. Let me know, and if it works for you, I'll update my answer. – Allen Hutchison Jan 8 '16 at 3:55
  • Thanks. Selecting the div was what I originally tried. But I tried it again, with no luck. We are using Drupal 7. FYI, the crm-select2 class is actually inline in the select tag. So I tried selecting .crm-select2 and select.crm-select2. Then I reverted to the div and tried selecting div.Membership_Type-content and just .Membership_Type-content, none of which changed the display of the selector. – Rob Brandt Jan 8 '16 at 23:10
  • Ah, bummer! I know you're trying to widen all of the Select 2s, but what screen/page are you testing on? I'll try that screen out later and see if I can find the right combo of selectors. – Allen Hutchison Jan 8 '16 at 23:15
  • It's a membership signup page, and the field in question is a list of membership types. In researching this issue it occurs to me that I might need to clarify the issue. The issue is NOT with the width of the displayed options once you click on the select, nor is it wrapping issues within the option list. It is that the untouched default value of the select, before clicking on it, doesn't show the complete option. For example, for my own record I am a member type "Regular Member - $70.00". However when I first view the page, the dropdown says "Regular Member - $7...". It needs to show all – Rob Brandt Jan 9 '16 at 1:10
0

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.

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.