PrimeFaces DashBoard Columns Width

0
votes

I have a big problem that i couldn't find a solution for it till now ... I looked for similar that have the same of my problem and i didn't find solution too

the problem: i want to add different widths to dashboard columns in my dashboard to make different layouts , i found two ways in creation of dashboard by the way , first by creating model in my bean and add to it DashboardColumns in the bean too after adding widgets to it , second by creating columns by tags <p:dashboardColumn> and here's the problem the first option means create columns without real columns in the xhtml file that make me control the css of every column alone , and the way i found that i can edit default css for the column by 

.pf-dashboard-column {width:200px;}

and write my style , ok but that way didn't make me able to make different sizes (widths) for the columns , and the problem in the second one is p:dashboardColumn isn't in my primefaces lib although i downloaded the lib from the site and added it to my IDE (classpath and sources) note: in my opening tag i include xmlns:p="http://primefaces.org/ui" that make my primefaces components work but <p:dashboardColumn> not working but in examples that use this tag it includs xmlns:p="http://primefaces.prime.com.tr/ui" and this i found it in another lib but it doesn't make my tags work like (p:selectOneMenu) but make <p:dashboardColumn> work

... that is my problem that i couldn't make different widths to columns ... any help???

and another thing when i resize my browser the order of panels changes and i didn't know why ??

1
javaprimefacesdashboard

1 Answers

0
votes

Have a look at the CSS nth-child selector:

http://www.w3schools.com/cssref/sel_nth-child.asp 

.pf-dashboard-columnp:nth-child(1) {
  width: 400px;
}
.pf-dashboard-columnp:nth-child(2) {
  width: 500px;
}

be careful what your doing though, you might find other elements have been sized by prime faces dynamically rather than in the CSS.