Galleria Primefaces Responsivo

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 :frowning:

<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 :frowning: . Obrigado

Não precisa criar um do zero, pode usar alguma lib, ex.: https://galleriajs.github.io/