- This topic has 13 replies, 4 voices, and was last updated 11 years, 4 months ago by
.
-
Posts
-
it’s about the homepage http://www.hanauhornets.de
Admin: 001
Password: 246810
I have installed the plugin „Table Press“ and in order to watch the tables even on smartphones and small screens, I put the following code to Main Options -> Fonts & Costums -> Custom CSS Rules:
.is-mobile .tablepress{position: absolute;max-width: 10%;}
.is-ios .tablepress {position: absolute;max-width: 10%;}
.is-android .tablepress {position: absolute;max-width: 10%;}This works fine with the table on the page „Seniors – Tabelle“ and „Seniors – Spielplan“. But it doesn`t work for the tables on the pages „Juniors – Tabelle“ and „Juniors – Spielplan“. These both are within a tab – group. „Juniors – Roster“ is working great responsive, but not the tables, as they do in „Seniors – Tabelle“ and „Seniors – Spielplan“. Can you help me to find the solution for this?
Thank you so much!
Hard to say, but perhaps a <div style=”clear:both;”></div> after the tables (via a shortcode that shows the table?).
TablePress has an extension that changes the layout of the table to fit into a mobile screen.
We know the extension, we tried it already. But it doesn’ t show the table correctly, everything is postponed. And the appeareance of the responsive table is generally not what we want – different to the normal table when not responsive.
Still there ist the question how to fix the fact, that Custom CSS Rules above are working for the tables at the page “Seniors” – “Spielplan” or “Tabelle” but not for the tables at the page “Juniors” – “Spielplan” or “Tabelle”. Might be a conflict with the tab – group. What can we do?
The work the same for me on both Seniors and Juniors pages, and both have problems with the footer not going responsive.
Try putting a
<div style=”clear:both;”></div>
right before the Einen Üerblick über text.
Doesn`t change the footer on Seniors page (still not visible) but it shows the footer on the Juniors pages. But I still got the problem, that I cannot scroll the table on the smartphone from left to right on the Juniors tables and they are not shown in their full height.
If you tables work (at least work well enough!) on the Seniors pages, but not on the Juniors pages, then there MUST be some difference in how you’ve defined the tables for each page.
That would also account for why the clearing div you added works on one, but not the other. There has to be a difference.
I don’t know how your plugin is making its tables responsive – that is beyond the scope of this forum, really, but there is something different, and it has to be some tiny little detail you’ve overlooked, I would guess.
What I see that would explain the different behavior on the Senior vs. Junior pages is the use of the CSS overflow attribute. The table seems to overflow its div on the Seniors page, while being hidden on the Junior page. If it is an overflow display issue/feature, that would explain why the Senior version is being displayed on top of the footer (it overflows over the footer), but not on the Juniors page.
What I have seen is, that
<div style=”clear:both;”></div>doesn’t change anything. Both the same appearance if I put it in or not.But not to see the footer isn’t my main problem. The problem is, that I cannot see the whole table on the page Juniors – Tabelle or Spielplan in mobile view. There are only two rows to see and 3 columns. This might not be a problem with the plugin, because this works fine with the tables on the Senior’s page.I have again checked really everything, but there is no difference in defining the tables. The only differences are how many rows they have.Again: Is it perhaps a conflict with the tabs I use on the Juniors pages?It looks like your problem comes from the rule
.is-mobile .tablepress{position:absolute;max-width:10%}
By making the table positioned absolute, it is over everything and is not taken into account in the size of the page, so the table ends up under the footer
Okay, I have removed it. Is there a possibility to create a scrollbar for the contents, where I use tables? So that I can scroll them on mobile view, as it is shown on this homepage: http://stuttgart-scorpions.de/teams/juniors-u19/spielplan/
If you inspect he site you will see they are using overflow-x:auto on the table on mobile with the rule
@media only screen and (max-width:640px;) {
.table-2{display:block;overflow-x:auto;}
}Your table needs to have a class (like the table-2 in the example above, and if you only want that on mobile you place the rule in the @media rule with the value you want got the treshold
- You must be logged in to reply to this topic.