Not able to associate CSS with the xml components

Questions
1

I want to use styles from within the xml and outside css file. But it does not seem to work
application.xml has got this tag
<assets path="assets/styles" rename="styles" />

And in Main.hx I have got this line:

Toolkit.styleSheet.parse("./assets/my.css");


<?xml version="1.0" encoding="utf-8" ?>
 <style>
 .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: 5px solid ;
    padding:5px;
    justify-content:space-evenly
  }
 </style>

<hbox styleName="container"   id="hbox3"   width="100%" continuous="true">
    <vbox  width="20%" height="125" style="background-color: red;border:1px solid red;background-opacity: .3" >
    <box width="90%" height="100%" style="background-color: black;border:1px solid red;background-opacity: .3" />
    </vbox>
    <vbox width="50%" height="125" style="background-color: green;border:1px solid green;background-opacity: .3" >

    </vbox>
    <vbox width="30%" height="125" style="background-color: blue;border:1px solid blue;background-opacity: .3" />

</hbox>
2

Hi! :wave:

So Toolkit.styleSheet.parse takes actual css, ie, the contents of your css file, its mainly used to insert “bits of css” in code. What i think you want is to setup a module.xml and use styles there, you can read more about them here: https://github.com/haxeui/haxeui-guides/blob/master/001-Guides/000-Modules.md#themes - let me know if something isnt clear.

That all said, i wonder if a Toolkit.styleSheet.parseFromResource(...) might be a nice addition.

Cheers,
Ian

3

Ok. Thanks for the guide. The styles seem to work now.

I am trying to create a responsive layout. It works using html. But how to make it work using HaxeUI? In this case, how can I make the blocks one above another when screen size is small in width?

<?xml version="1.0" encoding="utf-8" ?>
<hbox width="100%">
	<style>
    .container {
    display: flex;
    flex-wrap: wrap;
  } 
  .block {
    width: 30%;  
    height: 100px;  
    margin: 10px;
  }

  @media screen and (max-width: 768px) {
    .block {
      width: 90%;  
    }
  }
	</style>

  <box width="100%" id="box1" height="130" styleName="container" style="border: 1px solid $normal-border-color;padding: 5px;">
        <box  styleName="block" width="30%" height="25" style="background-color: red;border:1px solid red;background-opacity: .3" />
        <box  styleName="block" width="30%" height="25" style="background-color: red;border:1px solid red;background-opacity: .3" horizontalAlign="center" />
        <box  styleName="block"  width="30%" height="25" style="background-color: red;border:1px solid red;background-opacity: .3" horizontalAlign="right" />
  </box>

</hbox>
4

So, first thing i want to mention is that haxeui css != w3c css… haxeui is quite specialized for haxeui, and therefore loads (and loads) of things are missing (and haxeui css has quite a few things that arent in “normal” css). One example of such a thing is flexbox. That doesnt exist in haxeui css (at all).

One example, i think, of what you are trying to do could be: http://haxeui.org/builder/?3947bb5d

<vbox style="padding: 5px;" width="100%" height="100%">
    <label id="size" />
    <style>
        #container1 {
            background-color: red;
            layout: horizontal;
        }

        @media (max-width: 600px) {
            #container1 {
                background-color: blue;
                layout: vertical;
            }
        }
    </style>

    <box id="container1" width="100%" height="100%" style="padding:10px;spacing:10px;">
        <box width="100%" height="100%" style="background-color: yellow" />
        <box width="100%" height="100%" style="background-color: yellow" />
        <box width="100%" height="100%" style="background-color: yellow" />
        <box width="100%" height="100%" style="background-color: yellow" />
        <box width="100%" height="100%" style="background-color: yellow" />
        <box width="100%" height="100%" style="background-color: yellow" />
        <box width="100%" height="100%" style="background-color: yellow" />
        <box width="100%" height="100%" style="background-color: yellow" />
        <box width="100%" height="100%" style="background-color: yellow" />
        <box width="100%" height="100%" style="background-color: yellow" />
        <box width="100%" height="100%" style="background-color: yellow" />
        <box width="100%" height="100%" style="background-color: yellow" />
    </box>
</vbox>

It might not be exactly what you are after, and haxeui responsivity certainly needs a little (a lot?) of work. But hopefully that helps somewhat

Cheers,
Ian

5

Thanks.
The code you shared works fine on the Haxeui builder link.
But when I test on my localserver it just shows a single yellow block with red border.
Even when I made width=10% , it only shows a single yellow block.

6

Are you using git haxeui-core + your backend? Though i wouldnt have thought it would have made a difference. Also, what backend are you using?

Finally, if git version doesnt fix it, any chance you can share a minimal example i could check out?

Cheers,
Ian

7

Backend is html5. I installed haxeui via haxelib

Installed:
haxe-ui-core 1.6
haxe-ui-html5 1.6

8

Seems ok this end:

responsive-test

You might want to update haxeui-core and haxeui-openfl & haxeui-html5 to git versions (both worked fine, but the originals included in the zip didnt).

Im aiming to get a 1.7.0 release out soon(ish)

Cheers,
Ian

1 Like
9

Ok. Thanks.
Seems to be working with the git version.

1 Like
10

In the above code using the layout attribute along with media-query did work on the browser test, ie simply by changing the browser window width by dragging.
But it seems to fail on the mobile device. There is a way out with css that heavily relies on css’ flex.

Since haxeui does not use flex, is their any solution for this?

How to force blocks to stack when the width is narrow?

11

Please ignore above post. It is working on mobile too after I added this meta tag to index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

1 Like
12

Interesting… i wonder if haxeui should be adding this somewhere… :thinking: