In a datatable with scrollable="true", headers and column should remain synchronized in width and it is not the case.
Could anyone find a solution?
Thanks
Here is a source code example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<h:outputStylesheet name="css/nanoscroller.css" library="avalon-layout" />
<h:outputStylesheet name="css/animate.css" library="avalon-layout" />
<h:outputStylesheet name="css/layout-blue.css" library="avalon-layout" />
<h:outputScript name="js/nanoscroller.js" library="avalon-layout" />
<h:outputScript name="js/layout.js" library="avalon-layout" />
</h:head>
<h:body>
<h:form>
<p:dataTable value="#{testAvalonDatatableController.rows}" var="car"
rows="15" paginator="true" paginatorAlwaysVisible="false"
scrollable="true" scrollWidth="600px" >
<p:column headerText="Id" sortBy="#{car.id}" style="width:100px">
<h:outputText value="#{car.id}"/>
</p:column>
<p:column headerText="Brand" sortBy="#{car.brand}" filterBy="#{car.brand}" style="width:200px">
<h:outputText value="#{car.brand}"/>
</p:column>
<p:column headerText="Year" sortBy="#{car.year}" style="width:200px">
<h:outputText value="#{car.year}"/>
</p:column>
<p:column headerText="Color" sortBy="#{car.color}" style="width:200px">
<h:outputText value="#{car.color}"/>
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
package logsit.test;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
import javax.faces.bean.ManagedBean;
import javax.faces.view.ViewScoped;
@ManagedBean
@ViewScoped
public class TestAvalonDatatableController implements Serializable {
private static final long serialVersionUID = 1L;
private final static String[] colors;
private final static String[] brands;
private final static List<Car> cars;
static {
colors = new String[10];
colors[0] = "Black";
colors[1] = "White";
colors[2] = "Green";
colors[3] = "Red";
colors[4] = "Blue";
colors[5] = "Orange";
colors[6] = "Silver";
colors[7] = "Yellow";
colors[8] = "Brown";
colors[9] = "Maroon";
brands = new String[10];
brands[0] = "BMW";
brands[1] = "Mercedes";
brands[2] = "Volvo";
brands[3] = "Audi";
brands[4] = "Renault";
brands[5] = "Fiat";
brands[6] = "Volkswagen";
brands[7] = "Honda";
brands[8] = "Jaguar";
brands[9] = "Ford";
cars = new ArrayList<Car>();
for(int i = 0 ; i < colors.length ; i++) {
cars.add(new Car(getRandomId(), getRandomBrand(), getRandomYear(), getRandomColor()));
}
}
public TestAvalonDatatableController() {
}
public List<Car> getRows() {
return cars;
}
private static String getRandomId() {
return UUID.randomUUID().toString().substring(0, 8);
}
private static int getRandomYear() {
return (int) (Math.random() * 50 + 1960);
}
private static String getRandomColor() {
return colors[(int) (Math.random() * 10)];
}
private static String getRandomBrand() {
return brands[(int) (Math.random() * 10)];
}
public static int getRandomPrice() {
return (int) (Math.random() * 100000);
}
static public class Car {
private String id;
private String color;
private String brand;
private int year;
public Car(String id, String brand, int year, String color) {
this.id = id;
this.color = color;
this.brand = brand;
this.year = year;
}
public String getId() {
return id;
}
public String getColor() {
return color;
}
public String getBrand() {
return brand;
}
public int getYear() {
return year;
}
}
}
datatable: scrollable attribute with - header and column not synchronized
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
You could this css code :
Code: Select all
.ui-datatable thead th {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I think this issue is resolved.
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 16 guests