Answers.Body: <p>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 <strong>!important</strong> in your CSS.</p>
  
  <p>For reference: <a href="https://stackoverflow.com/q/16813220">https://stackoverflow.com/q/16813220</a></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-01-08T01:36:46.553Z
Answers.Text: 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.
Answers.UserDisplayName: Rob Brandt
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-01-08T03:55:53.737Z
Answers.Text: 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.
Answers.UserDisplayName: Allen Hutchison
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-01-08T23:10:33.620Z
Answers.Text: 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.
Answers.UserDisplayName: Rob Brandt
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-01-08T23:15:26.617Z
Answers.Text: 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.
Answers.UserDisplayName: Allen Hutchison
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-01-09T01:10:56.920Z
Answers.Text: 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
Answers.UserDisplayName: Rob Brandt
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-27T20:23:35.970Z
Answers.LastActivityDate: 2015-10-27T20:33:32.107Z
Answers.LastEditDate: 2017-05-23T12:38:59.763Z
Answers.UserDisplayName: Allen Hutchison
Answers.Body: <p>I recently figured out that you can add a <code>style</code> parameter when generating the Select2.  For instance, I was able to force a 600px width here:</p>
  
  <pre><code>  $form-&gt;addEntityRef("financial_account[$i]", ts('Source Fund'), [
      'entity' =&gt; 'financial_account',
      'style' =&gt; 'width: 600px;',
      'api' =&gt; [
        'params' =&gt; [
          'financial_account_type_id' =&gt; 'Expenses',
        ]
      ],
    ]);
  </code></pre>
  
  <p>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 <code>buildForm</code> hook.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-21T17:01:51.420Z
Answers.LastActivityDate: 2018-12-21T17:01:51.420Z
Answers.UserDisplayName: Jon G - Megaphone Tech
Body: <p>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.</p>
  
  <p>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:</p>
  
  <p>$(".Membership_Type-content").width(300);</p>
  
  <p>or</p>
  
  <p>div.Membership_Type-content {
      width: 300px;
  }</p>
  
  <p>to no effect.</p>
  
  <p>Has anyone done this?</p>
  
Tags: <css><select2>
Title: Setting Select2 widths
ThreadText: # Setting Select2 widths
  
  (Asked by: username_0 on 2015-10-23)
  
  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?
  
  **Tags:** css, select2
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2015-10-27. Score: 3
  
  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>
  
  > **Comments:**
  > **username_0**: 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.  
  > **username_1**: 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.  
  > **username_0**: 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.  
  > **username_1**: 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.  
  > **username_0**: 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  
  
  ---
  
  ### Answer by username_2 on 2018-12-21. Score: 1
  
  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.
  
  
  ---
  
  