Sorry for my english. I use primefaces without a theme.
In web.xml:
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>none</param-value>
</context-param>
And I use empty primefaces.css.
I want to use dataTable with selectionMode:
<h:form id="form">
<p:dataTable id="testTableId" var="testTable" value="#{testMB.entityList}"
selection="#{testMB.selectedList}" rowKey="#{testTable.id}"
tableStyleClass="table table-hover table-bordered">
<p:column selectionMode="multiple" style="width:16px;text-align:center"/>
<p:column headerText="testName">
#{testTable.name}
</p:column>
<f:facet name="footer">
<p:commandButton process="testTableId" update="#form" icon="ui-icon-search" value="test"/>
</f:facet>
</p:dataTable>
<ui:repeat value="#{testMB.selectedList}" var="selectedList" id="ddddddddddd">
<h:outputText value="#{selectedList.id} - #{selectedList.name}"/>
</ui:repeat>
</h:form>
I click on a checkbox and click on commandButton test. But it is not working. List #{testMB.selectedList} is empty.
But if I click on a row (not on the checkbox) and for multiple selection I use ctrl then it is working.
If I use default theme, then checkbox is working.
Why is not working when I click on a checkbox without a theme.
Related
I placed a p:selectBooleanCheckbox inside a p:dataTable in a JSF project.
When the cell is selected the check box floats to the right.
I know it's a css thing but i'm not sure how to fix it.
<p:cellEditor>
<f:facet name="output">
<p:selectBooleanCheckbox id="hasUserOutputCheckBox" value="#{customerBean.selectedReference.hasUser}"/>
</f:facet>
<f:facet name="input">
<p:selectBooleanCheckbox id="hasUserInputCheckBox" value="#{customerBean.selectedReference.hasUser}"/>
</f:facet>
</p:cellEditor>
The issue is that the editable table cell has a padding of 1rem (PrimeFaces 10, Saga theme) in output mode, but a padding of 0 in input mode. This is caused by the rule:
.ui-datatable .ui-datatable-data tr.ui-row-editing td.ui-editable-column {
padding: 0;
}
You can fix this difference by adding a padding of 1rem to your checkbox in input mode.
Tested with:
<p:dataTable value="#{testView.bools}" var="bool" editable="true">
<p:column headerText="bool">
<p:cellEditor>
<f:facet name="output">
<p:selectBooleanCheckbox value="#{bool}" disabled="true"/>
</f:facet>
<f:facet name="input">
<!-- Add padding here: -->
<p:selectBooleanCheckbox value="#{bool}" style="padding:1rem"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:6rem">
<p:rowEditor/>
</p:column>
</p:dataTable>
Result:
Note that the actual padding you need to use might depend on the PrimeFaces version and the theme you are using. So, check the actual padding first using your browser's debugging tools.
See also:
How do I override default PrimeFaces CSS with custom styles?
I have a richdatatable in jsf .xhtml page . I have a very long text for a particular cell.
How can i set the width of the column and also display the text within the specified cell.
I am new to JSF and CSS. I am providing an example. Suppose I have two columns in a richdatatable and one of them have a very long text. I want that very long text to get displayed in lines(wrap text) rather than in a single line. I m not sure where, how and what to put as part of CSS
<ui:composition template="/template.xhtml">
<ui:define name="title">
<h:outputText value="#{bundle.ViewFileTitle}"></h:outputText>
</ui:define>
<ui:define name="body">
<h:form>
<rich:dataTable value="#{fileController.feedbackFileItems}" var="item" id="table">
<rich:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListFeedbackTitle_feedbackPK_feedbackId}"/>
</f:facet>
<h:outputText value="#{item.feedbackPK.feedbackId}"/>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListFeedbackTitle_department}"/>
</f:facet>
<h:outputText value="#{item.department}"/>
</rich:column>
</rich:dataTable>
</h:form>
</ui:define>
</ui:composition>
For displaying long text in multiple line you can use width attribute of rich:column:
<rich:column width="150" ...>
or the same for h:column:
<h:column width="110">
If you don't want to display text of datatable cell in multiple lines, then
1) you can use columnClasses attribute of rich:dataTable and specify no-wrap style for that column. For example combination
<rich:dataTable columnClasses="nowrap,">
with CSS
.nowrap {
white-space: nowrap;
}
will be resulted as table with non wrapped first column.
2) You can use style or styleClass attributes of rich:column for the same result (with the same CSS).
I want to implment a scrollbar for a outputLabel but if i use scrollbar component it put every list elment in a new row. The whole output should be disyplayed in one row and the list should be scrollable. Can i fix this problem with a CSS attribute?
i use primefaces 4.0 and jsf 2.1
here is my code
<p:commandButton id="newMessage" update=":contentForm"
actionListener="#{taskboxBean.newMessage}" value="New Message" />
<p:commandButton id="trash"
update=":contentForm, :postForm:tabViewPosts:trashTable, :postForm:tabViewPosts:inboxTable, :postForm:tabViewPosts:sentTable"
actionListener="#{taskboxBean.deleteSelectedTaskbox}" icon="ui-icon-trash" title="Trash" />
<p:scrollPanel>
<ui:repeat var="task_to_user" value="#{taskboxBean.selectedTaskbox.TASKBOX_TO_USERS}">
<p:outputLabel
value="#{task_to_user.USER.EMAIL} #{task_to_user.USER.FIRST_NAME} #{task_to_user.USER.LAST_NAME} #{task_to_user.USER.FIRST_NAME}" />
</ui:repeat>
</p:scrollPanel>
<h:outputText value="#{taskboxBean.selectedTaskbox.TASKTYPE.NAME} " />
<h:outputText value="#{taskboxBean.selectedTaskbox.CREATE_TIMESTAMP} " />
I have a set of subtables that is fed from the managed bean, and they may or may not have a header text.
<p:dataTable var="xxxxx" value="#{}" styleClass="xxxxx" emptyMessage="#{}">
<f:facet name="header">#{}</f:facet>
<p:columnGroup type="header">
<p:row>
<p:column headerText="xxxxx" />
</p:row>
</p:columnGroup>
<p:subTable var="xxxxx" value="#{}">
<f:facet name="header">
<h:outputText rendered="#{}"
value="#{}" />
</f:facet>
<p:column style="text-align:center;">
<h:outputText value="#{}" />
</p:column>
</p:column>
</p:subTable>
</p:dataTable>
Only structure shown. Tag contents wiped on purpose.
when the subtable header is empty text, it still renders a thin empty header line. Is there any way I can supress the exibition of that header in case empty?
Using PF 3.5 on Tomcat 7 (mojarra)
Supress the exibition of the empty header of the subtable by using this CSS property:
td.ui-datatable-subtable-header:empty {
display: none
}
I wanna switch the styles the datascroller uses to shows the selected page. Is it possible?
<f:facet name="footer">
<a4j:form>
<rich:datascroller styleClass="wrap-paginacao" for="estabelecimentoGrid" boundaryControls="hide" stepControls="show" fastControls="hide" >
<f:facet name="previous">
<h:graphicImage value="/home/img/previous.png"/>
</f:facet>
<f:facet name="next">
<h:graphicImage value="/home/img/next.png"/>
</f:facet>
</rich:datascroller>
</a4j:form>
</f:facet>
UPDATE
Default styles:
Styles I want:
override .rf-ds-act class of richfaces to whatever you want..
if this does not suffice you right click scroller component and click on inspect element using firebug you will get which css to override.