I'm using Primefaces 5.3 and got problem when place Chart responsive problem on p:layout
With p:layout
http://i.stack.imgur.com/Qx5Sp.png
Without p:layout
http://i.stack.imgur.com/BmZVC.png
Please help me fix that :(
Add responsive="true" to your p:chart attribute.
Related
Displaying a <p:carousel> inside a <p:dataGrid> using PrimeFaces 5.3 final (community release) something along the following piece of code.
<p:dataGrid var="gridRow" value="#{[1,2,3,4,5]}" columns="1">
<p:carousel var="row" value="#{[1,2,3,4,5]}" numVisible="3">
<p:panel>Panel container : #{row}</p:panel>
</p:carousel>
</p:dataGrid>
Using PrimeFaces 5.2 final, it displays the corresponding UI correctly as shown in the following picture.
Using PrimeFaces 5.3 final, the design is however, severely broken stretching items being held by a <p:carousel> too much horizontally as shown in the following picture.
See the browser's long horizontal scroll bar at the bottom-left corner of the preceding picture.
The problem occurs only when a <p:carousel> is displayed inside a <p:dataGrid> (or likely other iterating components). A <p:carousel> independently displays exactly which it is meant for.
What is the problem with PrimeFaces 5.3? Is there any workaround?
The solution was to set the layout attribute to grid in <p:dataGrid> (due to the responsiveness feature added to PrimeFaces 5.3). The default value of this attribute is tabular.
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 :)
As per my question title, when I use richfaces, specifically a rich:popupPanel, my primefaces confirm dialog, p:confirmDialog, gets placed top/left justified. If I remove the the richfaces popup panel the primefaces dialog gets centered in the browser window as expected.
I tried changing the order of the namespace entries but that didn't work. What else can I try. I see richfaces also has a confirm dialog that I'm going to look into, it's just that I already had the primefaces version working on other pages, that happen to not have the richfaces popup panel.
I can post code if necessary.
You should not use Richfaces and Primefaces together. There so many conflicts between them both in terms of css and javascript. You can solve css problems by overwriting them and using '!important' at the end of each setting.
for example,
.class{
//...
text-align: center !important
}
However, Your best bet is to use just primefaces
I want to represent my data from a MYSQL database table in a primefaces carousel or slider or datagrid with one row. The carousel does not work at all. The datagrid does not work when I add rows="1" attribute and I don't know how to implement my data into a slider.
Any ideas?
I solved the problem. The version of jQuery I had included into my xhtml file was different from that of primefaces jQuery library. So I just used the primefaces jQuery library and deleted the other one and all primefaces components worked as they should.
that's my first post here on stackoverflow.
I'm searching around a while for solving my problem.
In my JSF-Page I got a <h:commandButton> with styleClass set and on web.xml I disabled JavaScript (JavaScript isn't allowed on the hole page).
On then rendered page on Firefox, the CommandButton will not change its style, because the "class"-tag is missing.
If I turn on JavaScript, everything works fine and also the "class"-tag for the CommandButton is on the rendered page.
What I'm doing wrong or is this a bug in myfaces 2.1?
Best wishes and many thanks.
Tobi
This is definitely a bug in MyFaces. Report it to MyFaces guys over there on apache.org.