How to add scroll option in <h:outputText/> - jsf

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.

Related

how to make resposive dialog of primefaces

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

h:outputLabel position within a h:panelGroup

I have the following code in a xhtml page using PrimeFaces:
<h:panelGroup id="dropZoneId" layout="block"
style="height:500px;width:1210px;text-align:center;">
<h:outputLabel value="Drop here" style= "color: azure;" />
</h:panelGroup>
I would like to have the <h:outputLabel> "drop here" in the middle of the <h:panelGroup> but so far I can only put it at the center at the top of the <h:panelGroup> with no css.
Can someone please help ? Thank you

Maybe this will suffice:
<h:panelGroup id="dropZoneId" layout="block" style="height: 500px; text-align: center">
<h:outputText value="Drop here" style="color: azure; position: absolute; top: 240px" />
</h:panelGroup>

.myLabel {
float: center;
}
Official Resource #Primefaces: https://forum.primefaces.org/viewtopic.php?t=14611

Change header styleClass of a panel

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.

Weird spacing in h:panelGrid with h:inputText and rich:comboBox

I am experiencing a very strange issue where the space before and after an rich:comboBox
differs from that for a h:inputText. See the screenshot below. Everything is fine for the datePicker and Application ID. The spacing gets weird for the comboBox. Any ideas? -Jan
Screenshot: http://i.stack.imgur.com/Fa5qv.jpg
<h:panelGrid columns="2">
<h:outputText value="#{bundle.lblsearchapplicationId}" />
<h:inputText id="inputapplicationId" value="#{searchBean.searchApplicationCriteria.LNGAPPLICATIONID}" />
<h:outputText value="#{bundle.lblsearchdealerName}" />
<rich:comboBox suggestionValues="#{XXXglobalHelperBean.dealerNames}" directInputSuggestions="true">
<!-- <f:selectItems value="#{searchBean.searchApplicationCriteria.TXTDEALERNAME}" /> -->
</rich:comboBox>
<h:outputText id="lblsearchbusinessManagerName" value="#{bundle.lblsearchbusinessManagerName}" />
<h:inputText id="inputbusinessManagerName" value="#{searchBean.searchApplicationCriteria.TXTBUSINESSMANAGERNAME}" />

sooooooooo, I figured it out. There is a rich-combobox-shel around each comboBox. One needs to set margin and padding for this shell to the same values as for h:inputText.
.rich-combobox-shell {
position : relative;
margin-top: 2px;
margin-bottom:2px;
padding-top: 1px;
padding-bottom: 1px;
}

JSF snippet to center an image in a panel grid

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;
}

Resources