Page 1 of 1

datatable writes value under column name on mobile layout

Posted: 03 Mar 2017, 01:07
by bjorntj
If you look at the image included, you see that the values come below the name of the column when displaying on a mobile phone, shouldn't the wrapped text be moved further to the right?

Image


Regards,

BTJ

Re: datatable writes value under column name on mobile layout

Posted: 07 Mar 2017, 13:19
by mert.sincan
Please try;

Code: Select all

//CSS

@media (max-width:640px) {
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"].myCustomStyle {
        padding-left: 30%;
        margin-left: 1.6em;
    }

    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"].myCustomStyle .ui-column-title {
        position: absolute;
        left: 60px;
    }
}

//XHTML
....
<p:column headerText="Name" styleClass="myCustomStyle">
...

Re: datatable writes value under column name on mobile layout

Posted: 08 Mar 2017, 11:59
by bjorntj
Thx... I decided to change reflow to false for the table but will try this solution when reflow = false is not an option.. :)

BTJ

Re: datatable writes value under column name on mobile layout

Posted: 10 Mar 2017, 14:40
by mert.sincan
Thanks for the update! ;)