Chosen: Escolhido é "cortado" quando colocado na área com "overflow: hidden".

Este é o mesmo que o problema # 59

Isso não é inevitável, já que o elemento contêiner é, "overflow: hidden", é assim que o CSS funciona. A única maneira de contornar isso é renderizar o menu suspenso fora do contêiner e, em seguida, usar o posicionamento absoluto.

Sim, concordo com dfischer. Não parece um problema de Escolhido. Por definição, a propriedade overflow especifica o que acontece se o conteúdo ultrapassar os limites de um elemento. Se você não quiser que o _overflow_ seja ocultado, altere essa propriedade.

Embora seja verdade, acho que este é um caso de uso comum com caixas de diálogo. (Especialmente o diálogo jquery)

É um caso de uso comum, porém com base neste tíquete, como mencionei anteriormente ... toda a estrutura e implementação tem que mudar se você quiser fazer isso.

Você _requerido_ para renderizar fora do contêiner para que isso aconteça e, em seguida, usar a magia jQuery / JS para descobrir o posicionamento em relação ao gatilho.

O caso do jQuery Dialog não depende de um elemento de contêiner, então ele apenas usa o posicionamento com base nas dimensões centrais e na largura do diálogo.

Este é mais um problema de CSS, não um problema de Escolhido. Não coloque overflow: hidden no container. Você vai ter que usar outra técnica para limpar os flutuadores abaixo dele, se é isso que você está fazendo.

Acabei de escrever um código que acho que faz o que você está procurando:

$ .fn.extend ({
escolhida: função (dados, opções) {
if ($ (this) .parent (). css ("overflow") == "hidden") {
// obtenha os deslocamentos entre pai e filho para calcular a diferença
// quando empurramos para absoluto
var y = $ (this) .offset (). top - $ (this) .parent (). offset (). top,
x = $ (this) .offset (). left - $ (this) .parent (). offset (). left,
$ t1 = $ ("<div />", {
css: {
"posição": "relativa",
"height": $ (this) .parent (). height,
"largura": $ (este) .parent (). largura
}
}),
$ t2 = $ ("<div />", {
css: {
"posição": "absoluta",
"top": y,
"esquerda": x
}
});
$ t1.insertBefore ($ (this) .parent ());
$ (this) .parent (). appendTo ($ t1);
$ t2.appendTo ($ t1);
$ (this) .appendTo ($ t2);
}
return $ (this) .each (function (input_field) {
if (! ($ (this)). hasClass ("chzn-done")) {
retornar novo Escolhido (isto, dados, opções);
}
});
}
});

(aliás, sou novo no github hoje, então se houver um lugar diferente onde eu deveria postar o código, me avise)

Esse código efetivamente faz o seguinte:

1. calcule o deslocamento entre a caixa de seleção e o pai.
2. crie um div pai com as mesmas dimensões de seu overflow oculto e definido como relativo.
3. crie um pai para a caixa de seleção criando o elemento como absoluto usando os deslocamentos xey da etapa 1.
4. insira o novo pai antes do pai do select, acrescente o overflow div dentro do novo pai, acrescente aquele novo pai select dentro do pai mestre, acrescente o select ao novo pai filho.

Idéia interessante Matthew, mas acho que não vai funcionar em uma caixa de diálogo jQuery-UI, vai?

É mais provável que o elemento suspenso (.chzn-drop) precise ser retirado do contêiner .chzn e até o corpo do documento ...

Basta adicionar um estilo à página e sua resposta é sim:

.ui-dialog { overflow: visible; }

Não funciona para mim, já que eu crio minhas páginas usando div's como colunas (ao contrário de td's e tabelas).
Eu uso " overflow: hidden " para impedir que o conteúdo fugitivo arruíne as divs vizinhas.

Suponho que muitos de vocês usam a mesma estrutura.

Isso não funcionará, pois as caixas de diálogo estão definidas para overflow: auto para que possam
tenha barras de rolagem, se necessário.

Na sexta-feira, 29 de julho de 2011 às 23:47, Ethaniel
[email protected]
escrevi:

Não funciona para mim, já que eu crio minhas páginas usando div's como colunas (ao contrário de td's e tabelas).
Eu uso " overflow: hidden " para impedir que o conteúdo fugitivo arruíne as divs vizinhas.

Suponho que muitos de vocês usam a mesma estrutura.

Responda a este e-mail diretamente ou visualize-o no GitHub:
https://github.com/harvesthq/chosen/issues/86#issuecomment -1681303

Antes de prosseguirmos nesta conversa, o que fiz foi uma correção teórica. Não pode ser aplicado a todos os cenários porque basta um elemento com um contra-atributo para estragar tudo. A solução acima com o estouro visível só funcionará com a opção de diálogo redimensionável: falso. Por que você precisa ter um estouro de seleção fora de uma caixa de diálogo?

Ok, aqui estão algumas imagens que esperamos esclarecer o problema.

http://i.imgur.com/9ZY9O.png
http://i.imgur.com/c2PLo.png
http://i.imgur.com/1oqZ7.png
http://i.imgur.com/ZBrQj.png

As capturas de tela 1 e 2 mostram como ele se comporta, não há espaço suficiente para
a lista suspensa "dentro" da caixa de diálogo, para rolar e ficar oculta como um
resultado. Isso é muito desajeitado e feio, e não como o
os controles selecionados funcionam (eles aparecem por cima do conteúdo, não importa
quão profundos estão ou qual é o seu estilo de estouro.)

As capturas de tela 3 e 4 mostram minha solução atual, que é colocar um todo
monte de espaço abaixo do menu suspenso. Isso também é feio e torna a forma
mais difícil de usar.

