Item in select2 dropdown not filling width

Question

In my select2 code, I'm using templateResult to wrap the text in a <span class="full-width">text</span>. I'm also attaching a Bootstrap popover to it. full-width is a class with width: 100%'. However, it's not taking up the full width of the dropdown, as evidenced by the fact that the popover only happens when the cursor is over the actual text, not the whitespace to the right of the text. When I look in the inspector, the <li class="select2-results__open"... that contains it is 166x32 (with 6px padding all round) but the actual <span class="full-width">text<span> is only 56x16 with no padding, margin or border. How can I make it take up the full width?

By request, here's the templateResult function (in CoffeeScript because that's what this project is in)

                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

And the CSS

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

And a fiddle: https://jsfiddle.net/ptomblin/3zap0sh9/

There isn't really any code to show, except a CSS "width: 100%" and the templateResult as shown above. Can you think of anything else that would be helpful? — Paul Tomblin
All of this is referencing a select box, no? It helps if you create it for us showing the problem. stackoverflow.com/help/mcve — Michael Coker

Paul Tomblin Paul Tomblin · Accepted Answer · 2017-02-03T13:39:26

0

votes

I added display: block; to the .full-width css and the problem went away.

Item in select2 dropdown not filling width

1 Answers