How to change button layout and position in Threepenny GUI?

Question

How do I change the size and position of buttons or other UI elements in a GUI created with the threepenny-gui package?

The documentation of Graphics.UI.Threepenny.Attributes lists some functions which are probably useful, such as coords :: WriteAttr Element String. However, I don't understand how to use them. Specifically, I don't understand what the String argument is supposed to be.

Thanks

Answer 1

I think my misunderstanding that I had was that my problem was not actually related to threepenny-gui but is instead a question about HTML. This link helped my find the answer I was looking for: https://www.geeksforgeeks.org/html-attributes/

Just in case anyone else is struggling with this as well, this line (mostly) solves it:

# set UI.style [("text-align", "center"),("color","red"),("font-size","30px")]

(The UI in UI.style comes from: import qualified Graphics.UI.Threepenny as UI)

Answer 2

Threepenny UI element combinators translate more or less directly to HTML, and so you should think in terms of HTML when doing layout with it:

• The attributes from Graphics.UI.Threepenny.Attributes you mention are HTML attributes. Modifying them while defining your initial layout is typically done with set. (By the way, if you need a reference for looking up what things like HTML attributes do, you can't do wrong with MDN.)

• For CSS styling, you can use the (#.) combinator.

• As for layout, the basic tools are (#+) to nest HTML elements, and grid, row and column to arrange div-based grids.