Help us understand the problem. What is going on with this article?

jQuery + Select2 : ドロップダウンリストの幅を調整する

Select2はjQueryのプラグインで、要素のドロップダウンリストにさまざまな表現や機能が加えられます(「jQuery: プラグインSelect2で要素のドロップダウンリストを操作する」参照)。ただ、デフォルトでは、やたらと幅の狭いドロップダウンリストになってしまうようです(図001)。CSSなどで、あらかじめ幅を定めておくのがよいでしょう。

図001■やたらと幅の狭いドロップダウンリスト

qiita_1912001_01.png

ドロップダウンの幅をリスト項目に合わせる

とはいえ、せっかくJavaScriptコードで扱うのですから、リスト項目に合わせて幅を動的に調整してはしい場合もあるでしょう。そのときには、select2()メソッドにつぎのようなふたつのオプションを渡してください。

$('#select2').select2({
    dropdownAutoWidth: true,
    width: 'auto'
})

これでドロップダウンは、リスト項目の長さに合わせた幅になります(図002)。以下のサンプル001をCodePenに公開しました。なお、コードの中身については、「jQuery: プラグインSelect2で要素のドロップダウンリストを操作する」をお読みください。

図002■リスト項目の幅に合ったドロップダウン

qiita_1912001_04.png

サンプル001■ jQuery + Select2 : Drop-down list with width adjusted

See the Pen jQuery + Select2 : Drop-down list with width adjusted by Fumio Nonaka (@FumioNonaka) on CodePen.

選択された項目に幅を合わせる ー width

widthオプションをautoに定めると、ドロップダウンリストが選択された項目の幅になります(図003)。

$('#select2').select2({
    // dropdownAutoWidth: true,
    width: 'auto'
})

図003■ドロップダウンリストが選択された項目の幅に合う

qiita_1912001_02.png

これだけでよさそうに思えたかもしれません。けれど、選択されていない項目に長いテキストがあったら、ドロップダウンに収まらず見切れてしまいます。このオプションは、あくまで選択された項目をしっかり見せるというだけです。

ドロップダウンのリスト幅を合わせる ー dropdownAutoWidth

選択された項目はさておき、ドロップダウンのリスト幅を調整するのがオプションdropdownAutoWidthです。値をtrueに定めれば、すべての項目が収まるようにリスト幅が決まります(図004)。

$('#select2').select2({
    dropdownAutoWidth: true,
    // width: 'auto'
})

図004■ドロップダウンのリスト幅を項目に合わせる

qiita_1912001_03.png

ということですので、ドロップダウンの幅を項目に合わせて動的に決めるには、ふたつのオプションが必要なのです。

CSSで幅が正しく設定できない

Select2サイトによると、CSSで幅が正しく設定できないことがあるようです。その場合には、インラインでstyle属性により幅を定めることが勧められています。そのときwidthオプションに与える値はresolveです。

$('#select2').select2({
    width: 'resolve'
})
<select id="demo" style="min-width: 300px"></select>
FumioNonaka
はなし家、もの書き、コード書き。詳しくはwebで。 担当講座: 電気通信大学ウェブシステムデザインプログラム「Web UI・UXプログラミング演習I・Ⅱ」 https://www.websys.edu.uec.ac.jp/ ロクナナワークショップ「Vue.js入門講座」 https://67.org/ws/workshop/detail/0136javascript.html
http://www.fumiononaka.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした