Removing Undesirable "Background"

Jax · November 22, 2022, 10:07am

I’ve been trying to remove the background color of the objects, which are undesirable to me, and which I believe will solve problems like this, where buttons turn white, and remain that way, even after the mouse is moved away.
white1

So far, I managed to remove part of the background from the menu items, but I can’t figure out why I can’t get rid of this border line.
white2a

It was like this before.
white2

I set the color to none, but border color does not remove it, so I figure it’s not the border.

			<style>
				.menu {
					width: 200px;
					height: 24px;
					background-color: none;
					padding-top: 10px;
					borderColor: none;
					border: none;
				}
				.button {
					font-size: 12px;
					color: white;
					background-color: #6fa1fa;
					background-opacity: .5;
				}
			</style>

Can anyone help me with identifying the source of this line, and removing it?
Thanks.

Jax · November 24, 2022, 1:38am

I don’t get this at all.
Trying to trouble shoot this problem, I’m getting some weird results.

Commenting out color: none;, my buttons turn white, padding doesn’t work, so I can’t tell if the line is gone.
white3

Uncommenting color: none;, my buttons are colored, and padding works… and show that annoying white line.
white3a

This is weird.

Jax · November 27, 2022, 3:12am

I just adjusted the marginTop value in the MenuBar.hx file. That way, I didn’t have to use padding.
It’s not the best looking with the menu items surrounded by a white border, but, I’ll live with that for now.
whiteout

ianharrigan · November 28, 2022, 1:23pm

So menus (like all composite components) are built out of other components, that “annoying line” is the menu filler. It basically acts as the “top border”, for simple themes (like default, its literally a line), for other themes it can be more complex. Egs: http://haxeui.org/builder/?bad6f2ac

<vbox style="padding: 5px;" width="100%">
    <style>
        .menubar .button {
            border-color: red;
        }

        .menu .menu-filler {
            background-color: blue;
        }

        .menu {
            border-color: green;
        }
    </style>

    <menubar width="100%">
        <menu text="Menu">
            <menu-item text="Item 1" />
            <menu-item text="Item 2" />
            <menu-item text="Item 3" />
        </menu>
    </menubar>
</vbox>

and an example taken from here: http://haxeui.org/shared/kenney-theme/

At some point the API docs will reflect what sub components a component may contain, but currently they dont, so you best bet to get an idea of how the default theme does things probably by looking in the style sheets: https://github.com/haxeui/haxeui-core/tree/master/haxe/ui/_module/styles/default

Hope that helps!
Ian

Jax · November 28, 2022, 2:13pm

It does look like what I want, Ian. Thanks.

I just don’t know what’s available to me, and what’s not.
I think knowing that would help a lot.
I did not even know .menu .menu-filler existed.
So right now i am feeling my way through.
I guess it’s not easy putting together a documentation that thoroughly covers everything, if you don’t have a large team like Amazon Lumberyard, and Unreal, so I understand.

I was a bit more satisfied with what I got through.
gui

Although, getting rid of the thin white border would make things look better to me.
I’m working on that, but haven’t been able to get rid of it yet.

How would you remove the white border around the items?
…and thanks for responding. I thought everyone had gone on vacation.

ianharrigan · November 28, 2022, 2:18pm

can you paste your current style / xml, or link to the builder? Ill take a look.

Cheers,
Ian

Jax · November 28, 2022, 3:20pm

Here it is.
The results on the builder isn’t actually what I am seeing in my browser.
hxui

Now, against a dark background, I notice it seems it’s only the top border that’s white.

ianharrigan · November 28, 2022, 4:20pm

So, its very had to know what kinda look you were going for, but heres my stab at it:

I basically dumped all your styles and replaced them with:

<style>
    .menubar {
        background-color: #3f3f3f;
        border-color: #303030;
    }

    .menubar .button {
        background-color: none;
        color: white;
        border-color: white;
    }

    .menubar .button:down {
        background-color: #202020;
    }

    .menu {
        border-color: white;
        background-color: #202020;
    }

    .menu-item {
        background-color: #202020;
    }

    .menu-item:hover {
        background-color: #222266;
    }

    .menu-item .label {
        color: white;
    }

    .checkbox, .optionbox {
        color: white;
    }

    .checkbox .checkbox-value, .optionbox .optionbox-value {
        background-color: #303030;
        border-color: #3f3f3f;
    }

