-
Posts
-
Hello,
I would like to know how I can define the width of a table which is embedded in a tab-container so that it displays properly on mobile devices. At the moment the table is only displayed partially. Many thanks for your support!Hey Chris2234,
In the table options please select Display as Tabular data and Scrollable table as showing in the below screenshot.
Best regards,
VinayThanks for your reply Vinay. However, I’m using a regular table and not the inbuilt table-extension. I would just like to fix the width via css (make it non-responsive).
Hi,
Please try something like this in Quick CSS:
#tab-id-2-container table { min-width: 1000px; }Regards,
RikardHi Rikard,
many thanks for your support. That’s exactly what I was looking for. However, unfortunately the css selector doesn’t work for me – the table is still resizing even though the minimum width should know be fixed.
P.S. I also added !important as a suffix but without any result…Hi,
It looks to be working on my end but you can try this instead:
.active_tab_content table { min-width: 1000px; }Regards,
RikardMany thanks for this — but it is still not working. The problem is that the tab-component is responsive and it resizes the embedded contents via css3 media-queries (in this case the table). Perhaps you could let me know how to fix the width of the tabs instead of the table. Many thanks for your support!
Haven’t tried this because I need to use the tabs for layout reasons. However, it would be great if you could let me know how to fix the width of the tab-container on mobile devices (i.e., make it unresponsive/ fix the width) . Many thanks for your support!
Hi,
Would you mind posting us a screenshot/mockup of what you want it to look like in mobile version? You can upload the screenshot to imgur.com or dropbox and share the link here :)
Best regards,
VinayI can explain this easily in words: The table should content should be fully accessible on mobile devices. Currently, the last columns to the right are cut off.
Best wishes,
ChrisHi!
Please post the login details here so that we can modify the table. Or edit the text block then wrap the tables inside a container. The markup should look like this:
<div class="avia-data-table-wrap avia_scrollable_table"> <table class="avia-table avia-data-table"> <!-- more content here --> </table> </div>Regards,
IsmaelI created a new table using the predefined enfold element. however, it is not displayed correctly on mobile phones. especially the first column is not shown correctly on smaller screens. many thanks for your support.
Hi!
Please add this css code in the Quick CSS field to increase the width of the table columns on mobile view.
@media only screen and (max-width: 767px) { .responsive .avia_scrollable_table .avia-data-table > thead > tr > th, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > th, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > th, .responsive .avia_scrollable_table .avia-data-table > thead > tr > td, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > td, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > td { white-space: normal; } div .avia-table { min-width: 568px; } }Adjust the width value if necessary.
Cheers!
IsmaelHi Ismael,
thanks for the code snippet. unfortunately its not working for me. The table is not properly formated when you minimize the browser window… most of the data is not visible at all… thanks for your efforts!
- You must be logged in to reply to this topic.