-
Posts
-
Hi there!
What a great theme!!!
I noticed the following: I have created a table with 4 columns and one header row (at the top).
First and second columns are standard
Third column is centred
Fourth column is descriptionEverything is fine until I resize the window to reflect a iPhone size screen. The whole table becomes one column which is great!
The cells have in small and italic the column header mentioned straight above the cell content. This is a great feature, however it skips the first column name resulting in a wrong label above the cell content (and in my case missing a label for column 4 altogether). See the example below:Example:
Header 1 Header 2 Header 3 HEADER 4
Cel content 1 Cel content 2 Cel content 3 CEL CONTENT 4When iPhone screen size:
Header 2
Cel content 1
Header 3
Cel content 2
Header 4
Cel content 3
CEL CONTENT 4I hope you can fix this, because the feature is great, but unusable on small screen sizes ;-)
Kind regards,
Dave
Hi Yigit,
Here you can find the table: http://www.helingvanhethart.nl/krihanash-belvaspata-genezing-voor-de-ziel-met-geuren-alchemy/
Just resize or look on it on your phone and you will see what I mean :-)Thanks!
Dave
Hi!
Please add following code to Quick CSS in Enfold theme options under Styling
.responsive .avia-data-table tr:first-child th { display: block; }Best regards,
YigitHi Yigit,
Done that and that screws up the header row. Have a look (I’ll change it back in about 30 mins).
Thanks!
Dave
Hello!
Please change the previous code with following one
.responsive .avia-data-table tr:first-child th { display: block!important; } .avia-table-1 td:nth-of-type(1):before, .avia-table-1 td:nth-of-type(2):before { content: none!important; }That does the job on my end
Cheers!
YigitHi Yigit,
That didn’t work for me. The header is now displayed on top of each other and not above the columns in normal view.
When resizing to the size of the iPhone, there is still the problem with the headers in small above the cell content. Only one column has the header in small font above the content and that is column 3, but it has the header of column 4Thanks,
Dave
Hey!
Can you post a screenshot after you apply that css code? When i do it on my end, it looks fine.
Regards,
YigitHi Yigit,
Sure! I have a attached 3 screenshots for you:
1.
2.
3.
4.
5.
1. For all browsers in normal size, the result is a header which is vertical above the first column (try resizing to small and back again to “normal” size)
2. Resized to a resolution of iPhone size in Firefox. The first two cells and the last one (columns of the row) do not have a header text in small letters above the content. Then the 3rd cell has a header text: “Symptomen” in small font above: 3:00-05:00. This is however not the header of the 3rd column. This should be “Optimale tijd”
3. Resized to a resolution of iPhone size in Safari or Chrome, results in the same make-up.
4. Screenshot from an iPhone in Safari browser. Notice that there is no header and there is the header text in the first 3 of the 4 columns (cells), but these are displaced again. So “Olie” above: “Long”, should be Meridiaan, etc. (so they are misplaced by one)
5. Screenshot from an iPhone in Safari browser. This is the same as 2. and 3.So there are changes in the different browsers….
Hope this helps :-)
Kind regards,
Dave
Hello Dave!
Thank you for posting a detailed one :) Do you mind creating a temporary admin login so i can login and take a look?
Regards,
YigitHello!
First, please edit css > shortcodes.css, find this code on line 1057:
@media only screen and (max-width: 767px) { .responsive div .avia-data-table table, .responsive div .avia-data-table tbody, .responsive div .avia-data-table tr, .responsive div .avia-data-table td, .responsive div .avia-data-table th{display:block; border-top:none; border-right:none; border-left:none; text-align: center;} .responsive .avia-data-table{border-style:solid; border-width: 1px;} .responsive .avia-data-table .avia-pricing-row .avia-desc-col{text-align: center;} .responsive .avia-data-table .avia-button-row, .responsive .avia-data-table tr:first-child th{display:none;} .responsive .avia-data-table td:before { display:block; font-style: italic; font-size: 11px; } .responsive .avia-data-table td { position: relative; } }Remove it. We might need to adjust the table width.
Regards,
IsmaelHi Ismael,
This stops the table being responsive, which is not an option on a site that is visited a lot by mobile devices (like mine). I hope you can sort it out, also with the table headers above the cell content in mobile devices, because this is very helpful!
Kind regards,
Dave
Hi guys,
Any luck so far on the issue? Can I revoke/disable the login I created for you?
Kind regards,
Dave
Hey!
Hey! the problem in this case seems to bet the fact that when you break up a table on a mobile view you can either break it up vertically or horizontally. In either case if the user uses it the other way it will be displayed messed up. I currently have no solution for this, since if I change it to break up in a different way it might cause the same problem for other users :/
Until I find a way to fix this, you might want to try to use a dedicated table plugin, they usually have more options for this:
for example: http://fooplugins.com/plugins/footable-lite/I have put it on my todo list and further investigate possible css rules, maybe there are some fancy new css3 techniques that I dont know yet that allow me to fix the problem ;D
Regards,
KriesiHi Kriesi,
Thanks for your answer! Much appreciated! I hope you can fix in the future.
Maybe a very simple thought, you say it is broken up differently when doing it vertically or horizontally. Can’t you create different CSS for different resolutions, so it breaks up horizontally or vertically depending on the horizontal resolution?I have implemented the recommended table plug-in so that will do for now. I like however to have the least plug-ins as absolutely possible :-)
Thanks again to you and the whole team for a job well done!
Dave
- The topic ‘Table bug (Enfold)’ is closed to new replies.