Tagged: ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #171310

    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 description

    Everything 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 4

    When iPhone screen size:

    Header 2
    Cel content 1
    Header 3
    Cel content 2
    Header 4
    Cel content 3
    CEL CONTENT 4

    I hope you can fix this, because the feature is great, but unusable on small screen sizes ;-)

    Kind regards,

    Dave

    #171905

    Hi Dave!

    Can you post the link to your website where you inserted a table?

    Regards,
    Yigit

    #171908

    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

    #171924

    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,
    Yigit

    #171925

    Hi Yigit,

    Done that and that screws up the header row. Have a look (I’ll change it back in about 30 mins).

    Thanks!

    Dave

    #173870

    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!
    Yigit

    #174115

    Hi 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 4

    Thanks,

    Dave

    #174622

    Hey!

    Can you post a screenshot after you apply that css code? When i do it on my end, it looks fine.

    Regards,
    Yigit

    #174702

    Hi Yigit,

    Sure! I have a attached 3 screenshots for you:

    1. Firefox, Chrome and Safari on a Mac
    2. iPhone size in Firefox on a Mac
    3. iPhone size in Safari and Chrome on a Mac
    4. iPhone screenshot Safari browser
    5. iPhone screenshot Chrome browser

    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

    #175606

    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,
    Yigit

    #176055
    This reply has been marked as private.
    #176457

    Hi!

    I cannot login for some reason. Can you create another admin login?

    Cheers!
    Yigit

    #176464
    This reply has been marked as private.
    #176812

    Hello!

    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,
    Ismael

    #176918

    Hi 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

    #178350

    Hi guys,

    Any luck so far on the issue? Can I revoke/disable the login I created for you?

    Kind regards,

    Dave

    #178621

    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,
    Kriesi

    #180576

    Hi 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

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Table bug (Enfold)’ is closed to new replies.