Então, para resumir, o ponto real é que os controles de seleção nativos não são
restrito ao contêiner pai e, se possível, o
o controle de seleção aprimorado também não deve ser, uma vez que foi projetado para ser
um substituto imediato para o controle nativo.

Teoricamente, isso pode ser feito, mas exigiria um sistema de construção / posicionamento completamente diferente para o plugin escolhido. Essa mudança seria extensa e exigiria uma reescrita de cerca de 30% do plugin atual. Eu considero isso uma solicitação de recurso e não um bug. Todos os navegadores têm uma renderização padrão para elementos selecionados. Hosen o replica usando divs, mas não é tratado como um elemento de seleção.

Como eu disse, a única maneira de fazer isso é posicionando-se absolutamente FORA do elemento acionado. Não há outra maneira. Correto em @medelbrock

Embora fosse muito bom ter escolhido se comportar como um widget de navegador, concordo que isso deve ser considerado um recurso, não um bug. No momento, podemos definir uma altura máxima?

@ Enveloper : Eu div.chzn-drop ainda está contido na caixa de diálogo, portanto, será recortado independentemente de estar absolutamente posicionado ou não.

A única maneira de parar isso é puxar div.chzn-drop para fora da caixa de diálogo e torná-lo um filho de <body> , mas como todos estão apontando, essa é uma mudança maior do que qualquer outra está disposto a sujar as mãos tentando.

Infelizmente, usar overflow:visible não é uma opção, a caixa de diálogo precisa ser rolável se necessário.

Acho que resolvi o problema definindo a posição drop down para absoluto e sempre que mostrar a configuração drop down é a posição.
por exemplo, alterar (editar o javascript)

this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
});

para

var parent = this.dropdown.parent();
var offset = parent.offset();
dd_top = offset.top + parent.outerHeight();
dd_width = parent.width();
this.dropdown.css({
    "top": dd_top + "px",
    "left": offset.left,
    "width": dd_width + "px"
});

Estou enfrentando esse problema enquanto tento fazer o Chosen funcionar dentro de uma caixa de diálogo Wijmo / jQuery UI. Posso estar fora do meu alcance aqui, mas não há uma solução bastante simples de fazer a parte "suspensa" ter "display: none" enquanto estiver oculto e, em seguida, "display: block" quando mostrado? Você ainda terá as barras de rolagem quando a lista suspensa estiver aberta, mas isso provavelmente é melhor do que ter as barras de rolagem sempre presentes.

A correção (testada no Chrome 13, Firefox 7 e IE 9):

Em escolhido.css:

.chzn-container .chzn-drop {
posição: fixa;
}

e em Chosen.prototype.results_show

var offset = this.container.offset ();
this.dropdown.css ({
"top": (offset.top + dd_top) + "px",
"left": offset.left + "px",
"display": "bloquear"
});

http://img30.imageshack.us/img30/4094/chosen3.png

É isso aí, bom pensamento @levushka. Resolvido agora em meu ramo: https://github.com/tompaton/chosen/commit/fda07051161f3fffe6049362b6c9b66ffbe857d1

Ok, é um pouco mais complicado do que isso. A correção acima não funcionou se a página foi rolada.

Eu atualizei meu repositório com um changeset que meio que corrige, a lista suspensa está posicionada corretamente agora, mas se a página for rolada enquanto a lista suspensa estiver visível, ela não se moverá conforme o esperado. Isso é irritante, mas não é um empecilho.

O iOS 5 _pode_ resolver isso, mas o iOS atualmente não oferece suporte a position: fixed da mesma forma que os navegadores de desktop. O escolhido funciona muito bem na área de trabalho, mas isso pode limitar seu uso em navegadores móveis mal projetados ...

Não estou apenas mexendo com a Apple aqui, a versão mais antiga do Android também carece de suporte para a posição: fixa.

A partir do jQuery 1.7 (ainda não lançado, mas em release candidate), eles têm um teste integrado para suporte a posição fixa de CSS:
http://bugs.jquery.com/ticket/6809

Pode valer a pena detectar o jQuery 1.7 e usar seu resultado, ou copiar seu código e obter um resultado separado caso contrário.

+1 para a posição no final do elemento do corpo.

verifique o widget jquery "autocomplete". muito boa solução para esse problema:

http://jqueryui.com/demos/autocomplete/

ótimo plugin a propósito.

Eu tive esse problema principalmente em navegadores webkit. O IE vai mentalmente com o escolhido, então eu desativei se ie. Usando jquery, eu verifico se o navegador é um webkit e ajusto o estouro do div que contém minhas escolhas como:

if($.browser.webkit) $(this).css("overflow",($(this).is(":visible"))?"visible":"hidden");

onde este é o div contendo os escolhidos.

+1 @levushka e @tompaton Não perfeito, mas bom o suficiente. Por muito pouco :)

A solução

em Chosen.prototype.results_show

substituir:

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

com:

if($('.popup').length!=0) {

  var offset = this.container.offset();
  this.dropdown.css({
    "top": (offset.top+dd_top) + "px",
    "left": offset.left + "px",
    "display": "block"
  });

} else {

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

}

CSS:

   .popup .chzn-container .chzn-drop { position:fixed; }

Se você estiver usando jQuery UI ou outra coisa, pode ter problemas com o z-index, então defina o z-index escolhido para valores mais altos (jQuery UI é 1010+)

Agora está funcionando em FF e para o Chrome você precisa:

     .popup { overflow-x:visible; overflow-y:visible; }

os elementos do amante podem ter overlow: escondido sem problemas.

Por que não renderizar a lista suspensa no corpo e usar a função de posição da IU do Jquery para posicionar a caixa? http://jqueryui.com/demos/position/. Este é o método padrão usado para muitos widgets jquery ui.

