Tagged: table
-
AuthorPosts
-
April 15, 2015 at 5:35 pm #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
April 16, 2015 at 6:04 pm #429781Hi slui!
Your link is giving me a 404. Are the headings not lining up with the correct cells?
Best regards,
ElliottApril 16, 2015 at 6:08 pm #429783Sorry…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.
April 17, 2015 at 9:49 am #430195Hey!
Please edit the theme’s table element. Set the table purpose to tabular and the responsive styling to scrollable.
Regards,
IsmaelApril 17, 2015 at 5:08 pm #430431Thanks Ismael….any way to not have the scrollable bar below or is that just the way it is.
April 17, 2015 at 5:12 pm #430438Hi!
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,
YigitMay 7, 2015 at 5:14 pm #441090Hi 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
May 10, 2015 at 4:45 am #442040Hi!
Ah. Yes, unfortunately, that is the default behaviour of the table when set to scroll.
Cheers!
IsmaelAugust 27, 2015 at 6:31 am #493935Is there a fix so that the tables will look correctly on mobile via the responsive setting?
August 27, 2015 at 2:39 pm #494177Hey @codemode,
What are you having problems with? Please link to the site in question an post a screenshot if possible.
Thanks,
RikardAugust 27, 2015 at 11:16 pm #494554If 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.
August 31, 2015 at 12:05 pm #495737Hey!
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,
AndySeptember 1, 2015 at 12:00 am #496156Here’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.
September 1, 2015 at 7:12 pm #496638Hi!
not sure what you mean, because table in your screenshots looks good to me. How do you want it to look like instead?
Regards,
AndySeptember 1, 2015 at 8:22 pm #496701Here’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.
September 3, 2015 at 12:16 pm #497575Reading 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.September 3, 2015 at 12:47 pm #497587I 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.September 3, 2015 at 2:51 pm #497660Joost…excellent solution…thanks for posting!
September 3, 2015 at 8:31 pm #497979Thanks 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.
September 4, 2015 at 7:12 pm #498569Hey!
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,
ElliottSeptember 8, 2015 at 6:09 am #499662Hi 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?
September 11, 2015 at 3:03 pm #501668Hi!
Send us a link to your page and we’ll take a look.
Regards,
ElliottMay 27, 2020 at 3:32 am #1216781Hi 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
May 28, 2020 at 1:37 pm #1217338Hi 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 -
AuthorPosts
- You must be logged in to reply to this topic.