Pessoal, não estou conseguindo deixar o p:galleria do primefaces responsivo. Alguém conseguiu ?
Pelo que vi inspecionando esse componente, ele mantem px na div, ul e li do elementos renderizados. Você terá que sobrescrever esses estilos fazendo uma jogada com essas propriedades css:
width: 100%;
max-width: 500px; // o valor vc define de acordo com sua necessidade
min-width: 100%;
min-height: 300px; // o valor vc define de acordo com sua necessidade
height: auto;
Agora, se tem alguma forma de fazer pelo componente, não sei, pois tem muito tempo que não uso primefaces.
Segue um link que poderá te auxiliar: https://www.w3schools.com/howto/howto_css_image_responsive.asp
Boa sorte!
Obrigado pela resposta Lucas. O componente galleria ficou responsivo, porém a imagem que fica dentro da galleria não. A imagem fica com tamanho fixo, tentei deixar o mesmo style da galleria no graphicImage mas a imagem mantém o tamanho fixo saindo fora da galleria:
<p:galleria value="#{veicBacking.imagesDet}"
var="image"
showCaption="false"
autoPlay="false"
style="width: 100%; max-width: 100px; min-width: 100%; min-height: 10px; height: auto;">
<p:graphicImage library="algaworks"
name="veiculos/#{image}"
alt="Image Description for #{image}"
title="#{image}"
style="width: 100%; height: auto;"
/>
</p:galleria>
Dá uma inspecionada no html gerado para ver qual ponto que precisa ajustar (talvez seja necessário sobrescrever alguma classe css).
Fiz alguns testes e não foi
<div id="j_idt720" tabindex="0" class="ui-galleria ui-widget ui-widget-content ui-corner-all" style="max-width: 502px; visibility: visible;">
<ul class="ui-galleria-panel-wrapper" style="width: 100%;height: auto; min-height: 313px;">
<li class="ui-galleria-panel" style="max-width: 100%;height: auto;">
<img id="j_idt721" src="/showcase/javax.faces.resource/demo/images/nature/nature1.jpg.xhtml" title="nature1.jpg" style="max-width: 100%; height: auto;">
</li>
</ul>
</div>
Mexi soh na primeira imagem e nos elementos pai dela (li, ul e div - estão nesse código que mandei). Dê uma olhada nos styles desses elemtos. Tente reproduzir no seu elemento renderizado.
Você alterou direto no html da página ? Se foi acho que não daria certo porque são imagens dinâmicas. Se a alteração foi no css do componente me passa qual arquivo foi por favor
Fiz direto no html da página para ver se é possível (e consegui algum resultado). Com base nisso, teria que ver como adaptar nos elementos do componente (assim como vc estava fazendo). Infelizmente isso é um ponto fraco (muito fraco hoje em dia) no uso de componentes do JSF.
Consegui deixar a imagem sem sair de dentro da Galleria, mas ela corta e não ajusta responsivamente.
Tentei outra alternativa tratando em um commandButton para abrir uma página diferente caso a aplicação seja aberta de um dispositivo móvel. Consegui verificar o tamanho da tela com Javascript mas não consigo enviar o resultado para o MB para definir qual página irei abrir já que no action do commandButton não deixa usar Javascript .
O primefaces possui componente que permite interação com javascript: p:remoteCommand
Pq vc não cria sua própria galeria? Vc pode criar um componente usando facelets.
Usei o <p:remoteCommand> para tratar a página. A ideia de criar uma própria galeria responsiva é boa e pode trazer até um resultado melhor mas não vou ter tempo no momento . Obrigado