$ (".czn-drop") .position ({
de: $ ("#container"),
meu: "topo esquerdo",
em: "inferior esquerdo",
});

Perdoe-me por interromper, tive o mesmo problema ao exibir o menu suspenso escolhido em uma caixa de diálogo jQueryUI.
Tentei o procedimento normal com estouro, mas isso estava atrapalhando minhas outras caixas de diálogo.

Em vez disso, o que fiz foi definir minha caixa de diálogo com uma altura fixa e definir a queda escolhida para uma altura fixa também.
Seria bom ter a opção de fazer isso a partir das opções escolhidas em vez de css.

.chzn-drop {
estouro: automático;
altura máxima: 75px;
}

Talvez isso ajude outra pessoa.

Com licença para uma pergunta bastante n00bish / RTFM, mas como posso renderizar a lista suspensa fora do contêiner (digamos, em body )? No momento, a única coisa que me vem à mente é bifurcar o plug-in e enfiar esse pedaço de código nele. Deve haver uma maneira mais elegante de conseguir isso.

Existe um evento que o escolhido dispara quando o drop down é aberto / fechado. Nesse caso, posso apenas alterar a configuração de estouro dos divs pais para visível e depois voltar. Eu tentei isso com:

$(".chzn-drop").show(0, function () { 
   $(this).parents("div").css("overflow", "visible");
});    

E, sim, funcionou. Mas, então, quando eu adicionei:

$(".chzn-drop").hide(0, function () {
   $(this).parents("div").css("overflow", "");
});

Não funcionou mais. Eu presumo porque tenho vários controles escolhidos no formulário. Se eu pudesse adicionar esse código dentro de um evento de abertura / fechamento, acho que isso me levaria aonde quero chegar.

Você pode ouvir liszt:showing_dropdown e liszt:hiding_dropdown enviados no elemento selecionado original

Excelente ... então isso resolveu meu problema:

$ (". chzn-select"). on (" liszt: showing_dropdown ", function () {
$ (this) .parents ("div"). css ("overflow", "visible");
});
$ (". chzn-select"). on (" liszt: hidden_dropdown ", function () {
$ (this) .parents ("div"). css ("overflow", "");
});

Claro, pode não funcionar com todos os layouts.

Obrigado ... BOb

Bifurquei o código para tornar o filho suspenso de <body/> . Ainda não testei o suficiente, mas está funcionando perfeitamente aqui -> https://github.com/gil/chosen

Você pode ver se isso resolve seu problema, @tompaton? Acho que só preciso detectar a rolagem agora, para corrigir a posição manualmente.

O garfo corrigiu o problema de exibição para mim e funcionou bem na parte inferior da página, onde limitou a altura exibida a algo razoável. No entanto, a bifurcação interrompeu o funcionamento da funcionalidade de seleção múltipla.

@geoffweatherall Sério? Bom! : D Sobre o problema da seleção múltipla, o que parou de funcionar? Você poderia tentar o arquivo example.jquery.html e me dizer se não está funcionando? Para mim, parece estar tudo bem.

Sim, os exemplos funcionam bem (FF 12).

O único exemplo de seleção está em uma página html razoavelmente simples com "painéis" que usam overflow oculto. No entanto, o exemplo de seleção múltipla está em uma "caixa de diálogo" criada usando o colorbox (http://www.jacklmoore.com/colorbox) - não me pergunte por que, o projeto era assim quando cheguei. Eu acho que pode ter algo a ver com isso, vou dar uma olhada nisso.

O fork corrige o problema de corte em vários locais em nosso aplicativo, incluindo seleções múltiplas que não estão aninhadas em colorboxes (http://www.jacklmoore.com/colorbox). Acredito que o problema com o colorbox não é culpa do escolhido. Grande garfo :-)

Na verdade, encontrei um problema com o fork que aparece na página de amostra (example.jquery.html). Para o controle de seleção múltipla, se você clicar no controle para abrir a lista de opções e, em seguida, usar as setas para cima e para baixo para navegar na lista, a lista de opções se moverá de forma surpreendente para o topo da página. Esse problema não ocorre para seleções únicas. Testado em FF12, Chrome 18 e IE8.

@geoffweatherall Talvez o problema com a caixa de cores seja que ela está sendo renderizada no menu suspenso Escolhido. Experimente algo assim para ver se ajuda:

.chzn-drop {
    z-index: 999999 !important;
}

Ou tente definir a opacidade da caixa de cores para 0,1 para verificar se você pode ver o menu suspenso abaixo da caixa de cores.

O outro problema, com as chaves, tentarei encontrar uma solução. Não usei a seleção múltipla no projeto em que estou trabalhando agora, então quase não testei. Focado mais na opção de seleção única.

Ok, tentei fazer isso e consegui ver os menus suspensos, mas a posição está errada. Eles estão caindo um pouco abaixo da caixa de texto. Aqui está um jing mostrando o comportamento. http://screencast.com/t/c4PCIHC176RX

Oi gil,

Tentei sua versão e está funcionando! Muito obrigado!
Há apenas uma pequena coisa que parou de funcionar .. É a opção disable_search_threshold. O campo de pesquisa não desaparecerá.

Você tem alguma ideia?

Obrigado!

Esquece! Eu mesmo consegui consertar, no entanto ... talvez você deva mudar isso no código também:

Mudar:

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.container.addClass("chzn-container-single-nosearch");
    } else {
      this.container.removeClass("chzn-container-single-nosearch");
    }

Para

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.dropdown.addClass("chzn-container-single-nosearch");
    } else {
      this.dropdown.removeClass("chzn-container-single-nosearch");
    }

Qual é o status desta bifurcação? Ele foi mesclado com o mestre? Ou ainda está em teste?

