datatable writes value under column name on mobile layout

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
User avatar
bjorntj
Posts: 277
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 11.x | PrimeVue 3.x | Spring Boot 2.7.x | Undertow | Mojarra 2.3.x
Mac OS, Firefox and Chromium

mert.sincan
Posts: 5281
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: 277
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 11.x | PrimeVue 3.x | Spring Boot 2.7.x | Undertow | Mojarra 2.3.x
Mac OS, Firefox and Chromium

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

10 Mar 2017, 14:40

Thanks for the update! ;)

Post Reply

Return to “Verona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests