Tagged: 

Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #429087

    Hi,

    I want to highlight that the table works beautifully when it is shown in desktop mode, but fails when it comes to responsive mode. I’m speaking to a two column table format. I have not tried a larger format table.

    From what I can tell, the table element in Enfold takes the second column and places it below the first column when it is in responsive mode. This makes it difficult for someone to correlate information from the first column to the second column of the same row.

    I have created an old school way of tables using HTML code and I got the desired result in terms of having both columns side by side on a mobile device.

    How can this be done with Enfold’s built-in table element?

    sl

    #429781

    Hi slui!

    Your link is giving me a 404. Are the headings not lining up with the correct cells?

    Best regards,
    Elliott

    #429783

    Sorry…it is working now…

    So I have two tables…one is the HTML and the other is Enfold Table element. Change your browser to reflect a mobile device and you’ll see what I mean by the second column of the Enfold Table element being placed below the first. When compared to the HTML table, both columns are side by side.

    #430195

    Hey!

    Please edit the theme’s table element. Set the table purpose to tabular and the responsive styling to scrollable.

    Regards,
    Ismael

    #430431

    Thanks Ismael….any way to not have the scrollable bar below or is that just the way it is.

    #430438

    Hi!

    I checked your website on Safari, Firefox and Chrome on OS X 10.10 but i cannot see scroll bar below your table element. Can you please flush browser cache and refresh your page and check if that helps. If not, please post a screenshot of the issue

    Best regards,
    Yigit

    #441090

    Hi Yigit,

    The page is up and running. You can see that the second table is scrolling side to side. However, I want it to look like the first table.

    sl

    #442040

    Hi!

    Ah. Yes, unfortunately, that is the default behaviour of the table when set to scroll.

    Cheers!
    Ismael

    #493935

    Is there a fix so that the tables will look correctly on mobile via the responsive setting?

    #494177

    Hey @codemode,

    What are you having problems with? Please link to the site in question an post a screenshot if possible.

    Thanks,
    Rikard

    #494554

    If you use the table as tabular data, the cells get mixed up and don’t align correctly in responsive mode. Desktop is ok, but when viewing on mobile, the responsive nature takes the horizontal data from left to right and stacks it top to bottom (at which point the data is no longer arranged intelligently). And, I don’t want to make the table scrollable from left to right on mobile because of the undesirable experience.

    The pricing table layout seems to work correctly on mobile, but I am unable to use that format for tabular data.

    Do you still need a screen shot or can you duplicate the issue?

    • This reply was modified 9 years, 2 months ago by codemode.
    #495737

    Hey!

    please provide us a link where we can see the issue. You can add screenshots to make things clear as well (imgur.com, dropbox).

    Regards,
    Andy

    #496156

    Here’s a basic example of what happens when you use tables as tabular data, select adjust to screen size, and then view on desktop and mobile. As you can see, the cells in the mobile table stack incorrectly.

    #496638

    Hi!

    not sure what you mean, because table in your screenshots looks good to me. How do you want it to look like instead?

    Regards,
    Andy

    #496701

    Here’s a quick photoshop job to better illustrate the table sections and how they are arranged.

    It would make more sense, and easier to read on mobile devices, if the table stacked as pictured for the “ideal solution” with spaces between each section. The 2nd solution pictured far right works as well.

    Does that help?

    • This reply was modified 9 years, 2 months ago by codemode.
    #497575

    Reading this thread I must conclude that the tables of Enfold are not responsive! I experienced this making a price table for a client.
    This means that the tables in Enfold are useless. That is a shame for this fantastic theme. What is the solution? Should I use an Excel table? Or should I make a picture of my tables anf publish them as png or gif elements?
    Thnks for your help.

    #497587

    I just found a simple solution. Just make a table in Word and copy this table to Enfold. The table is perfectly responsive!
    Check: http://barberyclinic.nl/prijzen/ for the start of a large pricelist.

    #497660

    Joost…excellent solution…thanks for posting!

    #497979

    Thanks for the tip Joost! Appreciate that.

    My only thing with the Word table solution is that if you have many columns (3 or more), the columns become super narrow and the data is a little hard to read as it wraps in long vertical cells. Not so great on a small mobile screen. :/ Would be best to stack the table, however, that would require a fancy plugin like TablePress (+ their paid responsive extension) – but I’d rather not pay to add another plugin for my simple use case.

    Was hoping that the great coders at Enfold could address or fix.

    • This reply was modified 9 years, 2 months ago by codemode.
    #498569

    Hey!

    It depends on how you build the table. Make sure the headings line up with the data cells. For example if you have one blank heading cell at the start then it will create an offset on mobiles. See here, https://kriesi.at/support/topic/bug-table-headers-applied-incorrectly-on-media-query/#post-387990.

    Regards,
    Elliott

    #499662

    Hi Elliott,

    Thanks for the reply but all the headings line up with the data cells. It appears to be a bug as it should behave similar to the responsive tables in the TablePress plugin.

    Any other ideas?

    #501668

    Hi!

    Send us a link to your page and we’ll take a look.

    Regards,
    Elliott

    #1216781

    Hi there,
    A little late to this tables party.
    I’m having the same issue with my tabular table and mobile responsive layout. I’m not sure how my table could become responsive since the table is X’s and Checkmarks. I’ve tried the pricing table layout as well, but same issue, do you see any alternative to get this type of table to respond to smaller screens without having to move left to right.

    Any ideas or help would be appreciated!

    -Mary

    #1217338

    Hi Mary,

    At the moment the options are to have it as you have it, to have it scrollable horizontally or hide the table for smaller screens and use some other element.

    If you need further assistance please let us know.
    Best regards,
    Victoria

Viewing 24 posts - 1 through 24 (of 24 total)
  • You must be logged in to reply to this topic.