select2의 항목이 폭을 채우지 않음

내 select2 코드에서 <span class="full-width">text</span>의 텍스트를 감싸기 위해 templateResult을 사용하고 있습니다. 나는 또한 그것에 부트 스트랩 (bootstrap) 팝 오버 (popstop popover)를 붙이고있다. full-width은 width: 100%' 인 클래스입니다. 그러나 popover는 커서가 텍스트 오른쪽의 공백이 아닌 실제 텍스트 위에있을 때만 발생한다는 사실에서 알 수 있듯이 드롭 다운의 전체 너비를 차지하지 않습니다. 검사기를 보면 <li class="select2-results__open"...은 166x32 (6 라운드 패딩)이지만 실제 <span class="full-width">text<span>은 패딩, 여백 또는 테두리가없는 56x16 크기입니다. 전체 너비를 차지하게하려면 어떻게해야합니까? 내가 추가 https://jsfiddle.net/ptomblin/3zap0sh9/select2의 항목이 폭을 채우지 않음

출처

2017-01-24 Paul Tomblin

코드는 어디에 있습니까? –

위의 그림과 같이 CSS의 "width : 100 %"및 templateResult를 제외하고 실제로 표시 할 코드는 없습니다. 도움이 될만한 다른 것을 생각해 낼 수 있습니까? –

이 모든 것은 선택 상자를 참조하고 있습니까? 문제를 보여주는 우리를 위해 그것을 만들면 도움이됩니다. http://stackoverflow.com/help/mcve –

   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%; 
}

그리고 바이올린 (즉,이 프로젝트에 무엇 때문에 커피 스크립트에서) 요청에 의해

, 여기에 templateResult 기능입니다 .full-width css에 display: block;을 입력하면 문제가 해결되었습니다.

출처

2017-02-03 13:39:26

select2의 항목이 폭을 채우지 않음

답변

관련 문제