I am developing a web application in JSF in which I am using PrimeFaces bar chart. I want to change the legend position. I verified Primefaces: Charts and Legend position in that post they use,
<p:barChart id="stackedKWH"
value="#{kwhSalesBeanManager.kwhSalesChart}"
legendPosition="e" style="height:300px;width:800px"
title="kWh Sales by Type"
stacked="true"
barMargin="10"
min="0"
max="125000000"/>
but in primeface 5.1 there is not <p:barchart/>
<p:chart type="bar" model="#{chartView.barModel}" style="height:300px"/>
My output is look like,
Expected output:
How can I achieve this? Does someone suggest me the correct way?
You can do it on the bean:
BarChartModel model = new BarChartModel();
model.setLegendPosition("e");
model.setLegendPlacement(LegendPlacement.OUTSIDEGRID);
You can still use the model.setLegendPosition("w"); in your bean.
If you want more specific control you can modify the css of the legend table. The class is called table.jqplot-table-legend.
Something like this:
XHTML:
<p:chart styleClass="barChartStyleClass" type="bar" widgetVar="barChart" model="#{playgroundController.barModel}" style="width:400px;height:300px">
</p:chart>
CSS:
.barChartStyleClass table.jqplot-table-legend {
top:50px !important;
right:50px !important;
//more css here
}
Perhaps you can make it work without the !important, but i had no luck. But i still hope it helps :)
Related
I am using PrimeFaces6.1 widgetVar to disable various page elements. I have several different types of elements on the page. When they are all disabled, p:calendar is the only element that doesn't look disabled.
<p:calendar id="revision-date-from" value="#{search.revisionDateFrom}" pattern="dd/MM/yyyy" mask="true" />---<p:calendar id="revision-date-to" value="#{search.revisionDateTo}" pattern="dd/MM/yyyy" mask="true" />
I'm required to develop for Internet Explorer 11.
Does anyone else have this issue? Or may know how to solve this? I guess, I could always play with the styling to change the bgcolor. But it does seem odd that PrimeFaces would have this one outlier.
Click here to see the image of elements p:calendar, p:inputText and p:selectOneMenu together
I was able to solve this issue: After doing research I learned that disabled PrimeFaces elements use a style class called 'ui-state-disabled' to assign a percentage of Opacity. Inspecting the calendar element I discovered that 'ui-state-disabled' class was never assigned. So, to solve my issue I overrode the class in my stylesheet. Well, didn't 'need' to do this, but I wanted to have control over all my disabled elements Opacity.
.ui-state-disabled {
opacity: 0.45;
filter: Alpha(Opacity=45);
cursor: default !important;
}
Using my widgetVar to disable I needed to add the class:
PF('widget_date').disable();
PF('widget_date').getJQ().addClass('ui-state-disabled');
Then to enable and remove the class:
PF('widget_date').enable();
PF('widget_date').getJQ().removeClass('ui-state-disabled');
This solution worked perfectly.
Hy all, I am trying to implement drag&drop primefaces components and I want do disable possibility to overlap on component to other before I drop the component. My components looks like this:
<p:outputPanel id="containment" header="Containment" style="color:black;position:relative; top:100px; left:50px; z-index:9" styleClass="button">
Test
</p:outputPanel>
<p:draggable for="containment" containment="parent" opacity="0.3" grid="10,10"/>
Is there a possibility to inform the user that the component while he is just dragging can't be dropped over another component?. I am using primefaces 5.2
Thanks #Kukeltje if I do like this
$("#comp1").draggable({
obstacle: "#comp2",
preventCollision: true,
containment: "#test"
});
a newbie primefaces question:
When I create a simple primeface page, what should I put in order to have the text styled?
<h:body>
<!-- Ok, what I put here to have styled the following H1 and outputText? -->
<h1>Not styled h1</h1>
<h:outputText value="Not styled text." />
</h:body>
</html>
I am able to get styled text by placing it inside a <\p:panel>, but I find that a bit annoying to place everything in panels.
Use css to change it, it's the most elegant solution. You can create your own classes or override existing primefaces ones if you're sure you aren't going to use the original ones. Remember to add !important at the end of the attributes set.
.ui-panel
{
border: black solid 1px !important;
}
You can just follow this tutorial about how and where to add your css reference in order to make Primefaces styles overriden.
So, like the title says in my case height of the extendedDataTable doesn't work, so my table also doesn't scroll because all rows are shown. I'm using richfaces4.0-final version. So here is my piece of code:
<rich:extendedDataTable
value="#{advancedSearchView.criteria}" var="criteria"
height="50px"
selection="#{advancedSearchView.selection}" id="table"
selectionMode="single">
<rich:column id="criteria_row" filterBy="#{criteria}" filterEvent="onkeyup" width="500px">
<h:outputText value="#{criteria}" />
</rich:column>
</rich:extendedDataTable>
AdvancedSearchView is request scoped bean, and criteria is an array of Strings.
I hope that is enough information. Thank you in advance. A would really appreciate if someone gives me an answer, because I'm struggling with this for a while.
According to the RichFaces 4 VDL (View Declaration Language) documentation, the <rich:extendedDataTable> component does not support the height attribute at all.
Your functional requirement is however understood. You want to render the extended datatable with a height of 50px and make the table body scrollable. You need to achieve this using the usual CSS means by style attribute which can take inline CSS declarations, or by the styleClass attribute which can take CSS classes, like as on almost every other JSF HTML component.
So, with style
<rich:extendedDataTable ... style="height: 50px;">
or, with styleClass (which is also the more recommend practice; separate style from markup)
<rich:extendedDataTable ... styleClass="criteria">
and this piece in a CSS file which you include by <h:outputStylesheet />:
.criteria {
height: 50px;
}
I have a JSF page with a rich:dataTable where, in each row, I put h:commandLinks to lead to pages with the details of the row selected.
I wanted to make the whole row clickable, calling the action method when the user clicks anywhere in the row.
Is that possible without JavaScript?
And if JavaScript is the only way out, what would be the best way do it? Search for a commandLink and "click" it?
Thanks in advance!
I got the whole rows clickable with a bit of styling. I made the links inside the cells occupy the whole cell with display: block; for the links and padding:0 for the cell.
So, here is what you need to do. In the JSF page, set up rowClasses and the links in each cell:
<rich:dataTable value="#{myMB.listaElems}" var="elem" rowClasses="clickable">
<rich:column>
<h:commandLink action="#{myMB.preUpdate(elem)}" value="#{elem.item1}" />
</rich:column>
<rich:column>
<h:commandLink action="#{myMB.preUpdate(elem)}" value="#{elem.item2}" />
</rich:column>
</rich:datatable>
And in the CSS sheet:
tr.clickable td {
padding: 0;
}
tr.clickable td a {
display: block;
padding: 4px;
}
And that's it!
The only downside is that you need to repeat the link in each cell, but the HTTP flow remains simple, you don't need to change any component, and it will work for h:links or good old <a> html links -- a pretty acceptable tradeoff, I'd say. :)
The basic problem is that JSF (core) is tied to the HTML table element for query-result rendering via the dataTable component. Since a JSF dataTable renders as an HTML table, the result is limited to what can be managed in columns (no out-of-the-box row control that I have seen). The HTML/CSS way to do this is quite elegant but in order to accomplish this in JSF, I believe the UIComponent renderer for dataTable would need to be overridden to output this:
<div class="table">
<a href="#" class="row">
<span class="cell">Column-1-Value</span>
<span class="cell">Column-2-Value</span>
</a>
...
</div>
With CSS styles table row and cell representing display:table, display:table-row and display:table-cell; respectively. This makes the row completely clickable but it behaves as a proper table. I have not embarked on re-writing the JSF renderers and solving the JSF commandLink and other component problems to accomplish the rendering as above but that is probably the ultimate answer. I am not a fan of JSF after fighting with it on a few projects now (as compared to lighter weight combinations of concepts from basic HTML/CSS, a sprinkling of JavaScript, clean Java/Servlets, etc).
in your datatable use this one:
<a4j:jsFunction name="selectRow" action="#{userBean.myListener" ...>
<a4j:param name="currentRow" assignTo="#{userBean.selectedRowId}"/>
</a4j:jsFunction>
its called when you select a row, and you can do whatever you want and pass the selected row with the <a4j:param ...as an option you should also be able to call yourLink.click() or something similar, but that wont be the problem to find out...
reference : Richfaces Forum
You may want to try rich:scrollableDataTable. it has attribute onRowClick which you can specify as an event attribute into a4j:support / a4j:ajax nested inside your table. This will make your row clickable.
-cheers :)
For the new RichFaces 4.x, you can use the a4j:commandLink this instead, and make the complete row selectable in CSS. Notice that the 'rowClasses="clickable"' refers to the CSS class to select the whole row:
<rich:column id="fileName" sortable="false" width="618px">
<a4j:commandLink action="#{controller.setSelectedFile(file)}"
oncomplete="window.open('#{menuBar.PrintPage}?outputType=pdf', '_blank');"
rendered="#{not controller.getButtonDisabled(file)}"
execute="#this" limitRender="true">
<h:outputText value="${file}"
style="text-align:left;width:100%;min-width:400px;"
title="${file.name} is viewable.">
<f:converter converterId="MVC.View.Converter_FilePath" />
</h:outputText>
</a4j:commandLink>
</rich:column>
Use this CSS class to select the whole row:
tr.clickable td {
padding: 0;
}
tr.clickable td a {
display: block;
padding: 4px;
}