Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrollview won't scroll on touch devices #48

Open
x-0D opened this issue Dec 4, 2023 · 7 comments
Open

Scrollview won't scroll on touch devices #48

x-0D opened this issue Dec 4, 2023 · 7 comments

Comments

@x-0D
Copy link

x-0D commented Dec 4, 2023

I'm trying explore haxeui examples, responsive ui example. It's works OK, but i have some problems with viewing it on mobile. when i try to scroll, it scrolls a bit and then refuses to scroll. you can see transpiled example here: https://haxeresponsiveui.appleroot.repl.co/

Expected Behavior

Scrolling works on touch devices

Current Behavior

It won't work

Possible Solution

Use Native Scrolls instead of custom implementation.

Steps to Reproduce (for bugs)

  1. build this example: https://github.com/haxeui/component-examples/tree/original/responsive
  2. open it on mobile
  3. see bugs with responsive ui, add <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> into head of html file
  4. open it again on mobile, try to scroll.

Media

Test app / minimal test case

<scrollview width="100%" height="100%" contentWidth="100%" style="border-size:0;background-color: white;">
    <vbox id="main" width="100%" style="padding: 5px;">
        <style source="main.css" />
        
        <script>
            main.registerEvent("resize", function() {
                headerLabel.text = "Responsive Example - (" + main.width + "x" + main.height + ")";
            });
        </script>
        
        <box styleName="header" width="100%">
            <label id="headerLabel" text="Responsive Example" verticalAlign="center" />
            <image id="logo" verticalAlign="center" horizontalAlign="right" />
        </box>
        
        <hbox width="100%" continuous="true">
            <vbox styleName="menu">
                <box><label text="Menu Item 1" /></box>
                <box><label text="Menu Item 2" /></box>
                <box><label text="Menu Item 3" /></box>
                <box><label text="Menu Item 4" /></box>
                <box><label text="Menu Item 5" /></box>
            </vbox>
            
            <vbox styleName="content" width="100%">
                <box width="100%">
                    <label id="small" text="size < 500px" />
                    <label id="medium" text="size >= 500px && size <= 800px" />
                    <label id="large" text="size > 800px" />
                    <label id="html5" text="backend: haxeui-html" horizontalAlign="right" />
                    <label id="hxwidgets" text="backend: haxeui-hxwidgets" horizontalAlign="right" />
                </box>

                <vbox width="100%">
                    <hbox width="100%">
                        <button text="Button" width="50%" />
                        <button text="Button" width="50%" />
                    </hbox>
                    <button text="Button" width="100%" />
                    <hbox width="100%">
                        <button text="Button" width="33%" />
                        <button text="Button" width="34%" />
                        <button text="Button" width="33%" />
                    </hbox>
                </vbox>
                
                <label id="lorem1" width="100%" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia, ipsum id egestas pulvinar, ex metus ultricies lacus, vitae blandit urna sapien id ex. Curabitur finibus tempor ex, et pulvinar nunc interdum egestas. Proin dapibus tincidunt massa eget efficitur. Mauris sagittis non ante non rutrum. Sed gravida nunc vel blandit tempor. Curabitur consequat cursus metus malesuada varius. Suspendisse blandit tempor mattis. Duis sed diam sollicitudin ipsum interdum pellentesque." />
                <label id="lorem2" width="100%" text="Proin vitae pharetra sem. Nunc sit amet urna eget sapien molestie rhoncus. Phasellus nec facilisis nibh. Aenean congue, orci ut luctus aliquam, augue ipsum ullamcorper leo, at blandit urna justo id odio. Etiam aliquam, neque pretium euismod pharetra, tortor orci efficitur justo, nec auctor metus orci at lectus. Nam quis fermentum tellus, at tempor eros. Integer faucibus elementum cursus. Aliquam eu lobortis purus. Nullam et elit vitae arcu tempor tristique ut eget metus. Nam sagittis mi eu enim tempus dignissim. Suspendisse id massa sit amet urna sollicitudin cursus. Ut fringilla tortor et elementum ultricies. Donec euismod tortor sit amet porttitor consectetur. Ut non nibh quis ipsum eleifend vulputate. Nunc interdum non enim in efficitur." />
            </vbox>
            
            <vbox styleName="sidebar">
                <box><label text="Side Item 1" /></box>
                <box><label text="Side Item 2" /></box>
                <box><label text="Side Item 3" /></box>
                <box><label text="Side Item 4" /></box>
                <box><label text="Side Item 5" /></box>
            </vbox>
        </hbox>
        
        <box styleName="footer" width="100%">
            <label text="Footer" width="100%" verticalAlign="center" />
        </box>
    </vbox>
</scrollview>

Context

I'm new in haxe and haxeui and discovering it's features, but found bug in relevant example for me

Your Environment

haxeui-core: [1.6.0]
haxeui-hxwidgets: [1.6.0]
hxcpp: [4.3.2]
hxWidgets: [1.11.0]

@ianharrigan
Copy link
Member

Can you use git versions of haxeui-html5 and haxeui-core? Im fairly sure these issues have been fixed for a while there.

@x-0D
Copy link
Author

x-0D commented Dec 5, 2023

I'm switched to git versions of haxeui-html5 and haxeui-core, but problem appears in git versions.

@ianharrigan
Copy link
Member

Hmmm, yeah, i can repro this now... i wonder if this was introduced recently, i thought this was working... ill have to go back through git history and see

@ianharrigan
Copy link
Member

for future me: this is a minimal repro (run in mobile mode): http://haxeui.org/builder/builds/1a77ff80/build/html5/index.html?id=1a77ff80

(http://haxeui.org/builder/?1a77ff80)

@ianharrigan
Copy link
Member

Bit late but, this should be fixed now, Ive also updated the version of haxeui on the haxeui.org server, and the minimal repro seems fine now:

http://haxeui.org/builder/builds/3d241aa3/build/html5/index.html?id=3d241aa3

(http://haxeui.org/builder/?3d241aa3)

@x-0D
Copy link
Author

x-0D commented Dec 26, 2023

@ianharrigan it's not late, with every step, haxeui makes more and more attractive framework to make apps on it. Can you please add <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> into head of html file by default on project generation? It required for make app compatible with mobile viewports. I'll update and test new changes ASAP.

@x-0D
Copy link
Author

x-0D commented Dec 29, 2023

Rebuild project with new libs. Confirmed, bug is fixed now. look here: https://haxeresponsiveui.appleroot.repl.co/

Can we have now truly native scroll? (without transform updating from JS and fixed css height, width params)
should i close this issue and open new feature request?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants