select2ドロップダウンの項目は、幅を埋めていません

Question

私のselect2コードでは、<span class="full-width">text</span>にテキストをラップするのにtemplateResultを使用しています。私はまたそれにBootstrapのポップオーバーをつけています。 full-widthは、width: 100%'のクラスです。しかし、カーソルが実際のテキストの上にあるときにのみポップオーバーが起こり、テキストの右側の空白ではないという事実によって証明されるように、ドロップダウンの幅を占めるわけではない。インスペクタを見ると、それを含む<li class="select2-results__open"...は166x32（全周6pxパディング）ですが、実際の<span class="full-width">text<span>はパディング、マージン、または境界線なしの56x16です。どのようにしてそれを全幅にすることができますか？私は追加https://jsfiddle.net/ptomblin/3zap0sh9/

Answer 1

：

   templateResult: (data) -> 
        # Get the select data 
        text = data.display_name || data.name || data.text 
        ret = $(
          "<span class=\"full-width\" 
          >#{text}</span>" 
         ) 
        if data.description 
         ret.popover({ 
          trigger: 'hover', 
          container: 'body', 
          html: true, 
          content: data.description, 
          title: data.title || '', 
          placement: data.placement || 'auto right', 
         }) 
        ret 

そしてCSS

.full-width: { 
    width: 100%; 
} 

とフィドル（つまり、このプロジェクトはにあるものだからCoffeeScriptの中に）要求することにより

は、ここtemplateResult機能です.full-width cssにdisplay: block;と問題がなくなった。