</style>

I also removed alot of the properties (colours etc) from the actual components, and just used css. Finally, i remove some of the weird height="5.5%" type things. Not sure what you were trying to do there - i just assumed experimenting

Revised project here: http://haxeui.org/builder/?88e89e15

Cheers,
Ian

PS: i think you are also using a browser extension that is forcing “dark mode”, i think this might be playing havoc with some things also… not sure.

Jax · November 28, 2022, 7:45pm

I do appreciate your efforts Ian. I do, thanks. However, you didn’t hit the target, I’m afraid.
I don’t want the border. I want to get rid of any border or lines around the menu items.

I removed them in your code, but that top border doesn’t go anywhere.
hxui

I want to achieve a look like this.
style

Looking closely at that image, I just thought of something. The border is actually colored. Only not too far from the menu item’s background.

Tried it.

			<style>
                .menubar {
                    background-color: #3f3f3f;
                    border-color: #303030;
                }

                .menubar .button {
                    background-color: none;
                    color: white;
                    border-color: #303030;
                }

                .menubar .button:down {
                    background-color: #202020;
                }

                .menu {
                    border-color: #303030;
                    background-color: #202020;
                }

                .menu-item {
                    background-color: #202020;
                }

                .menu-item:hover {
                    background-color: #222266;
                }

                .menu-item .label {
                    color: white;
                }

                .checkbox, .optionbox {
                    color: white;
                }

                .checkbox .checkbox-value, .optionbox .optionbox-value {
                    background-color: #303030;
                    border-color: #3f3f3f;
                }

			</style>

annoyingLine

That top border line is still there.
Is there no way to remove this line?

ianharrigan · November 28, 2022, 8:25pm

So, you should have been able to go:

.menu .menu-filler {
    display: none;
}

or

.menu .menu-filler {
    hidden: true;
}

but weirdly, for some reason, neither of those worked… looks like a bug of somekind, for now (until i fix it) you can just go:

.menu .menu-filler {
    background-color: #303030;
}

.menu .menu-separator {
    background-color: #303030;
}

http://haxeui.org/builder/?d9aa9d1d

ianharrigan · November 28, 2022, 8:30pm

FYI, i think these filters probably look better than the ones from the default (light) theme:

.menubar {
    filter: drop-shadow(2, 45, #000000, 0.15, 6, 1, 30, 35, false);
}

...

.menu {
    filter: drop-shadow(2, 45, #000000, 0.15, 6, 1, 30, 35, false);
}

http://haxeui.org/builder/?641e0a74

ianharrigan · November 28, 2022, 8:47pm

OK, so it was a bug, which is fixed, so now you can just do something like: http://haxeui.org/builder/?8b538e80 , ie:

.menu .menu-filler {
    display: none;
}

In your case, you probably do still want the filler to be there since you do want the border colour, even if its faint. But anyway, it was a bug, and its working now. (you’ll need git haxeui-core to get the fix)

Cheers,
Ian

Jax · November 28, 2022, 10:48pm

Thanks very much for your help.
So don’t use haxelib install haxeui-core? Or rather, haxe update?
Do I need to clone the repository?

ianharrigan · November 29, 2022, 8:08am

this sort of thing should work:

haxelib git haxeui-core https://github.com/haxeui/haxeui-core
haxelib git haxeui-hxwidgets https://github.com/haxeui/haxeui-hxwidgets
haxelib git hxWidgets https://github.com/haxeui/hxWidgets

Obviously thats for hxwidgets, but the same applies to whatever backend you are using.

Jax · December 2, 2022, 12:31pm

Thanks a lot. It’s working as I wanted.
One more thing. How do I change the color of the scrollbar on the listview so that it coincides with the other colors?

ianharrigan · December 2, 2022, 2:17pm

As i mentioned previously, your best bet (in lieu of proper docs about all a component sub components) is to see how the “default” theme does things, in this case scrollbars.css: haxeui-core/scrollbars.css at master · haxeui/haxeui-core · GitHub

That will give you a better understand of the “parts” of a, for instance, a scrollbar.

Cheers,
Ian

PS: there is a haxe discord (that has a haxeui channel): https://discord.gg/rKDg2auW2c

or there are dedicated haxeui forums: https://community.haxeui.org/

Both / either will likely get you faster responses with more people about who know the answers - just a suggestion