Chosen: Escolhido não estilizando corretamente em uma caixa de diálogo de bootstrap 3.x.

Criado em 31 mai. 2017  ·  6Comentários  ·  Fonte: harvesthq/chosen

Resuma seu problema aqui.
Escolhido não estilizando corretamente em uma caixa de diálogo de bootstrap 3.x.

Passos para reproduzir

carregar CSS do bootstrap
carregar carregar uma caixa de diálogo.
abre a caixa de diálogo

Além disso, crie um link para uma demonstração de trabalho que mostra o problema para que possamos tentar reproduzi-lo. Você pode usar este modelo como base. Como alternativa, confirme se a página de demonstração escolhida mostra o problema.

Comportamento esperado

para mostrar o menu suspenso bem estilizado e pesquisável

Comportamento real

aqui está
image

Ambiente

  • Versão escolhida :
    escolhido_v1.6.2 /

  • jQuery ou versão de protótipo :
    /jquery/1.11.2/jquery.min.js '

  • Navegador e versão :
    Mozilla / 5.0 (Windows NT 10.0; WOW64; rv: 53.0) Gecko / 20100101 Firefox / 53.0

  • SO e versão :
    windows 10

Informações adicionais

n / D

Comentários muito úteis

Ok, apenas para adicionar uma atualização sobre isso.
Quando eu passo a largura no método de inicialização, tudo funciona sem o hack acima.

$("select").chosen({
                search_contains : true, // kwd can be anywhere
                max_selected_options: 1,
                max_shown_results : 5, // show only 5 suggestions at a time
                width: "95%",
                no_results_text: "Oops, nothing found!"
            } );

Todos 6 comentários

A 1.6.2 escolhida não é a versão mais recente - você ainda tem problemas com a versão mais recente lançada ?

Vou ter certeza de tê-lo e informá-lo.

Sim, o problema ainda existe, mesmo na última versão 1.7.

Verifiquei alguns tópicos de stackoverflow e descobri essa correção.

$('.modal').filter('[class*=_dialog]').on('show.bs.modal', function () {
                // This makes the dialog expand when shown in a bootstrap dlg
                $(this).find('.chosen-container').css({width: "100%"});
            });

O aplicativo é personalizado e para um cliente e não pode fornecer um link para ele.

Ok, apenas para adicionar uma atualização sobre isso.
Quando eu passo a largura no método de inicialização, tudo funciona sem o hack acima.

$("select").chosen({
                search_contains : true, // kwd can be anywhere
                max_selected_options: 1,
                max_shown_results : 5, // show only 5 suggestions at a time
                width: "95%",
                no_results_text: "Oops, nothing found!"
            } );

Obrigado pelo hack @lordspace. Levei algum tempo para encontrar sua correção.

Não sei por que esse problema foi fechado no repositório "bootstrap-escolhido" (https://github.com/alxlit/bootstrap-chosen/issues/54).

Sem problemas. Talvez eu tenha fechado assumindo que não é um bug se for corrigível por meio de opções, mas quando penso nisso agora, deve funcionar fora da caixa.

Esta página foi útil?
0 / 5 - 0 avaliações