0
I’m developing a Layout and needed the <p:panel>
occupy every blank space it contains before the ONE and Stock fields.
I’m going to post two figures, where they tell you how this is right now and how I wanted it to look;
Is there any way that bootstrap occupies the desired line Qtde, just like in the columns?
follows the code:
<div class="row form-dark">
<div class="col-12 col-md-6 col-lg-12">
<label>Produto </label>
<div class="box-consulta-rapido-produto">
<p:inputText id="descricao" value="#{consultaRapidaMB.descricao}" styleClass="consulta-rapido-produto-text" style="text-align: center" readonly="true">
</p:inputText>
</div>
</div>
<div class="col-12 col-md-6 col-lg-2">
<p:panel style="text-align:center; width:100%; height: 100%; font-weight: bold;">
<h:panelGrid columns="1" style="width:100%;">
<div class="product-thumbnail-main"
style="height: 100px!important; overflow: hidden;"><img
src="caminhoImagem"
class="img-fluid" alt="shop"
style="width: 70%!important; height: 100%; max-width: unset!important"/>
</div>
<br/>
</h:panelGrid>
</p:panel>
</div>
<div class="col-12 col-md-6 col-lg-4 offset-lg-2">
<label>U.M </label>
<div class="box-consulta-rapido-produto">
<p:inputText id="um" value="#{consultaRapidaMB.unidadeMedida}" styleClass="consulta-rapido-produto-text"
readonly="true" style="text-align: center">
</p:inputText>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<label>Estoque </label>
<div class="box-consulta-rapido-produto">
<p:inputText id="estoque" value="#{consultaRapidaMB.estoque}" styleClass="consulta-rapido-produto-text"
readonly="true" style="text-align: center"
size="20">
<f:convertNumber minFractionDigits="2" locale="pt-BR"/>
</p:inputText>
</div>
</div>
<div class="col-12 col-md-6 col-lg-8 offset-lg-4" style="text-align: center;">
<label style="font-size: 20px;font-weight: bolder;">Valor </label>
<div class="box-consulta-rapido-produto">
<p:inputText id="valorProduto" value="#{consultaRapidaMB.valorProduto}" styleClass="consulta-rapido-produto-text"
style="text-align: center" readonly="true"
size="20">
<f:convertNumber minFractionDigits="2" locale="pt-BR"/>
</p:inputText>
</div>
</div>
</div>
Pablo, I couldn’t reproduce here, with your code, anything like the image you posted. This issue of image size is usually simple to solve, but your code has many tags with styles already tied, excess of
!important
can be getting in the way. I recommend that you separate your . css from your . html and post the snippet here. For this you can edit your question. Then it’ll be a lot easier to help you, okay? A hug!!– Arnon