Um outro problema ... o fork parece funcionar para mim, mas no firefox vejo a div suspensa na parte inferior da página. Parece que a posição esquerda negativa não o move para fora da área de exibição. Talvez seja devido a alguns outros estilos que eu ... pensei. Qualquer ideia? Por que a exibição não está definida para nenhum?

Fiz uma solicitação de pull há muito tempo para minha correção original, mas foi
nunca aceito (não tenho ideia do porquê).

Muitos ajustes adicionais foram sugeridos neste tópico
desde então, não brinquei com nenhum deles ainda, e não verifiquei
para ver se alguém tem um garfo que os incorpora (se não houver
um, alguém deve criar um, e se houver, seria um bom
resposta à sua pergunta.)

Em quinta-feira, 7 de junho de 2012 às 6h44, Bob Archer
[email protected]
escrevi:

Um outro problema ... o fork parece funcionar para mim, mas no firefox vejo a div suspensa na parte inferior da página. Parece que a posição esquerda negativa não o move para fora da área de exibição. Talvez seja devido a alguns outros estilos que eu ... pensei. Qualquer ideia? Por que a exibição não está definida para nenhum?

---

Responda a este e-mail diretamente ou visualize-o no GitHub:
https://github.com/harvesthq/chosen/issues/86#issuecomment -6162299

Eu tentei todos eles, e nenhum deles funcionou para mim, porque eu tenho vários conjuntos de campos que estão ocultos e um formulário longo que rola. Portanto, minha solução foi tornar o menu suspenso estático e oculto inicialmente, e mostrado quando aberto, o que estica o contêiner pai. Isso funciona em todos os meus formulários, mesmo se estiver na parte inferior da tela.

em Chosen.prototype.results_show:

      this.dropdown.css({
        "top": dd_top + "px",
        "left": 0,
        "display": "block"
      });

Em Chosen.prototype.results_hide:

      this.dropdown.css({
        "left": "-9000px",
        "display": "none"
      });

em escolhido.css:

.chzn-container .chzn-drop {
  position: static;
  display: none;
}

@gil , só quero agradecer seu fork, estava prestes a desistir de usar o Chosen no meu projeto por causa desse bug.

Sinceramente, estou bastante surpreso que os caras da colheita não vejam a falha inerente em vincular um pop-up flutuante a um contêiner restrito. Mesmo independentemente das regras de estouro, essa não é uma boa ideia para uma biblioteca pública que não tem ideia do que as pessoas podem estar fazendo em torno do widget.

Ei pessoal! É bom saber que meu garfo está ajudando algumas pessoas com esse problema ... :)

Não sei se eles estão planejando mudar o código ou se fundir com algumas das soluções propostas aqui. Não sabemos se podemos assumir que esta é a melhor solução para todos os casos. Vamos continuar testando e talvez enviar uma solicitação pull com todas as alterações.

@geoffweatherall Corrigi o código com algo que acho que irá ajudá-lo com o problema do teclado. Por favor me diga se funciona! ;)

@PilotBob Você ainda tem o problema daquele jing? Sobre o outro problema, testei example.jquery.html no Firefox 12 e parece estar bem. Talvez você possa tentar substituir todos os left:-9000px que encontrar por display:none . Não conheço o código bem o suficiente para dizer a você, mas como estou configurando display:block em results_show() , isso pode ajudá-lo.

@pruimmartin Obrigado por sua correção e desculpe por demorar muito para responder. Já mesclei a correção no meu código!

gil - não, parece que não está mais acontecendo, e eu não mudei nada. Imagino que pode ter havido um erro js em outro lugar que o estava causando. No entanto, tenho outros problemas com o escolhido e estou pensando em substituí-lo por outro. Isso ocorre principalmente devido à falta de atualizações sendo feitas no mestre.

@PilotBob Estou considerando este projeto: https://github.com/ivaynberg/select2
Eles têm o mesmo problema de estouro, mas acho que planejam mudar na versão 3.

@gil - Sua solução funciona muito bem, mas com largura de li.search-field permanece fixa em 25px . Em outras palavras, quando eu carrego sua página de exemplo, os menus são lindamente anexados ao elemento body , mas o texto do espaço reservado e qualquer digitação são restritos a 25px largura. Na verdade, parece que o método search_field_scale não existe. Estou faltando alguma coisa aqui?

@rreusser Removi o método search_field_scale , pois ele só era usado para seleção múltipla e para calcular a posição corretamente. Isso não era mais necessário para este garfo. Qual navegador / versão / sistema operacional você está testando? Para mim, o tamanho do campo de pesquisa está correto em example.jquery.html .

@rreusser Ei, desculpe. Agora eu vejo o que há de errado. Vou tentar consertar mais tarde hoje.

Sem problemas, @gil! Obrigado pela resposta rápida! Preciso fazer mais alguns experimentos, mas também pode ser útil permitir o apego a um elemento arbitrário - o que também deve ser bem trivial, eu acho. Eu tenho uma caixa de seleção dentro de um div de rolagem e, embora sua solução evite o recorte, o menu não se move com o div quando rolado. Acho que tudo o que é necessário é um div extra em algum lugar, mas isso vai exigir alguns ajustes.

@rreusser Eu

E sobre anexar a um elemento diferente, eu estava pensando em torná-lo configurável. Mas você pode resolver seu problema de rolagem com um pouco de configuração. Quando seu <select /> não é filho direto de seu div de rolagem, tente o seguinte:

$(".your-select").chosen({
    overflow_container: $(".scrolling-div")
});

Mas se o nó pai de <select /> era seu <div /> , isso não deveria ser necessário.

@gil , este fork será mesclado com o master? Ou ainda está em teste? Eu também tive um problema com os controles do teclado na bifurcação, a tecla de seta para baixo não dispara os métodos results_show ou results_toggle. Obrigado :-)

