Currently, the following styles my be in the .html file in order for the UI to work correctly:

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Arial';
    font-size: 13px;
    margin: 0;
    width: 100%;
    height: 100%;
}

Expected Behavior

This should happen automatically (not the exact styles, investigation needs to go into which are the minimum / best ones)

Current Behavior

If you dont include these styles then measurement issues arise, which usually, means you dont end up with a visible UI

Possible Solution

A configurable flag somewhere in the backend (defaults to true) that add the most important of these properties automatically.

Expected Behavior

simple page with one ListView

Current Behavior

blank page

Test app / minimal test case

sample

Your Environment

Linux Mint 18.1 x64
Haxe 3.4.0
haxeui-core from git
haxeui-html5 from git
Firefox 51.0.1

Thanks.

If you try to build the default httml5 project

haxe html5.hxml

/home/pi/Sten/plaf/haxe/lib/haxeui-html5/1,2,0/haxe/ui/backend/ComponentImpl.hx:517: characters 12-39 : js.html.CSSStyleDeclaration has no field pointerEvents

Possible Solution

I commented the line and it worked
So just compile the line only on haxe > 4

What I am looking for is the ability to autoheight a textfield with wordwrap. I dont think we can use the input field for the textfield since this doesnt wordwap

Editable DIV looks best?
http://jsfiddle.net/ARuce/

TextArea
https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length

Assigning string that contains < or other html special symbols as button text results in < being displayed.

Expected Behavior

Any string can be assigned as button label.

Current Behavior

Label string gets excessively escaped resulting in escape sequence being displayed as label instead of intended text.

Possible Solution

Steps to Reproduce (for bugs)

Run test app described bellow.

Media

Test app / minimal test case

package ;

import haxe.ui.HaxeUIApp;
import haxe.ui.core.Component;
import haxe.ui.components.Button;
import haxe.ui.containers.VBox;
import haxe.ui.macros.ComponentMacros;

class Main {
    public static function main() {
        var app = new HaxeUIApp();
        app.ready(function() {
                var main:Component = new VBox();
                app.addComponent(main);
                var button = new Button();
                button.text = "<";
                main.addComponent(button);

                app.start();
        });
    }
}

Context

Your Environment

• Version used:

haxeui-core: [1.0.5]
haxeui-html5: [1.0.1]

• Environment name and version : Mozilla Firefox 70.0.1, Chromium 78.0.3904.97
• Operating System and version (desktop or mobile): Arch Linux
• Link to your project:

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]

• Version used: haxeui-html5: [1.6.0] haxeui-core: [1.6.0]
• Environment name and version (e.g. Chrome 39, node.js 5.4): Chrome 119.0.6045.199
• Operating System and version (desktop or mobile): Desktop Chrome in touch mode, Mobile Chrome
• Link to your project: https://github.com/haxeui/component-examples/tree/original/responsive

Just copying it over here from discord

http://haxeui.org/builder/?9042621c

Current Behavior

Scrollbar doesn't appear.

Steps to Reproduce (for bugs)

<vbox style="padding: 5px;">
<textarea width="450" height="300" text="l0\nl1\nl2\nl3\nl4\nl5\nl6\nl7\nl8\nl9\nl10\nl11\nl12\nl13\nl14\nl15" />
<textarea width="450" height="320" text="l0\nl1\nl2\nl3\nl4\nl5\nl6\nl7\nl8\nl9\nl10\nl11\nl12\nl13\nl14\nl15" />
<!-- \nl16 addeed -->
<textarea width="450" height="320" text="l0\nl1\nl2\nl3\nl4\nl5\nl6\nl7\nl8\nl9\nl10\nl11\nl12\nl13\nl14\nl15\nl16" />
</vbox>

Your Environment

Bug appears in the builder.

When trying to add components by using the .element property and appending them to an existing <div/> the components are never considered "ready" and therefore never resize, or show correctly.

Expected Behavior

Should be able to add a UI anywhere in the DOM tree and it all work as expected.

Test app / minimal test case

class Main {
	static public function main() {
		haxe.ui.Toolkit.init();

		var main = new VBox();

		var button1 = new Button();
		button1.text = "Button 1";
		main.addComponent(button1);

		var button2 = new Button();
		button2.text = "Button 2";
		main.addComponent(button2);

		js.Browser.document.getElementById("content").appendChild(main.element);
	}
}

I have a series of textareas inside a scrollable container. The scrollbars are visible because the textarea are larger than the scroll area. You cant enter text. This appear to be a HTML target only issue

textTest.zip

Expected Behavior

Must be added the new line after key "Enter" was pressed.

Current Behavior

Will add a whitespace instead of new line.
--upd:
also if I try to paste text with several lines:

asdasd
asdas
asd

then it will be displayed as asdasd asdas asd

Test app / minimal test case

Sample available here.

Your Environment

Haxe 3.4.2-1
Linux Mint 18.1 x64
Firefox 52.0.1
haxeui-core from git
haxeui-openfl from git

Thanks.

In other targets an empty textfield has a height.

Expected Behavior

I would expect that the textfield height we be the same as a single line of text, if no height is provided

Current Behavior

the tetfield height is very small

Media

Test app / minimal test case

Small.zip

Expected Behavior

simple page with one DropDown. menu must be displayed after DropDown clicked

Current Behavior

menu was displayed out of page

Test app / minimal test case

sample

Your Environment

