jsf - Change PrimeFaces DataGrid (responsive mode) behaviour -


it seems datagrid primefaces component (responsive mode) starts out stacked on small devices , becomes horizontal when resolution grows beyond 640 px. want able choose width datagrid columns stop being stacked , start positioning 1 beside other. is, change 640 px default value other value of choice.

thanks.

default breakpoint 35em equals 560px. need override css in primefaces default;

/* responsive */ @media (max-width:35em){     .ui-grid-responsive .ui-grid-row {         display:block;     }     .ui-grid-responsive .ui-grid-col-1,.ui-grid-responsive .ui-grid-col-2,.ui-grid-responsive .ui-grid-col-3,.ui-grid-responsive .ui-grid-col-4,.ui-grid-responsive .ui-grid-col-5,.ui-grid-responsive .ui-grid-col-6,.ui-grid-responsive .ui-grid-col-7,.ui-grid-responsive .ui-grid-col-8,.ui-grid-responsive .ui-grid-col-9,.ui-grid-responsive .ui-grid-col-10,.ui-grid-responsive .ui-grid-col-11,.ui-grid-responsive .ui-grid-col-12 {         width:100%;         float:none;     } } 

source: primefaces pro support queried in private form datatable component of pf 5.2 on june 2015 (similar answer, different css classes, tested these on primefaces 5.3 online showcase)


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

javascript - Get parameter of GET request -