-
AuthorPosts
-
October 23, 2015 at 9:43 am #523551
Hello
I have created a table which looks okay on full screen. However, when you shrink your browser window, the rows do not line up and you end up with different cells matching up with different row headers. Please can you advise.
Thank you
Andy
October 23, 2015 at 4:43 pm #523969Hey andydiprose!
It’s because of the empty cells your using. The table should have a header for each column and all cells filled out for it to work properly, https://kriesi.at/support/topic/bug-table-headers-applied-incorrectly-on-media-query/.
Would you like to disable the responsive table CSS?
Cheers!
ElliottOctober 23, 2015 at 5:24 pm #524004Thank you Elliott
This is how I had it originally, unfortunately, the same thing happens – I have changed it back so all cells are populated for you to look at, but the problem is the same. HTML tables are normally pretty good at aligned, so I don’t understand.
Many thanks
Andy
October 23, 2015 at 5:57 pm #524032Hey!
Are you wanting the first column to display as well? If so then add this to your custom CSS.
@media only screen and (max-width: 767px) { .responsive .pricing-table.avia-desc-col { display: block !important; } }
Best regards,
Elliott- This reply was modified 9 years, 1 month ago by Elliott.
October 24, 2015 at 11:42 am #524213Thank you Elliott
I copied it into Quick CSS and it still doesn’t align properly. There are 6 rows and we need them to align properly across the 4 columns – just like a normal table in Excel.
Many thanks
Andy
October 26, 2015 at 3:30 pm #524938Hi Elliott – any further thoughts on how to get the table rows aligned?
Many thanks
Andy
October 27, 2015 at 6:21 pm #525728Hi!
Sorry, there was a typo. Try it again.
Regards,
ElliottOctober 27, 2015 at 6:24 pm #525731Thank you Elliott
Try what again? The code? If so, what was the type and what is the new code?
Many thanks
Andy
October 27, 2015 at 6:36 pm #525742Hello Elliot
I saw that you updated the code and copied that into Quick CSS. Afraid that it doesn’t work either. What next? Is there something fundamentally wrong I am doing? Surely a HTML table should automatically change the height of the cells etc in a row together when a browser is shrunk in size?
Many thanks
Andy
October 29, 2015 at 8:16 pm #527110Hey!
It appears to be working. I’m not sure what you mean by aligning the table cells. On mobile they are going to use 100% width and display on top of each other.
Take a screenshot and highlight exactly what your trying to do so we can get a better idea.
Best regards,
ElliottOctober 30, 2015 at 11:42 am #527301Thank you Elliot
How do I attach screenshots on this web interface? I could reply to your email, but it says (Email address hidden if logged out) . Is there an email address I can use.
I’ve created the two screenshots so can send them over. Essentially, just look at the row descriptions. ‘Weed examples (not exhaustive)’ should align with ‘Bracken’, ‘Bamboo’ and ‘Ground elder’ but it does not, it starts half way down. When you shrink your browser screen, the problem gets even worse as the first description columns compact onto 2 or 3 lines each!
Many thanks
Andy
October 31, 2015 at 4:20 pm #527930Hi!
Try uploading the screenshots at imgur.com and then copy the URL to them and click on the “img” button in the editor when writing your reply to insert them.
Best regards,
ElliottNovember 2, 2015 at 5:24 pm #528659Hello Elliott
Please see http://imgur.com/a/ulqbV
As you can see, I have added red lines where the headings should be – but they are not because of this alignment issue.
Hopefully you can now see the issue?
Andy
November 3, 2015 at 4:29 pm #529419Hey!
not sure what you are trying to show us with these red lines. Can you instead show us a mockup of the things you want to achieve please? send us a screenshots of how you want the things to look like and we try to provide you some precise CSS code for it.
Cheers!
AndyNovember 3, 2015 at 4:57 pm #529470Thank you Andy
It is quite simple. Let me explain it with the screenshots.
You see there are 4 columns? The first column is a description of the other 3 columns.
If we take the first row, everything lines up – Weed category, ‘Average’ Weed, Woody Stem, Extensive Roots. Great.
If we take the second row, again, everything lines up – Treatment time (Less than 5cm), 0 to 1 seconds, 1 to 2 seconds, 1 to 2 seconds. Great.
If we take the third row, things start becoming misaligned. This is because the descriptive text is too long so goes onto two lines – Treatment time (between 5 and 30cm), 1 to 3 seconds, 2 to 5 seconds, 2 to 5 seconds. Not so great.
If we take the forth row, things start to become really messed up. The description is not on the same row. It should be – Treatment time (greater than 30cm), 3 to 5 seconds, 5 to 15 seconds, 5 to 15 seconds. However, it is not, the first column does not line up with the 2nd, 3rd and 4th columns.
If we take the first row, then things are completely misaligned. The description is – Treatment required. However, this is no where near the data it corresponds to – Single, Single and Multiple (2 or 3 times). You would expect these to be completely aligned. They are not.
The last row is the same as above. The description – Weed examples (not exhaustive) is no where near the data it corresponds to – It should vertically start with Bracken, Bamboo and Ground elder – it doesn’t.
Now, when you shrink your browser, then these all get worse as some data in cells moves onto 2 lines. Things become even more misaligned.
You would expect the rows of data in a table to all align, if one is two or three lines long, then all rows below it would move down.
Does that now make sense? If not, perhaps there is a number I could call to talk you through it. I am not being mad, I have programmed before with <tr> etc and know how tables should render.
Thank you
Andy
November 4, 2015 at 3:42 pm #530087Hey!
I checked your website again and your table seems to be exactly the way you want. Could you fix it?
Regards,
AndyNovember 4, 2015 at 3:44 pm #530092Hi Andy
I just changed it from the Pricing format to Data format. I did this because I googled ‘Enfold Table Alignment’ and it seems that it is a common problem. I am not 100% happy as the look and feel of your data format table is not very good. Ideally, I would prefer the Pricing format as it looks much nicer. If you can tell me how to fix it that way, I would be more than happy to change it back.
Many thanks
Andy
November 4, 2015 at 3:48 pm #530100Hi!
we would need a test page showing the issue with the table in question, because we need to be able to inspect the elements. I thought about defining a min-width value for the rows, maybe it could work in your case. Provide us a link and we check it.
Best regards,
AndyNovember 4, 2015 at 3:51 pm #530107Thank you Andy.
To be honest, it appears that your table in Pricing format is not a table at all using columns and rows, hence why there are rendering issues. I would prefer to keep as it is rather than forcing it to behave in a certain way, which will inevitable not work in all scenarios and across all mediums. My suggest would be to allow you to change the format of your Data table – perhaps having an options to toggle the colour of columns//rows/cells, or to stop alternate row highlighting, etc.
Thank you
Andy
November 4, 2015 at 4:05 pm #530131Hey!
feel free to make a feature request for Kriesi about this here: kriesi.at/support/enfold-feature-requests/
Regards,
AndyJanuary 31, 2018 at 10:08 pm #905844Hello,
is there any update on this topic? Because it seems that this issue with the pricing tables still persists. I’m having the same problem and have to use the data table now.
Would be nice to get this done on an next update.Regards, Enrico
February 2, 2018 at 7:13 am #906666Hi,
@enricobaumgart: Please create a new thread or post with the site url. We would like to check it.Best regards,
Ismael -
AuthorPosts
- The topic ‘Table Rows Misalignment’ is closed to new replies.