datatable writes value under column name on mobile layout

Post Reply
User avatar
bjorntj
Posts: 195
Joined: 30 Jul 2010, 10:46

03 Mar 2017, 01:07

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
PrimeFaces 6.0 | Jetty 9.4.3 | Mojarra 2.2.14
Arch Linux, Firefox and Chromium

User avatar
aragorn
Posts: 2084
Joined: 29 Jun 2013, 12:38

07 Mar 2017, 13:19

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">
...

User avatar
bjorntj
Posts: 195
Joined: 30 Jul 2010, 10:46

08 Mar 2017, 11:59

Thx... I decided to change reflow to false for the table but will try this solution when reflow = false is not an option.. :)

BTJ
PrimeFaces 6.0 | Jetty 9.4.3 | Mojarra 2.2.14
Arch Linux, Firefox and Chromium

User avatar
aragorn
Posts: 2084
Joined: 29 Jun 2013, 12:38

10 Mar 2017, 14:40

Thanks for the update! ;)

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest