Create A Forum - Support Forums

Support => Style Support => Topic started by: DOKEEFFE on July 01, 2018, 03:52:41 pm

Title: Pages no scrollbars on mobiles
Post by: DOKEEFFE on July 01, 2018, 03:52:41 pm
Hi,


I've recently joined yourselves. I run the forum https://comeallwithin.createaforum.com/ for rugby fans of Harlequins premiership team.


My HTML/CSS skills are coming on a storm (from near zero!) but I'm stuck on this - wanting to use ezportal pages (where I want somewhere I can easily knock up match reports/team news etc...) linked from messages. So for example I would just say "here is the current team status" and link to https://comeallwithin.createaforum.com/index.php?action=ezportal;sa=page;p=1


Unfortunately that page doesn't come over well on a mobile screen. I only see the first three cells of the table. I can scroll up and down it, but not left/right. I can't pinch it to make it smaller/larger. I can go to the full site and then back to mobile, but that is a pain.  Is there some way of changing the CSS / HTML to put scrollbars on the screen or some such? I was trying to use "overflow" but not having much success.


Thanks
Title: Re: Pages no scrollbars on mobiles
Post by: DOKEEFFE on July 01, 2018, 09:02:24 pm
Actually have the same problem if this is posted in a message.
See https://comeallwithin.createaforum.com/general-discussion/squadcontractsinjuries/?message=486


Looks fine on a desktop but unusable on a mobile.


Thoughts?
Title: Re: Pages no scrollbars on mobiles
Post by: DOKEEFFE on July 05, 2018, 05:38:40 pm
OK - problem is that we are using tables. Ordinary text flows OK but tables don't.
My solution occurred when I noticed that text encased in the [ code] [ /code] tags could be moved left/right on mobile phones.

So solution 1 is simply write your table within the [ code] [ /code] tags.

Solution 2 comes from seeing the < code class="bbc code">
I simply wrapped the table code in a < div>  set of tags where

<div style="    display: block;  font-family: courier new; font-size: normal;
    background: #eef;  border-top: 2px solid #999; border-bottom: 2px solid #999;
    line-height: 1.5em; padding: 3px 1em; overflow: auto;
    white-space: nowrap;     max-height: 250em;">

Now the table can be moved left/right on a mobile phone as well as up/down.

Problem solved.
Title: Re: Pages no scrollbars on mobiles
Post by: CreateAForum on July 05, 2018, 06:21:45 pm
Good job!