Checkbox with no check mark

[YTN0]

Am testing out my RmlUi integration and whilst I can successfully render a textbox (with the text working), I am having a problem getting a checkbox to work.

Firstly, I discovered the hard way that if you don't specify the stylesheet info for borders etc, then you don't see anything. It would be great if there was a default stylesheet that rendered the basics for these components.

Once I figured that out, I can get a checkbox outline to render, but it doesn't display any checkmark, even though I have the "checked" option enabled.

Is the checkmark obtained from the font? If so, how do we know if a font supports it, and is there a default font we should be using to get any of the basics for the components to render correctly (like the checkmark)?

On a slightly separate note, I also tried out a textarea, but it only rendered 1 line (i.e. 1 row) even though I had cols and rows set... I'll tackle that once I get the checkboxes working, but if you had any suggestions there, that would be great.

Thanks!

[YTN0]

From looking at the samples, it looks like the checkbox UI is driven from a spritesheet using decorators.

If I want to do something basic with a border and using a checkmark from a font, how would I go about doing that? Can a decorator use a font character / image?

[mikke89]

Yeah, this is quite fundamental to the library: There are no default styles, and this includes for any built-in RML elements. So by default they won't really show much.

With that said, everything within the library is made to be fully customizable in terms of styling. It takes some more effort but enables you to make creative and unique impressions.

Decorators are the work-horse for the styling indeed. And yes, you can certainly use images directly in decorators. Not fonts though, you would have to copy desired characters into a separate bitmap, or make your own decorator to handle this.

If desired, you can get quite far in terms of styling purely in RCSS, without any images. You may want to take at the styles for the included VisualTests, there are several input elements styled there-in purely with RCSS. The trick is some creative use of borders, padding, and backgrounds, possibly combined with border-radius.

The documentation is your friend. Make sure to take a look at the style guide, the built-in decorators, as well as looking up individual elements. If you have suggestions for improvements, pull requests are very much appreciated.

[mikke89]

Yeah, that's a nice idea, thanks for the suggestion.

[mikke89]

I'm not sure this will work, but I had an idea for something like this. Try creating an element within the input element that you only display when it is checked, via the pseudo selector and display property. Then you could in principle use any text/font characters to show the (un)checked state. I'm not sure if the inner element is actually rendered though, it depends on the element itself. But something worth trying out.

[YTN0]

Will give that a try!

[mikke89]

It would be great to have a decorator that can pull from a font though, especially with fonts like font awesome which are made up of just icons.

An update on this one. I just now added the text decorator for exactly this purpose: 66d0b7c

decorator: text("Hello 🌎 world!" blue bottom right);

[YTN0]

That's Awesome (non pun intended)! I was just this week looking at Font Awesome for some icons. I'll give this a try.

Really appreciate you digging into a solution for this!