@myfriendtodd Não sei ainda, talvez eu possa enviar um Pull Request quando todos acharem que está estável. Mas ainda acho que precisa de mais testes. Vou tentar consertar os problemas do teclado neste fim de semana. Obrigado!

@myfriendtodd Ei, acho que

obrigado @gil irá informá-lo sobre o resultado. Obrigado por toda sua ajuda :-)

@gil Muito obrigado pelo seu garfo. A correção funcionou perfeitamente para mim - incrível!

No entanto, estou usando o Kickstrap para definir o estilo de Chosen para caber no Twitter Bootstrap. Isso resulta em Escolhido com esta correção muito interrompida - o conteúdo da lista suspensa aparece na parte inferior da página, sem estilo - https://skitch.com/dyad/euys2/login . Pelo que eu sei, tudo o que o Kickstrap faz é sobrescrever os estilos Escolhidos padrão.

O arquivo LESS para as alterações feitas no estilo pode ser encontrado em https://github.com/ajkochanowicz/Kickstrap/blob/master/extras/chosen/chosen.less - há algo óbvio que sua correção edita que explica por que isso pode estar acontecendo?

Muito obrigado mesmo.

Ei pessoal,

Estou trabalhando em uma nova versão com uma abordagem diferente, em vez de anexar a lista suspensa ao corpo. Esta versão é muito mais limpa e, com sorte, reduzirá muitos bugs, já que a mudança não é tão grande. Vocês podem experimentar para ver se funciona? Está em um novo ramo:

https://github.com/gil/chosen/tree/new_version

@conatus Você pode tentar com esta versão também? A última versão no branch "master" teve muitas mudanças no arquivo css, esta versão mudou apenas 3 linhas. Altere-os no css escolhido do Kickstrap:

• Linha 4, mude de "posição: relativa;" para "posição: estático;".
• A linha 13 muda de "posição: absoluta;" para "posição: fixa;".
• Na linha 128, insira uma nova linha "display: none;", abaixo da "esquerda: -9000px;"

Espero que isso funcione! ;)

Além disso, esta nova versão está em sincronia com o branch master do harvesthq!

Desculpe, eu não fiz o acompanhamento antes, mas chegamos a uma parte diferente do projeto e isso desapareceu muito rapidamente! Vou testar e avisar assim que tiver uma chance. Muito obrigado pelo seu esforço contínuo!

@gil - Estou testando sua versão e, embora funcione muito bem, há um pequeno problema: quando escolhido é colocado dentro de um elemento de posição fixa, rolar a página deslocará o menu suspenso. Este é realmente um problema com o jQuery Autocomplete também.

Só consigo pensar em 2 soluções possíveis para isso:
1) Se escolhido for colocado dentro de um elemento de posição fixa, a lista suspensa deve ser colocada dentro de chzn-container e ter uma posição fixa também. A posição superior deve ser calculada pela posição fixa do contêiner
2) Recalcule a posição suspensa durante a rolagem

A terceira opção é tornar o menu suspenso fixo sempre que a seleção estiver em um contêiner de posição fixa.

@ragulka @ChiperSoft Vejo o problema ... Só para ter certeza, esse jsfiddle está reproduzindo o que vocês estão dizendo? http://jsfiddle.net/QY256/

Vou tentar fazer algo a respeito. Há uma nova opção chamada overflow_container que tratará dos problemas de rolagem, como você pode ver ao rolar apenas o div. Mas o problema aqui é quando você rola a janela, ela será posicionada incorretamente.

Eu estava pensando em fazer o Chosen fechar, quando algo rola, já que o manuseio do pergaminho causa alguns outros problemas menores (como quando seu <select /> está apenas parcialmente visível).

@ragulka @ChiperSoft Além disso, como uma correção temporária, vocês podem tentar mudar a linha 640, dentro do método update_position , de:

"top": (offset.top + dd_top) + "px",

para:

"top": (offset.top + dd_top - $(window).scrollTop()) + "px", ?

@gil Sim e não - o jsfiddle que você forneceu mostra o problema, mas para mim ele apareceu quando eu estava rolando o corpo (meu elemento fixo não tinha nenhuma barra de rolagem). Em Your jsfiddle, o problema parece aparecer quando estou rolando o conteúdo do elemento fixo, mas não ao rolar o corpo.

@ragulka eu sei que não é a melhor solução, mas acho que

$(".your-select").chosen({
    overflow_container: $(".your-fixed-div").add( document )
});

Isso deve manipular a rolagem no div e em document e corrigir a posição.

Mas, como eu disse, acho que vou mudar isso mais tarde para fazer Chosen se esconder quando o usuário rolar algo.

Este pode não ser um bug escolhido, mas mudei para select2 como uma queda em substituição para escolhido e o problema foi embora sem a necessidade de fazer qualquer solução alternativa.

Muito obrigado por isso.

Nesse ínterim, o Kickstrap foi atualizado - https://github.com/ajkochanowicz/Kickstrap/blob/beta/assets/Kickstrap/apps/chosen/chosen.css. Seu novo branch funciona maravilhosamente, no entanto, as mudanças que você sugere para o Kickstrap CSS não parecem ter o efeito. O que acontece é que a própria lista suspensa não aparece mais. Alguma ideia? Muito obrigado.

