Skip to content

Instantly share code, notes, and snippets.

@hatemalimam

hatemalimam/dataTableScrollStyle.xhtml

Created June 20, 2014 07:49
Show Gist options
  • Save hatemalimam/9ea8b98e4cf47b261559 to your computer and use it in GitHub Desktop.
Save hatemalimam/9ea8b98e4cf47b261559 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dataTableScrollStyle.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<ui:composition template="/templates/default/main.xhtml">
<ui:define name="content">
<style>
/* !important is needed sometimes */
::-webkit-scrollbar {
width: 12px !important;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
background: rgba(255,0,0,0.8) !important;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important;
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4) !important;
}
</style>
<h:form id="form">
<p:dataTable scrollHeight="100" scrollable="true" scrollRows="2" value="#{mainBean.list}" var="user">
<p:column headerText="Name">
#{user.name}
</p:column>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment