This question already has answers here:
How apply CSS on a <h:inputText>?
(4 answers)
Closed 1 year ago.
so i'm trying to style my inputText but it doesn't work
here is my XHTML code
<h:form>
<h:panelGrid columns="1" styleClass="contactform">
<h:inputText value="#{formateurController.formateur.nom}" class="text-input" a:placeholder="Nom" />
//rest of the form
<h:panelGrid>
</h:form>
and my CSS
.contactform .text-input{
border-radius: 10px;
box-shadow: none;
font-family: poppins;
font-size: 14px;
}
.contactform .text-input:focus{
border-color: #d9232d;
}
There is no class attribute in JSF components.
You should replace attribute "class" by "styleClass" in <h:inputText> tag
Related
I have selectBooleanCheckbox and h:panelGroup in xhtml page. I want set the border to panelGroup when box value is checked
Here the code:
<p:fieldset legend="Параметры печати" style="margin:0px; margin-top: 0px; padding-bottom: 0px; border: 1px solid" >
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<p:selectBooleanCheckbox value="#{priceListUI.borderCheck}" />
<h:outputText value="Border" />
</p:fieldset>
and <h:panelGroup>, i need set border to external block:
<h:panelGroup styleClass="ui-g-5 box"
style="padding: 15px; border: solid 1px; font-size: 16px;height: 202px;min-width:340px; position: relative">
<h:panelGroup style="height:44px; line-height: 1.4em">
<p>#{product.product.name}</p>
</h:panelGroup>
<h:panelGroup styleClass="ui-g" id="svg" style="width: 100%; display: block;">
<svg class="barcode bc-#{product.productId}"
style="position: absolute;right: 20px; top: 80px;"
jsbarcode-textmargin="0"
jsbarcode-fontoptions="bold">
</svg>
</h:panelGroup>
<h:panelGroup style="height: 20px; display: inline; position: absolute; bottom: 15px;">
Цена: #{util.fDouble(product.product.type eq 2? product.sellingPrice * 1000.0: product.sellingPrice)} тг
</h:panelGroup>
<script>
draw('#{product.product.code}', #{product.productId});
function draw(code, productId) {
var arr = {
displayValue: true,
fontSize: 16,
height: 24
};
if (code.length === 8 || code.length === 13) {
arr["format"] = "EAN" + code.length;
}
var className = ".bc-" + productId.toString();
JsBarcode(className, code, arr);
}
</script>
</h:panelGroup>
In Bean class there are getters and setters for checkbox
Can anyone help?
You can use the styleClass attribute on you panelgrid, and set the class according to the checkbox boolean value.
Example:
<h:head>
<style type="text/css">
.myBorderClass {
border: #000000 solid 10px;
}
</style>
</h:head>
<f:view>
<h:form>
<p:selectBooleanCheckbox value="#{myBean.check}">
<p:ajax update="grid"/>
</p:selectBooleanCheckbox>
<h:panelGrid id="grid" styleClass="#{myBean.check ? 'myBorderClass':''}">
<h:outputLabel>
test label
</h:outputLabel>
</h:panelGrid>
</h:form>
</f:view>
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
I have been asked to write a JSF component that handles results paging. The component takes in a bean that implements an interface. At runtime, the getter methods are called but never the setters. Here is the code
<cc:interface>
<cc:attribute name="pagableResultsBean" />
</cc:interface>
<!-- Question: We can't have a form inside of a form. Do we ecapsulate form operations here or
should the client handle them? -->
<cc:implementation>
<c:set var="pagableResultsBean" value="#{cc.attrs.pagableResultsBean}" />
<div
style="background-color: #F0F3FA; border: 1px solid #ABABAB; height: 25px; margin: 0px; padding: 2px 8px; position: relative; vertical-align: middle;">
<h:panelGroup>
<div style="float: left; width: auto;">
Showing Results <h:outputLabel value="#{pagableResultsBean.showingRecordMin}" /> - <h:outputLabel value="#{pagableResultsBean.showingRecordMax}" /> of
#{pagableResultsBean.totalRecordsNum} Results per Page:
<h:selectOneMenu value="#{pagableResultsBean.resultsPerPage}" onchange="$j(document).find('.pageBarSubmitBtn').click();">
<f:selectItems value="#{pagableResultsBean.resultsPerPageItems}" />
</h:selectOneMenu>
</div>
<div style="float: right; width: auto;">
Showing Page #{pagableResultsBean.currentPageNum} of #{pagableResultsBean.totalPagesNum} Jump
to Page
<h:selectOneMenu id="_pagesMenu" value="#{pagableResultsBean.currentPageNum}" onchange="$j(document).find('.pageBarSubmitBtn').click();">
<f:selectItems value="#{pagableResultsBean.resultsPerPageItems}" />
</h:selectOneMenu>
<h:commandLink style="position: relative; top: 3px;" action="#{pagableResultsBean.goToFirstPage()}">
<h:graphicImage value="/images/arrow-first.gif" />
</h:commandLink>
<h:commandLink style="position: relative; top: 3px;" action="#{pagableResultsBean.goToPreviousPage()}">
<h:graphicImage value="/images/arrow-previous.gif" />
</h:commandLink>
<h:commandLink style="position: relative; top: 3px;" action="#{pagableResultsBean.goToNextPage()}">
<h:graphicImage value="/images/arrow-next.gif" />
</h:commandLink>
<h:commandLink style="position: relative; top: 3px;" action="#{pagableResultsBean.goToLastPage()}">
<h:graphicImage value="/images/arrow-last.gif" />
</h:commandLink>
</div>
<h:commandButton style="visibility: hidden;" styleClass="jsfHidden pageBarSubmitBtn"/>
</h:panelGroup>
</div>
</cc:implementation>
This is the interface that the backing bean implements:
public interface PagableResults {
public int getShowingRecordMin();
public int getShowingRecordMax();
public ResultsPerPage getResultsPerPage();
public void setResultsPerPage(ResultsPerPage rpp);
public int getCurrentPageNum();
public void setCurrentPageNum(int pageNum);
public int getTotalPagesNum();
public int getTotalRecordsNum();
public List<SelectItem> getResultsPerPageItems();
public List<SelectItem> getResultsPagesItems();
public void goToFirstPage();
public void goToLastPage();
public void goToPreviousPage();
public void goToNextPage();
}
And here is the snippet where the control is used
<h:form>
<ndar:pagingBar pagableResultsBean="#{pageBean}" />
</h:form>
Can anyone see any reason why only the getters get called and not the setters?
As you seem to use c:set from the JSP JSTL Core Tag Library, this might not work well with the JSF and especially the JSF Composite Component system.
Have you tried to replace all instances of pagableResultsBean with cc.attrs.pagableResultsBean as this would eliminate one possible reason of the error?
Also, put a Debugger on the set-method you think is not getting called - and verify whether it is really not called or just the html result looks like.
Update 2014-12-31
Also make sure to have a h:messages tag to the jsf to make sure JSF tells you of a possible conversion-error.
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;
}