These are chat archives for mcasimir/mobile-angular-ui

17th
Aug 2015
ElleryW
@ElleryW
Aug 17 2015 16:53
Are scrollable areas supposed to enable horizontal scrolling? I've tried to put a scrollable area in my view with display: inline-block and white-space: nowrap to enable horizontal scrolling. It works fine with browser emulation, but not on my iphone 6.
ElleryW
@ElleryW
Aug 17 2015 17:26
I worked around the issue by creating a div inside my div with the class scrollable-content and gave it the style elements listed above + overflow-x: scroll
Maurizio Casimirri
@mcasimir
Aug 17 2015 17:42
Hi @ElleryW
You don’t need scrollable component for that
I understand it is not exactly homogeneus, i should provide something to solve that
anyway you done exactly what it makes it work
“ gave it the style elements listed above + overflow-x: scroll"
going to add horizontal scrollable to roadmap
Maurizio Casimirri
@mcasimir
Aug 17 2015 17:55
ElleryW
@ElleryW
Aug 17 2015 20:26
Thank you
Another question which has been on my mind is how to have an independent horizontal and vertical scrollable content within the same scrollable div. I would like it to work such that a horizontal scroll in the horizontal region would not affect the vertical scroll region and vice-versa.
@mcasimir How can I do that without a scrollable component when global scroll is disabled?
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:28
Yep
lot of people asked for that
still don’t know how to do that, neither if to implement such behaviour as default
but i immagine that preventing propagation
ElleryW
@ElleryW
Aug 17 2015 20:30
I got it to work in chrome by setting position fixed and overflow-x/y depending on the region, but that caused a lot of issues when I tested on the iPhone
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:30
yes
i know
infact that’s the big concern, i want it to be possible
ElleryW
@ElleryW
Aug 17 2015 20:30
I was almost thinking to disable scroll on each region when scrolling occurs on the other region(s)
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:31
so people gets what they expect
basically is what i thought
but i don’t want to affect the default or standard way overflow-x / y works
but its a little tricky
ElleryW
@ElleryW
Aug 17 2015 20:31
Indeed
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:32
probably you should intercept (won’t propagate) touchmove
from inner horizontal scroll
to outer vertical scroll
although this may seem straigthforward
it is not
ElleryW
@ElleryW
Aug 17 2015 20:32
Yes. I'm not all too familiar with Angular so I don't know how to do that yet. I'll probably work on it later this week and if I get it to work cleanly I can submit a PR.
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:33
the reason is you should detect the direction of the movement
to understand
wether user is trying to scroll down-up
ElleryW
@ElleryW
Aug 17 2015 20:33
Yes, and then there are complicated cases where if you have more content than can fit on the screen how do you separate global scroll from other scrolls.
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:33
or left-right
but the worst part is
ElleryW
@ElleryW
Aug 17 2015 20:34
i.e. if you have a vertical scroll which is larger than the overall screen size then if you scroll into that region you will be stuck forever
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:34
you can’t always prevent/stop an event once it starts
yep
ElleryW
@ElleryW
Aug 17 2015 20:35
Some things just shouldn't be done on mobile and I think that is one of them.
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:36
no idea how to solve this in a consistent way
at least without getting rid of native scroll
that would be probably a solution
so horizontal scroll may be done like in carousels
simulated by js
ElleryW
@ElleryW
Aug 17 2015 20:37
The other problem with horizontal scroll is that sometimes the native scroll thinks I'm trying to navigate back on a swipe right.
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:38
that would grant much more control
for that
oh
there is another workaround
but
sadly it is not perfect enough to be enabled by default
here it is
ElleryW
@ElleryW
Aug 17 2015 20:40
I took that out of my ng-app directive
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:41
you probably do right
ElleryW
@ElleryW
Aug 17 2015 20:41
It was causing issues where if I had a list of href elements and I wanted to scroll through them it would sometimes navigate on the scroll
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:41
since it cause lot of troubles
ElleryW
@ElleryW
Aug 17 2015 20:41
It is currently enabled in the demo which is what I started with. Might want to take that out so other noobs like me don't start with it enabled.
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:41
but it could be a good starting point
yep better
although i think it should simply work
so i should disable it
ElleryW
@ElleryW
Aug 17 2015 20:42
I'm not sure my use case is a big enough sample size ;)
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:42
but i really want it to work at least on platforms where it could
for example
using it (as service)
you may solve your horizontal scrolling issue
ElleryW
@ElleryW
Aug 17 2015 20:44
Well the bigger issue in my opinion is the default scrollable uses height: 100%
A good starting point is to make scrollable regions which are not using the entire screen
Modularizing the scrollable regions is a good thing
if I try to include two scrollable elements the second one is off the screen since the height is 100%
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:45
ok well
this is probably just bad communicated
ElleryW
@ElleryW
Aug 17 2015 20:45
I had to disable the height: 100%; width: 100% in the scrollable-content css
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:45
scroll areas (scrollable) are exactly for that
you shouldn't
the correct way
is to wrap your content in a smaller div
ElleryW
@ElleryW
Aug 17 2015 20:47
I tried to put two scrollable-contents in the same scrollable and that didn't work as I would like
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:47
the reason for scrollable to exist is much more to allow fixed headers and footers
ElleryW
@ElleryW
Aug 17 2015 20:47
At least not with independent horizontal and vertical scroll
oh, okay
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:47
than make it easy to say overflow-x / y
so basically it is designed (not awesome i know) for vertical scrolling
on many mobile browsers use of position: fixed was not an option
ElleryW
@ElleryW
Aug 17 2015 20:49
Still is not
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:49
while on contrast it is a super-common pattern
ElleryW
@ElleryW
Aug 17 2015 20:49
The other good thing is that scrollable-content includes the overthrow polyfill
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:49
to have fixed navbars both on top and bottom
mmm so you suggest something like
relaxing the meaning of scrollable
something like scrollable-vertical would have height:100% but not width and vice-versa for scrollable-horizontal
?
ElleryW
@ElleryW
Aug 17 2015 20:51
I think the height should be specified
At least for me
I have a header and footer on all pages
Then I have a dashboard with a horizontal scroll with height 125px and vertical scroll for the rest
Maybe limiting one vertical scroll and one horizontal scroll would be good since the horizontal scroll takes up as much space as it needs and then the vertical can have what is remaining
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:53
But wrapping scrollable wouldn't work as expected? At least for vertical one?
ElleryW
@ElleryW
Aug 17 2015 20:54
I'm not sure
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:54
What i’ve not understood is
the horizontal part has to stay fixed?
or move along with vertical scroll?
ElleryW
@ElleryW
Aug 17 2015 20:56
The horizontal part doesn't necessarily have to stay fixed
There is an awful hand drawing of what I want
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:57
:D
ElleryW
@ElleryW
Aug 17 2015 20:57
My horizontal scroll works perfectly right now, but I can't get any vertical scrolling to work with it. If I try to scroll vertically the entire page moves up and down including the header and footer.
Maurizio Casimirri
@mcasimir
Aug 17 2015 20:58
Oh ok
well first of all try to revert the scrollable css
to have height and width 100%
or any other sort of edits causing the issue
accidentally
ElleryW
@ElleryW
Aug 17 2015 20:59
I have to keep the scrollable-content height: 100% commented or it doesn't work since one scrollable-content starts off screen.
I uncommented my changes to scrollable
Maurizio Casimirri
@mcasimir
Aug 17 2015 21:00
well that should not happen
try to keep all as it is
i mean
height: 100%
it should work like that
ElleryW
@ElleryW
Aug 17 2015 21:01
If I do that then only the first scrollable content is visible
I just confirmed with my iPhone
Maurizio Casimirri
@mcasimir
Aug 17 2015 21:01
that’s fine
ElleryW
@ElleryW
Aug 17 2015 21:01
and vertical scroll still isn't working
Maurizio Casimirri
@mcasimir
Aug 17 2015 21:01
is what should happen, i suggest to try this
just keep the vertical scrollable
and nest the horizontal inside
lets try to open a pen on codepen
That is basically what I'm doing
ElleryW
@ElleryW
Aug 17 2015 21:11
It definitely isn't pretty, but this is just for a proof of concept before the project starts
Maurizio Casimirri
@mcasimir
Aug 17 2015 21:11
Sure, not a problem
i’m trying to make a generic pen
just 5 mins
ElleryW
@ElleryW
Aug 17 2015 21:13
Okay, no problem. I have other stuff to keep me busy.
I added two scrollables there, but you can only see one.
Maurizio Casimirri
@mcasimir
Aug 17 2015 21:24
k
anyway still consider nothing should move without a scrollable
so you need at least one scroll area
that is ‘global'
this is needed also to make eventual sidebars to work
ElleryW
@ElleryW
Aug 17 2015 21:27
Yes
I just saved the pen after disabling the height 100% so you can see the two scrollables
Both heights are 30% now
Maurizio Casimirri
@mcasimir
Aug 17 2015 21:32
I understand your point still this is not correct
here you have 2 options
if horizontal scrollable has not to scroll with vertical one
then you can both use scrollable-header
ElleryW
@ElleryW
Aug 17 2015 21:33
You mean put the horizontal scroll into the scrollable header for the vertical scroll?
Maurizio Casimirri
@mcasimir
Aug 17 2015 21:33
or just wrap the 2 scrollables in 2 div filling the whole screen
yep!
otherwise
if the horizontal scrollable has to scroll along the vertical one
you should nest the horizontal inside the vertical
ElleryW
@ElleryW
Aug 17 2015 21:34
Would that actually work, putting the vertical scroll into the header?
I'll have to try that tonight
Maurizio Casimirri
@mcasimir
Aug 17 2015 21:34
yes it should
ElleryW
@ElleryW
Aug 17 2015 21:34
Need to finish some other stuff before I leave the office today :(
Maurizio Casimirri
@mcasimir
Aug 17 2015 21:35
ok!
thank you anyway
feel free to write here
ElleryW
@ElleryW
Aug 17 2015 21:36
I will let you know if it works or if it doesn't work.
Where are you from? Italy?