Linux Mint 18.1 x64
Haxe 3.4.0
haxeui-core from git
haxeui-html5 from git
Firefox 51.0.1

Thanks.

Expected Behavior

application with button

Current Behavior

exception:

$ haxe build.hxml
/home/username/.haxelib_repo/haxeui-html5/git/haxe/ui/backend/html5/native/size/TextSize.hx:7: lines 7-9 : Missing super constructor call
/home/username/.haxelib_repo/haxeui-html5/git/haxe/ui/backend/html5/native/size/ComponentSize.hx:8: lines 8-10 : Missing super constructor call
/home/username/.haxelib_repo/haxeui-html5/git/haxe/ui/backend/html5/native/size/ElementSize.hx:9: lines 9-11 : Missing super constructor call
/home/username/.haxelib_repo/haxeui-html5/git/haxe/ui/backend/html5/native/size/ButtonSize.hx:9: lines 9-11 : Missing super constructor call

Test app / minimal test case

UI.xml:

<?xml version="1.0" encoding="utf-8"?>
<button text="click me!"/>

Main.hx

import haxe.ui.Toolkit;
import haxe.ui.core.Screen;
import haxe.ui.core.Component;
import haxe.ui.macros.ComponentMacros;

class Main {
	public static function main() {
		Toolkit.init();
		
		var ui:Component = ComponentMacros.buildComponent("Assets/Xml/UI.xml");
		Screen.instance.addComponent(ui);
	}
}

build.hxml:

-cp Source
-main Main.hx

-lib haxeui-core
-lib haxeui-html5
-lib hscript

-js Export/Html5/Main.js

Button.zip

Your Environment

Haxe 3.4.0
haxeui-core from git
haxeui-html5 from git

Thanks.

"WARNING: no class found for component" occurs when ComponentMacros.buildComponent is called outside of the static calls

Expected Behavior

I expected the Macro to run wherever it is called?

Steps to Reproduce (for bugs)

1. on the Main class of the application call new Main()
2. in the new function call ComponentMacros.buildComponent

Test app / minimal test case

Small.zip

Your Environment

This appeared to work in flash (maybe CPP) but did not work in HTML5

Currently when the text is changed to a longer string then the button doesnt automatically resize to accomodate the new string.

Expected Behavior

The button should resize and thus force a relayout of parent layouts

Test app / minimal test case

<vbox>
    <script>
    function test() {
        button.text = "This text should make the button grow";
    }
    </script>    
    <button id="button" text="Test" onclick="test()" />
</vbox>

Example of a button that didnt "grow" correctly:

This is a custom component.

<hbox id="hboxRight"> 
        <checkbox native="true" selected="true"/>
        <label text="Native checkbox" style="margin-left:-6px; margin-top:2px; "/>        
</hbox>

Expected Behavior

No error.

Current Behavior

Throws an Uncaught TypeError: Cannot read property 'addClass' of null onMouseOver.
Throws an Uncaught TypeError: Cannot read property 'removeClass' of null onMouseOut.

Steps to Reproduce (for bugs)

Edit: Add -debug flag and rebuild the project using build-html5.hxml.
Go bin directory and open the index.html, activate devtools then move your mouse pointer over the checkbox.

Test app / minimal test case

Here is the example project to reproduce the error:
HaxeUI.zip

Your Environment

• Version used: Latest git.
• Environment name and version Chrome 62.0.3202.89
• Operating System and version (desktop or mobile): MacOS 10.12.4

Screenshot:

This probably also affects other haxeui repos.

Cheers, azrafe7

1. The header "Column C" is slightly taller than A & B? Not sure why but it is in html only raylib was fine.

2. The second and third columns are offset to the left. Clicking the header fixes it? raylib was fine.

Simplified.zip

The html5 target is different from nme and kha for the attached project. With regards to the left column:

1. It appears the label fields height is 100%? If you open the browser tools you can find that the buttons are off the bottom in html.
2. If you remove the label then the buttons gets stretched to 100% height

NME

html5

Also you will notice the textarea has scrollbars (sorta) in html5

Project files
UnitTestGui.zip

Hello!
Check the following screencast:

I've noticed an issue when using Splitters to shrink a ListView that resizes together with the shrinking container. Once you shrink it to the smallest size possible, the browser tab hangs forcing you to close the unresponsive tab.

Reproduction on the Playground (move the splitter all the way to the right)

This issue persists on Chrome, Edge, and FireFox. Seems like an infinite loop or recursion occurs during resizing.

Pasting in the code bellow:

<vbox style="padding: 5px;" width="100%" height="100%">
    <splitter direction="horizontal" width="100%" height="100%">
        <box width="75%" height="100%">
        </box>
        <box width="25%" height="100%">
            <listview id="lv1" width="100%" height="100%">
                <data>
                    <item text="List item 1" />
                    <item text="List item 2" />
                    <item text="List item 3" />
                    <item text="List item 4" />
                    <item text="List item 5" />
                </data>
            </listview>
        </box>
    </splitter>
</vbox>

Hi,

I see no other way of contacting you guys then by submitting an issue. I am using https://github.com/haxeui/haxeui-html5/blob/master/haxe/ui/backend/html5/util/FontDetect.hx for quite a while to detect if fonts are loaded. But now I saw this piece of code or the package in which it is included has no license. Could you add a license please? I saw the haxeui-core package had the MIT license.

Kind regards,
Jelle Bakker