Home Forums Weaver Xtreme Theme Horizontal scroll bar not shown

This topic contains 9 replies, has 2 voices, and was last updated by  saputnik 2 weeks, 4 days ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #62032

    saputnik
    Participant

    Hi. I’ve searched for this topic in guide, but was not able to find the answer.

    I inserted some tables in my posts that are about 1,600 px wide, and there is a right sidebar. With sufficiently wide monitor, it works fine – when I decrease width of the browser, sidebar gets removed below post, to accomodate space for the table inside the post.

    When I decrease window width to less than width of tables, or in mobile phone browser, I would expect horizontal scrollbar to appear, so to be able to scroll the table (table itself is not responsive, it’s fixed width).

    But it does not happen – there is no scrollbar, so right part of my tables is not visible.

    I’ve tried several other themes, and some of them display horizontal scrollbar, some of them not, with default settings. Native WP Twenty Twenty theme does not display it.

    So I guess it’s theme-specific issue. I’d love to stay with Weaver, so is there a way to force displaying horizontal scrollbar?

    Thanks!

    #62033

    scrambler
    Moderator

    How did you create the table?

    I don’t think tables can have a horizontal scrollbar, but if they are in a container, then you can use the CSS overflowx:scroll on its styling  to allow the container to have a scrollbar. when the table is bigger than the container

    For more help, we need a link to the page with the table

    #62035

    saputnik
    Participant

    Well, my bad for not posting the link immediatelly, sorry. The site is http://www.xenbet.com.

    You can see examples of the tables in three sticky posts on the top; and this is maybe better example:

    https://www.xenbet.com/england-league-one/main-table/

    Ther table was created in Excel and exported as .htm. Original table is located here: https://www.xenbet.com/football-betting-stats/england-league-one/content/main-table.htm , and then it is inserted into post using php include function, using plugin “Insert PHP code snippet”. It obviously works properly, and scrollbar is the only issue: if you resize the browser window to be narrower than the table, or open it on the phone, rightmost part of the table is not visible, and there is no horizontal scrollbar, to scroll to the right – that right part of the table (which obviously goes outside the post area) is not accessible at all.

    As I said, I tested more than dozen of themes, and it’s about fifty-fifty, half of them have the scrollbar so I can scroll right to see the whole table, and half of them are like this – no scrollbar, right side of the table not accessible.

    I tried to fiddle with options Full Width Site in Weaver Admin, but none of the options (Full Width, Stretched, Traditional, and Entire Site Full Width below that) made this scrollbar to appear… I also tried custom CSS:

    body {overflow-x:scroll; }

    but it didn’t help either.

    Hope you can help?!

    #62036

    scrambler
    Moderator

    Looking at the HTML, I see the table is placed into a div. If you can edit the HTML, add a style attribute to that div with the overflow-x css like below

    <div align="center" id="E2_8849" style="overflow-x: scroll;" x:publishsource="Excel"><table.....

    If you don’t know how to edit the HTML, you can add the rule below in the Theme Global Custom CSS Rule box, to add the overflow on the parent container

     .entry-content {overflow-x:scroll;}

    #62037

    saputnik
    Participant

    Hi! Thank you for prompt reply and help! Well, this seems to work, but not entirely as I wished.

    Editing html is not an option – I have more than 200 tables that I plan to insert to WordPress if this issue with scrollbar is resolved, and I update them once a week (full static site is at BetGPS.com), so editing them all each time is not possible.

    So, I inserted custom CSS as you advised, and now scrollbar is displayed at the bottom of the post, i.e., below this table; I would like scrollbar to be on the bottom of the entire page, like shown in screenshot below.

    So I guess, instead of this div .entry-content, I need to apply this property to overall div of entire site. I tried to check it, found .wrapper to be the the outermost div in the theme, but when I apply it, it again adds scrollbar in similar way, it is visible only when I reach the bottom of the page… So there must be something else, but of course I don’t know what…

    Scrollbar

    #62038

    saputnik
    Participant

    Well, I’m afraid there might be no solution, I wanted to let you know not to waste your time… I tried to apply this property to that one specific post,

    .postid-15138 {overflow-x:scroll !important;}

    and I get scrollbar in desired position, but it doesn’t work, it always fills 100% of the width, which is logical – your content is responsive, it fits within the window, and it “does not know” that my tables are wider.

    Though, first solution you proposed, to apply property to .entry-content div, works on mobile, it is possible to slide tables left and right; so I will have to live with it.

    Thank you for your help!

    Scrollbar 2

    #62039

    scrambler
    Moderator
    There is an impossibility in your request.
    A scrollbar can only exist and apply to a container that has content overflowing.
    It allows to scroll the overflowing content inside the container.
    As you reduce the browser size, the table becomes larger than the content area container, so the content container is overflowing.
    But the global container (wrapper) is not overflowing.
    What you are asking, would be to place a sidebar on the global container that has nothing to scroll, with the scrollbar scrolling the content of a sub container.
    As far as I know that is not possible with CSS, it may be possible with a Javascript, but I have no idea how that would work.
    Hope that makes sense.
    #62040

    saputnik
    Participant

    Yup, I see, I got to the same conclusion, it seems we typed in the same time…

    Thank you once again for your time!

    #62041

    scrambler
    Moderator

    @saputnik

    If you are comfortable with javascript, below is a thread that seems to address creating a floating scrollbar for a similar situation as yours

    https://stackoverflow.com/questions/24552684/possible-to-have-a-floating-horizontal-scrollbar

    https://www.jqueryscript.net/other/Floating-Scrollbar-Plugin-jQuery-Floating-Scroll.html

    Below are tips for Javascript implementation in Xtreme

    https://guide.weavertheme.com/scripts-using-them-for-advanced-styling-or-design-changes/

    You may also want to look into plugins

    #62045

    saputnik
    Participant

    Looks interesting; not familiar too much with JS, but will try; thanks!

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

You must be logged in to reply to this topic.