Home Forums Weaver Xtreme Theme Responsive tables

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #17677
    weaverfan
    Participant

    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!

    #21618
    Weaver
    Keymaster

    Hard to say, but perhaps a <div style=”clear:both;”></div> after the tables (via a shortcode that shows the table?).

    #21619
    weaverfan
    Participant

    It doesn´t work. Other suggestions?

    #21620
    Maureen
    Participant

    TablePress has an extension that changes the layout of the table to fit into a mobile screen.

    #21621
    weaverfan
    Participant

    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.

    #21622
    weaverfan
    Participant

    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?

    #21623
    Weaver
    Keymaster

    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.

    #21624
    weaverfan
    Participant

    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.

    #21625
    Weaver
    Keymaster

    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.

    #21626
    weaverfan
    Participant

    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?
    #21627
    scrambler
    Moderator

    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

    #21628
    weaverfan
    Participant

    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/

    #21629
    scrambler
    Moderator

    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

    #21630
    weaverfan
    Participant

    Thanks a lot – great!

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.