This is going to be a bit hard to explain but ill do my best. I'm working on an ionic project, i have on the home screen several horizontal scrolling divs, and whole view is vertically scrollable. The problem is if i drag the screen, and start initially dragging from the items in the horizontal list, i cant vertically drag the whole view, which makes sense, cause the horizontal list has only the ionic scroll direction set to x.
But I want to mimic the effect on the facebook timeline, where there are the suggested apps ads, you can horizontally scroll through them, however if u dragged vertically u will scroll the whole timeline as normal.
Related
I am coding a website with Flutter. My layout uses "blocks" of vertical content laid within a SingleChildScrollView. They look like rectangles of content (with images, text, buttons, etc in them), taking up the whole screen horizontally, and the whole screen vertically.
Currently, whenever I move the screen size around (drag the web window to be different sizes) the website breaks. If I move it to be really small horizontally, I cannot fit in the content I need, if I move it to be small vertically I get overflow errors (and vice versa). This is because I am using MediaQuery.of(context).size.height/width to layout my website.
My rectangular blocks of "content" all have their same respective parent: Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height) so they completely adjust everytime I move the window. Is there a better way to implement responsive web? Would it be better to just specify (for example) 620 pixels height for the Container and double.infinity for the width? And then somehow make everything fit inside not overflow/look weird? Also, when I drag the bottom of the web window nothing expands/grows properly because at that same time all my "content blocks" are all resizing their height because I am technically resizing the screen.
Finally, I've tried using BoxConstraints's minHeight, maxHeight, minWidth, and maxWidth, yet they don't seem to work and still produce the yellow/black overflow lines when testing in a webview. Huh?
Also, how would I get a bottom scrollbar to appear horizontally once my webview window is fully dragged close horizontally and half my content is cut off, but I still would like to see it. Would this be necessary? Or would another solution not need this? I'm not sure...
How are other people working around this and achieving this? I feel like I am doing this completely wrong. It shouldn't be this difficult.
(Also, using LayoutBuilder I have 2 additional builds for mobile/tablet when the screen width reaches less than 1100px)
I'm creating a scroll view that pads that center item with some extra space vertically. I want to accomplish two things:
1- Shrink the center item's padding at the same rate the user is moving his finger. For example, if the padding of the center item is 50 pixels and the user moved his finger for 10 pixels then I would like to decrement the padding to 40.
2- I would like to stop the list view from actually scrolling until the padding for the center item is 0. The list view should scroll as normal once the center item's padding is 0.
I'm a little lost here. I've been trying playing around with implementing my own ScrollController and ScrollPhysics but I haven't been able to achieve exactly what I'm looking for. I also saw that there was a class in Flutter called ScrollPosition that controls the position for each scrolling widget but I haven't been able to figure out how to use these to accomplish the behavior I'm looking for.
Could someone point me in the right direction?
Change the physics property of the ListView, NeverScrollablePhysics() doesn't allow scrolling.
Maybe use a GestureDetector for detecting the swipes.
Be careful of the placement of this widget though.
It can interfere with the normal scrolling of the listView.
Try experimenting with the animationController instead of calling setState() multiple times,
it's wasteful to refresh the screen multiple times just to change the padding.
My app has a master-detail structure, where the user can tap on a master item to go to the detail view and then swipe left or right to navigate to other details items.
I'm using on-swipe-left and on-swipe-right to let users swipe between the detail views, however, when the user swipes, there is no visual feedback that there is a swipe happening. Only after the user has fully swiped does anything happen. I thought I could use the slide box, because the slidebox does provide visual feedback as soon as you start swiping, however, my views have vertical scroll and that conflicts with the left and right swipe actions due to the swipe sensitivity. In other words, when the user touches the screen to begin scrolling down, the swipe action takes over and it tries to swipe left or right instead of scrolling down.
So, what are my options? Is there any way I can provide some kind of an animation with on-swipe-left and on-swipe-right so that there is some kind of visual feedback (may be an ink trail on the screen) I can show the user? Or is there any way I can make the slidebox approach work so that the horizontal swipe and vertical scroll can function harmoniously? I have seen other apps that have scroll and swipe functions working harmoniously--gmail and pinterest are examples. Just not able to get it working with ionic.
Or is there another UI pattern that I am not thinking of? Worst case, I could provide buttons for next and previous, but this is a mobile app, so I really shouldn't have to resort to that.
Thanks!
I'm using LWUIT FileTree in my File browser but on touch screen mobile the tree doesn't scroll .It only scrolls if I use the navigation keys.How to make it scroll using touch?
I just tried this in Codename One and it worked just fine. I don't think we made any major changes in this area. My only guess is that you might have mutated the tree outside of the EDT or placed it within a scrollable container that isn't appropriate for scrolling. E.g. border layout.
Make sure you place the tree in the center area of the border layout and set the form to scrollable false.
I have an image that is 320x480 and upon orientation change this image obviously hangs out of view. There are some images where the focal point of it sits with it's bottom cut off (which isn't undesirable). My issue however is when the user pans vertically to see the full image, the view appears to snap to the bottom meaning the top of the focal point is cutoff. What I wish to happen is that the users can "free-scroll" through the image and perhaps move the images so the focal point is centre screen, instead of cutting off the top and bottom. I understand this is a difficult concept to describe in words so I've attached some images below.
This is how it starts:
This is where it snaps to the bottom:
This is the kind of view I wish to have but cannot:
Is there a way to control this "snapping" or perhaps a method I could use to override it when dealing specifically with this kind of orientation? My issue is that i WANT it to snap when panning left/right onto the other images in the ScrollView, just not up/down.
EDIT:
pagingEnabled is the property that controls this snapping, but is there anyway to detect if the movement is Up/Down or Left/Right and disable or enable this property in each occasion?
Cheers for any help you can offer
You can try using two nested scroll views; one is limited to scrolling horizontally with paging enabled, and one (or one for each page if you're displaying several images?) limited to scrolling vertically with paging disabled. By default this will work like you said, paging/snapping horizontally but free scroll vertically. However, it will only let you scroll in one direction at a time (either horizontally or vertically, not diagonally).
If you want to use nested scroll views like this but you'd like to allow scrolling/dragging in both directions simultaneously, take a look at my solution for this: Nested UIScrollViews scrolling simultaneously