I want make responsive modal, help me.
<p:dialog id="idModal" widgetVar="modalWV" modal="true" width="600" header="Titulo Modal">
<h:panelGrid id="panelPermisoGuardar" columns="2" cellpadding="10" width="100%"
//campos
</p:panelGrid>
</p:dialog>
This is how it looks when I see it on a responsive screen
Non-responsive Modal
I solved it like this
First create the Dialog with a panel inside for the fields.
<p:dialog id="modal" widgetVar="modalWV" modal="true" styleClass="modalResponsivo" header="Titulo Modal">
<h:panelGrid id="idPanel" columns="2" width="100%" columnClasses="ui-g-12 ui-md-2,ui-g-12 ui-md-10" layout="grid">
</h:panelGrid>
</p:dialog>
Then add the css rule for the 'modalResponsivo' class
#media screen and (max-width: 768px ) {
.modalResponsivo { width: 90% !important;} }
#media screen and (min-width: 1024px ) {
.modalResponsivo { width: 30% !important; }
}
This looks like a full screen Imagen 1
And that's how it looks a responsive screen Imagen 2
Related
I have a panelGrid with two columns - each one of them with a panel. Both panels have dataTables and are side by side.
<h:panelGrid id="png31" columns="2">
<p:panel id="pnlCab" header="Cabecera">
<p:commandButton value="Nueva actividad" type="button" id="actiNue" onclick="PF('wdlgAgregar').show()"/>
<br /> <br />
<p:dataTable id="dataCabecera" value="#{cargaHorariaController.listaActivDoc}">
<!-- Elements -->
</p:dataTable>
</p:panel>
<p:panel id="pnlDet" header="Detalle">
<p:commandButton value="Nueva subactividad" type="button" id="subactiNue" onclick="PF('wdlgAgregarS').show()">
<p:ajax update="cmbSubNue" listener="#{cargaHorariaController.cargarSubactividades()}" />
</p:commandButton>
<br /> <br />
<p:dataTable id="dataDetalle" value="#{cargaHorariaController.listaSubactividad}">
<!-- Elements -->
</p:dataTable>
</p:panel>
When the datatables are empty, both panels are at the top, but when one of them displays records, the panel with the empty dataTable aligns vertically to the middle of the panel with the filled dataTable.
What can I do so both panels are always at the top, even with filled dataTables?
Try:
<style type="text/css">
.my-style td{
vertical-align: text-top !important;
}
</style>
<h:panelGrid id="png31" columns="2" columnClasses="width: 40%, width: 60%"
styleClass="my-style" >
<p:panel>
........
</p:panel>
.......
.......
.......
</h:panelGrid>
Add CSS classes:
.col1 {
width: 40%;
vertical-align: top;
}
.col2 {
width: 60%;
vertical-align: top;
}
and change
<h:panelGrid id="png31" columns="2" columnClasses="col1, col2">
I am developing a project using primefaces.
In that, I used one p:panel(in user.xhtml page) inside the p:dialog and I set showHeader="false" to the p:dialog.
For that, I need to drag the p:dialog when I click and drag on the p:panel, which is included inside the p:dialog.
Sample Code:
<p:dialog showHeader="false">
<ui:include src="${model.dynamicPage}"/>
</p:dialog>
user.xhtml
<h:form id="userForm">
<p:panel header="UserPanel">
.......
</p:panel>
</h:form>
Any Idea?
Use the draggable component on a panel instead of a dialog
<p:panel id="pnl" header="UserPanel">
<ui:include src="${model.dynamicPage}"/>
</p:panel>
<p:draggable for="pnl" />
and define the panel dimensions with some css:
.ui-panel {
margin: 15px;
height: 200px;
width: 300px;
}
Edit: if there are several components in your model.dynamicPage facelet but you want the panel to be the only allowed to handle the dragging of the whole container, add a css class to it and restrict the draggable component handling with this class:
eg.
<p:panel id="pnl" showHeader="false">
<ui:include src="${model.dynamicPage}"/>
</p:panel>
<p:draggable for="pnl" handle=".my-handle-classname" />
and
<h:form id="userForm">
<p:panel header="UserPanel" styleClass="my-handle-classname">
.......
</p:panel>
</h:form>
I have panels and would like to change the header's background color of only one of them. Thus I can't juste change the ui-panel-titlebar style.
I tried the following without success.
<p:panel ....>
<f:facet name="header" styleClass="ui-panel-my-titlebar">
....
</f:facet>
</p:panel>
If I put the styleClass in the p:panel tag, then is the background of the content change too.
My styleClass:
.ui-panel-my-titlebar {
background: #BBBBBB;
}
I got it to work with the following:
<p:panel styleClass="customTitleBar">
<f:facet name="header">
....
</f:facet>
</p:panel>
css:
.customTitleBar > .ui-panel-titlebar {
background: #BBBBBB;
}
:host ::ng-deep {
.p-panel .p-panel-header {
padding: 0.5rem;
background: linear-gradient(-206deg, #4b6cb7 5%, #182848 100%);
color: #ffffff;
}
}
This is working with PrimeNG.
I have a dialog that contain
<p:dialog id="sqlDialog"
widgetVar="sqlWidgetVar"
header="SQL"
width="800"
position="center"
minimizable="true"
maximizable="true"
appendToBody="true"
dynamic="true">
<h:outputText id="sql"
escape="false"
value="#{bean.sql}"
style="color: green"/>
</p:dialog>
Since the text is very long I need to add a scroll option
How can I do it ?
Thanks
Use CSS to make it a block element with fixed dimensions and an overflow.
<h:outputText ... styleClass="sqlDialogText" />
with
.sqlDialogText {
display: block;
width: 600px; /* Optional, depends otherwise on parent. */
height: 300px;
overflow: auto;
color: green;
}
Alternatively, just give the dialog a fixed height.
<p:dialog ... height="300">
Note that this has nothing to do with JSF. It's just a HTML/CSS/JS code generator. The <h:outputText> generates a HTML <span> element. You just have to alter the CSS accordingly for the look'n'feel.
I am trying to write some JSF code that centers an image in a panel grid. The simple approach would appear to be:
<h:panelGrid columns="1" style="text-align:center">
<h:graphicImage value="/path/to/image.png" />
</h:panelGrid>
but this approach does not seem to work.
Use div with align=center
Or use CSS:
JSF
<h:panelGrid styleClass="centered">
...
</h:panelGrid>
CSS
.centered {
margin: 0px auto;
}