Obrigado @gil !!! Sua filial (https://github.com/gil/chosen/tree/new_version) corrigiu meu problema com esse problema específico.

Obrigado por todos os conselhos. Fiz algumas pequenas modificações nas sugestões acima para que os menus suspensos funcionem com os modais Bootstrap v2.1.1 e Chosen v0.9.11. Pequenas alterações foram necessárias para que o .chzn-drop fosse posicionado corretamente assim que fosse reaberto depois que a página fosse rolada.

Espero que isso ajude outras pessoas.

CSS

.modal .chzn-container .chzn-drop {
  position:fixed;
}

Javascript

Chosen.prototype.results_show = function() {

      var self = this;

      // hide .chzn-drop when the window resizes else it will stay fixed with previous top and left coordinates
      $(window).resize(function() {
        self.results_hide();
      });

      var dd_top;
      if (!this.is_multiple) {
        this.selected_item.addClass("chzn-single-with-drop");
        if (this.result_single_selected) {
          this.result_do_highlight(this.result_single_selected);
        }
      } else if (this.max_selected_options <= this.choices) {
        this.form_field_jq.trigger("liszt:maxselected", {
          chosen: this
        });
        return false;
      }
      dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
      this.form_field_jq.trigger("liszt:showing_dropdown", {
        chosen: this
      });

      if($('.modal.in').length) {
        // when in a modal get the scroll distance and apply to top of .chzn-drop
        var offset = this.container.offset();
        var scrolly = parseInt($(window).scrollTop(), 10);
        scrolly = scrolly < 0 ? 0 : scrolly;
        var toppy = offset.top+ dd_top - scrolly;
        this.dropdown.css({
          "top": toppy + "px",
          "left": offset.left + "px"
        });
      } else {
        // proceed as normal
        this.dropdown.css({
          "top": dd_top + "px",
          "left": 0
        });
      }

      this.results_showing = true;
      this.search_field.focus();
      this.search_field.val(this.search_field.val());
      return this.winnow_results();
    };

Então, eu estava brincando um pouco com o Chosen 0.9.11 e identifiquei as mudanças que precisava fazer no Chosen ...

Estou usando Chosen dentro de uma caixa de diálogo jQueryUI fortemente modificada que é arrastável e tem uma altura máxima com overflow: scroll.

Para que o Chosen se comporte como eu quero, mudei ".chzn-container .chzn-drop" para " position: fixed " e adicionei " display: none ". Então, em "Chosen.prototype.results_hide", adicionei " display: none " a "this.dropdown.css" ...

this.dropdown.css({
    "left": "-9000px",
    "display": "none"
});

E em "Chosen.prototype.results_show" substituí o conteúdo de "this.dropdown.css" por " display: block ".
Para obter a posição correta da div .chzn-drop, adicionei a função de posição jQueryUI.

this.dropdown.css({
    "display": "block"
}).position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

Em "Chosen.prototype.search_field_scale" mude ...

return this.dropdown.css({
    "top": dd_top + "px"
});

... para ...

return this.dropdown.position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

Agora eu só tenho um problema:

Eu preciso ouvir os eventos de arrastar do jQuery UI Dialog para fechar o drop Chosen quando alguém começa a mover o diálogo ao redor. Já consegui isso, mas o código está muito sujo :-)

Existe alguma chance de a correção não trivial deste branch https://github.com/gil/chosen/commits/new_version ser portada para GWTChosen?
GWTChosen é incrível. No entanto, no estado atual, ele não pode ser usado com LayoutPanels.

Que tal adicionar um novo recurso à biblioteca Chosen onde a lista seria renderizada acima do campo de texto simplesmente adicionando uma classe diferente ou uma nova? Dessa forma, o script não precisa renderizar a lista fora do estouro de empacotamento oculto e provavelmente resolveria a maioria dos problemas que os outros têm. PS: Não considero isso um problema de estouro: oculto faz exatamente o que deveria estar fazendo. É mais legal ter recursos. Obrigado.

+1 Por sugestão de Klikerko.

Assim como @sillysachin eu uso GWTChosen e tenho o mesmo problema com LayoutPanels, overflow: hidden e ChosenListBox: /

Alguém sabe consertar isso? @sillysachin , você descobriu algo desde que postou aqui?

Tnx com antecedência :)

Nós meio que corrigimos ad-hoc puxando o div suspenso do contêiner pai. Infelizmente, estou atolado com o release crush e levarei um tempo para limpar o patch antes de enviá-lo aqui.

Este commit em https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983 corrige razoavelmente bem. É relativamente atualizado, mas fiz apenas para jQuery.

@robmcguinness eu tive que modificá-lo um pouco para funcionar. No entanto, isso cria um bug. onde você não pode fechar a lista suspensa.

 Chosen.prototype.results_show = function() {

 this.dropdown.css({
      "display": 'block'
    });

  var dd_top;
  $(window).resize(function() {
    this.results_hide();
  });

  if (this.is_multiple && this.max_selected_options <= this.choices_count()) {
    this.form_field_jq.trigger("chosen:maxselected", {
      chosen: this
    });
    return false;
  }

  dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
  this.container.addClass("chosen-with-drop");
  this.form_field_jq.trigger("chosen:showing_dropdown", {
    chosen: this
  });

  if($('.modal.in').length) {
    // when in a modal get the scroll distance and apply to top of .chzn-drop
    var offset = this.container.offset();
    var scrolly = parseInt($(window).scrollTop(), 10);
    scrolly = scrolly < 0 ? 0 : scrolly;
    var toppy = offset.top+ dd_top - scrolly;
    this.dropdown.css({"top": toppy + "px","left": offset.left + "px"});
  } else {
    // proceed as normal
    this.dropdown.css({
      "top": dd_top + "px",
      "left": 0
    });
  }




  this.results_showing = true;
  this.search_field.focus();
  this.search_field.val(this.search_field.val());
  return this.winnow_results();
};


Chosen.prototype.results_hide = function() {
  if (this.results_showing) {

    this.dropdown.css({
      "display": 'none'
    });

    this.result_clear_highlight();
    this.container.removeClass("chosen-with-drop");
    this.form_field_jq.trigger("chosen:hiding_dropdown", {
      chosen: this
    });
  }
  return this.results_showing = false;
};

