Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 5, 2018 at 12:50 pm #1006092
    flmhthemeforest

    Dear Enfold team,

    great theme but I have a little problem. I am using tables to display data and in desktop view they look fine. On mobile however they change in a (at least for me) undesired way:

    It seems like the <th> of the first <tr> content gets added to all following rows via CSS. How can I change that from happening?

    It is just a two column table where the first is the description like “Name” or “Phone” and the second is the respective content. On desktop column 1 is left and column 2 right (works fine) and on mobile it is item 1 / column 1 (eg NAME) then below item 1 / column 2 (Content – corresponding name) and so on which would be perfect but for some reason item 1 / column 1 gets added every time.

    I hope that makes sense. Thanks in advance for your help!

    September 5, 2018 at 1:23 pm #1006115
    Rikard

    Hey flmhthemeforest,

    Could you post a link to where we can see the element in question please?

    Best regards,
    Rikard

    September 5, 2018 at 4:24 pm #1006196
    flmhthemeforest

    Hi Rikard,
    yes of course. Thanks!
    Best regards
    Micha

    September 5, 2018 at 6:47 pm #1006268
    Victoria

    Hi Micha,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .responsive .avia_responsive_table .avia-data-table .avia-button-row, 
  .responsive .avia_responsive_table .avia-data-table tr:first-child th {
      display: block;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 5, 2018 at 11:41 pm #1006368
    flmhthemeforest

    Hi Victoria,

    thank you this fixes the first header section but “Ansprechpartner*innen” (from the first <th>) still gets included in every <td> element. (see link above). It seems to happen via a ::before CSS rule. Not sure why this would be desired.

    Best regards,
    Micha

    September 6, 2018 at 5:46 am #1006455
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px) { 
.avia-data-table-wrap.avia_responsive_table td:before {
display: none !important;
}
}

    Best regards,
    Mike

    September 6, 2018 at 9:49 am #1006521
    flmhthemeforest

    Hi Mike,

    perfect that did the job. Thanks for your help!
    I think this CSS style should be changed in an Enfold update. (Or made optional if there is a scenario where that behaviour would be desired).

    Best regards,
    Micha

    September 6, 2018 at 12:54 pm #1006568
    Mike

    Hi,
    Glad that we could help. But by default, for mobile the title row is supposed to be hidden and then the title is added via the “:before” to the cells because the columns are stacked. Please see the last table on the demo
    But I guess that it depends on how big a table will be & how someone would like to see it, I just wanted to show why it was setup that way.
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    September 6, 2018 at 3:13 pm #1006643
    flmhthemeforest

    Hi Mike,

    thanks for the explanation. I guess in more complex tables that is useful. Since you can select if the rows/columns should be standard/description/etc. maybe it would be an idea to fine tune the mobile display. I guess a setup with two columns where the first is description and the second standard for information like contact data, etc might be a quite regular use-case where it would be better to not add via “:before”. But this can be closed unless the solution should stay around for others with a similar problem. Thanks for your quick help!

    Best regards,
    Micha

    September 6, 2018 at 11:31 pm #1006832
    Mike

    Hi,
    Glad we could help, we will close this now. This will be available for all users because it will be indexed and searchable via Google and the forum search.
    Have a great day!

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Responsive table / table on mobile device’ is closed to new replies.