e tive que adicionar uma largura ao CSS, senão iria 100% da largura do site.

.modal .chosen-container .chosen-drop {
posição: fixa;
largura: 300px;
}

Consegui corrigir os problemas com o código acima. Compatível com a versão 1. No entanto, o meu é mais um equipamento para funcionar. mas até agora está funcionando direito. O último problema que vejo é redimensionar o navegador, o mod atual não funciona.

Alguém sabe se alguma das soluções possíveis para este problema será incorporada ao branch master em breve? Este é um problema para mim = /.

Passamos a usar o Select2 ... ele também tem mais recursos.

Na quinta-feira, 19 de dezembro de 2013 às 11h24, Daniel Hoffmann Bernardes <
notificaçõ[email protected]> escreveu:

Alguém sabe se alguma das soluções possíveis para este problema será
fundido no branch master em breve? Este é um problema para mim = /.

-
Responda a este e-mail diretamente ou visualize-o em Gi tHubhttps: //github.com/harvesthq/chosen/issues/86#issuecomment -30942420
.

Obrigado PilotBob, o escolhido não é mais mantido? Nesse caso, você pode querer atualizar a documentação.

Não é meu projeto. Eu "era" um usuário disso. Devido a vários problemas que encontramos
uma alternativa.

Na quinta-feira, 19 de dezembro de 2013 às 11h53, Daniel Hoffmann Bernardes <
notificaçõ[email protected]> escreveu:

Obrigado PilotBob, o escolhido não é mais mantido? Se sim, você pode querer
para atualizar a documentação.

-
Responda a este e-mail diretamente ou visualize-o em Gi tHubhttps: //github.com/harvesthq/chosen/issues/86#issuecomment -30945150
.

@DanielHoffmann Chosen ainda é mantido ativamente. Select2 era originalmente um fork de Chosen, mas desde então se distanciou o suficiente para ser uma coisa própria.

Escolhido é intencionalmente mantido simples - foi planejado para ser um substituto imediato para select s, portanto, evita muitos recursos e configurações complicados. O Select2 tomou o caminho oposto e adicionou muitos, muitos recursos e configurações - depende de você qual dessas filosofias você valoriza mais.

Quanto a este problema _específico_, infelizmente é apenas isso: um problema, não uma solução. Se alguém enviar uma solicitação pull para corrigi-lo, ela será considerada para mesclagem. No entanto, OSS não é o trabalho principal de nenhum dos mantenedores - eles trabalham nisso quando podem em seus empregos de tempo integral. Portanto, como sempre, "solicitações de pull aceitas" se você quiser tentar consertar sozinho!

quando esse problema será corrigido? é tão antigo, mas fundamental para muitos projetos! por favor, resolva o mais rápido possível!

obrigado!

existem muitas correções nos garfos do escolhido, então por que não usar uma dessas correções?

@domnulnopcea Nunca houve nenhum PR enviando uma correção para isso, apenas relatórios duplicados. Se você tiver uma ideia para consertar, envie um PR. Em seguida, iremos analisá-lo. Atualmente, não estou ciente de nenhum fork corrigindo este problema específico

Eu tenho uma correção para isso, não é um fork limpo, está enterrado em outro repositório e é apenas na versão jQuery. (Não, não estou orgulhoso de mim mesmo)

Ele funciona adicionando o elemento suspenso ao elemento body e definindo sua posição absolutamente quando a página é rolada ou redimensionada. Também funciona se a lista suspensa deve ficar acima ou abaixo do campo e a altura que deve ter (para que não seja cortado pela página).

Se isso é algo que você está interessado em fundir (e de fato não há outros fork), tentarei encontrar algum tempo para tirar o pó e criar um pull a request.

https://gist.github.com/msaspence/11032254

@stof e https://github.com/tompaton/chosen?

commit: https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983

@domnulnopcea isto nunca foi submetido para inclusão na própria AFAIK da Chosen. Não podemos procurar em todos os garfos para examinar todo o trabalho feito nele. Estamos trabalhando em Chosen em nosso tempo livre, então não podemos dedicar semanas examinando milhares de commits em muitos repositórios para ver o que eles estão fazendo

@stof agradecemos muito seu trabalho. Eu o uso no meu próprio projeto (www.ubirimi.com) Mas agora que eu dei a você um link para um commit, você faria a gentileza de olhar para essas mudanças e aplicá-las ao repositório oficial escolhido?

Muito obrigado

Dado que não pode ser aplicado diretamente (o código mudou muito desde 11 meses), vai demorar algum tempo (e também requer testá-lo para ter certeza de que funciona corretamente). Então eu não posso fazer isso agora

@stof, obrigado por pensar em fazer isso! Eu agradeço!

@domnulnopcea se é tão importante para você, por que não

@msaspence Eu gostaria, mas não sou um desenvolvedor de front-end! Não estou muito acostumado com JS e todas essas coisas do lado do cliente

Passamos para o Select2, pois permite a recuperação de dados AJAX. Vocês podem querer dar uma olhada.

Acho que todos mudaram para Select2 neste estágio - há alguma vantagem em usar o Chosen?

Para mim funcionou perfeitamente a solução PilotBob!

Eu adicionei isso ao meu código:

$ (document) .ready (function () {
$ (". chzn-select"). on (" liszt: showing_dropdown ", function () {
$ (this) .parents ("div"). css ("overflow", "visible");
});
}

Muito obrigado!!!

O problema é que a posição da lista de opções é absolute , ela não expande o container pai. Uma solução que proponho é alterá-lo para float: left | right porque pode expandir o pai, se depois de adicionar um objeto DOM com clear:both

Resolvi isso (usado com o diálogo jquery-ui) com o seguinte em meu css:

#clone-budget-dialog {overflow: visible;}

@grduggan você pode propor uma solução no css da biblioteca?
Eu acho que sua solução é válida. Faça um pedido push!
+1

Nunca fiz isso antes. Vou ter que investigar. Seria bom ter no css.

Eu vejo um problema semelhante quando a caixa de seleção está perto do final da página. A caixa de seleção nativa resolve isso apenas abrindo em vez de cair. Por que não?

estouro: visível; na div do contêiner funcionou para mim! Obrigado.

você nem sempre precisa de overflow: hidden quando você usa floats, você também pode limpar floats usando isto em seu pai (remova o overflow: hidden):

&:antes da,
&:depois {
contente: " "; // 1
display: mesa; // 2
}
&:depois {
limpar ambos;
}

é assim que a classe clearfix funciona no bootstrap

Eu modifiquei o css (veja abaixo). Pareceu funcionar para o meu cenário.

.chosen-container .chosen-drop {
posição: relativa; / _Alterado de absoluto para evitar corte de estouro no contêiner_ /
Os 100 melhores%;
esquerda: -9999px;
índice z: 1010;
largura: 100%;
borda: 1px sólido #aaa;
borda superior: 0;
plano de fundo: #fff;
sombra da caixa: 0px 4px 5px rgba (0,0,0,0,15);
}

.chosen-container .chosen-results {
cor: # 444;
posição: relativa;
overflow-x: oculto;
overflow-y: automático;
margem: 0 4px 4px 0;
preenchimento: 0 0 0 4px;
altura máxima: 200px; / _Alterado de 240px_ /
-webkit-overflow-scrolling: touch;

/*Added to clearfix because we changed the chosen-drop to a relative position*/
&:before,
&:after {
    content: " "; // 1
    display: table; // 2
}
&:after {
    clear: both;
}

}

Envolver o select (e escolhido) em um elemento fieldset também pode produzir efeitos indesejados em navegadores de webkit (isto é, cortar quando um pai tem overflow: hidden ).
Isso ocorre porque o webkit adiciona min-width: -webkit-min-content; aos conjuntos de campos por padrão.

Isso resolveu o problema para mim:

fieldset { min-width: 0; }

@chassq hmm sua solução não funciona para mim, .. veja esta captura de tela:

Eu tenho uma div em torno dos seleções escolhidas com

  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;

Obrigado a todos que já deram a solução com position: fixed

Aqui está um jsfiddle com a solução (sobrescreve classes CSS escolhidas):
http://jsfiddle.net/jwbL8utx/1/;)

Ainda tenho 1 problema, ao rolar para baixo (usando max-height) o escolhido tem um deslocamento, como você pode ver aqui ao rolar para baixo e abrir o segundo escolhido:

http://jsfiddle.net/jwbL8utx/2/

Foi assim que resolvi:

http://jsfiddle.net/0w4a4dq5/1/

Essa correção não exige que você altere nenhum outro elemento além do próprio menu escolhido. Você notará que ele oculta o menu novamente se você 'tirar o cursor do mouse', mas isso é de acordo com minha exigência. Se você quiser mantê-lo no topo o tempo todo, pode vincular um evento de rolagem ao seu contêiner div e acionar o evento ' escolhido: close.chosen '.

@typologist Obrigado pela sua excelente solução.
Existem dois pequenos bugs em seu JS que eu gostaria de mencionar:
Na linha 51, deve ser

'top': y - $(document).scrollTop()

caso contrário, o pop-up pode ser deslocado sob certas condições

Na linha 23, em vez de usar

$('.chosen-container')

para vincular os eventos, acho que seria melhor usar

$chosenSelect.next('.chosen-container')

para evitar vários vínculos se a função for chamada mais de uma vez com diferentes Widgets escolhido () para corrigir.

por favor me diga se há alguma solução para Chosen v1.4.2?

.chosen-container.chosen-with-drop .chosen-drop {
    position: relative;
}

overflow-y: visible

Adicione isso ao div pai que contém o layout. No meu caso, era uma sub div de diálogo Modal que tinha _overflow-y: auto_ e substituí-lo por _overflow-y: visible_ funcionou para mim.

Já existe uma solução para este problema?

Este projeto tem sua resposta:
http://jsbin.com/finufihaji/edit?html

Procurar um pouco e fazer testes é a solução mais básica.

Tive que substituir os resultados .chosen-drop e .chosen-results e definir uma altura fixa para ambos para que todas as opções fossem selecionáveis ​​e não afetadas pela diretiva de estouro de div pai

Pelo menos isso funciona para mim e a maior parte do meu campo escolhido tem apenas 3 ou 4 opções. Apenas 1 (o que está sendo escondido) tem cerca de 12 e pode crescer em um futuro próximo.

Eu apliquei o seguinte ao div pai que tinha o estouro: oculto

.profile-content { /* Hack to stop profile-content from cropping Chosen dropdown */ padding-bottom: 100px; margin-bottom: -100px; }

Fonte: Stack Overflow

@doowruc Grande hack!

Existe um método para anexar o menu suspenso escolhido a um destino específico, para que possamos anexá-lo ao corpo do documento em vez de a uma caixa de diálogo? esta forma escolhida flui para fora do diálogo e não é contida por ele?

.ui-dialog-content{
    overflow:visible !important;
 }

Funcionou para mim.

Eu sei que ainda estava lutando com isso. Aqui está um Fiddle que mostra uma opção para mover o elemento para o corpo e definir o posicionamento absoluto de forma confiável, mesmo com rolagem.

https://jsfiddle.net/phil_ayres/gvn8bkaL/

https://github.com/R1p8p8e8r/chosen
Acho que minha solução vai te ajudar