Stack Overflow
Stack Overflow

Questions tagged [elm-ui]

`elm-ui` is a library for layout and interface design for `elm`.

This library is a complete alternative to HTML and CSS. Basically you can just write your app using this library and (mostly) never have to think about HTML and CSS again.

The high level goal of this library is to be a design toolkit that draws inspiration from the domains of design, layout, and typography, as opposed to drawing from the ideas as implemented in CSS and HTML.

elm-ui package

elm-ui github repository

14 questions
9
votes
1 answer

How to display a round image in elm with elm-ui?

I´m playing around with elm-ui and I´m trying to achieve a (in my opinion) easy task but I´m struggling. I would like to display a round image like we all know it from contact forms on iOS or several other platforms. As far as I know there are two…
JakobFerdinand
  • 1,087
  • 7
  • 20
6
votes
1 answer

In elm-ui how do I apply a class or style to an element

If I need to cheat and use a css class for something that is not supported by Elm-UI (backdrop-filter for example) how do I do that. I searched slack and I found htmlAttribute <| Html.Attributes.style "filter" "blur(xyz)", but I don't understand how…
Brock
  • 925
  • 5
  • 9
6
votes
1 answer

How do i animate on mouse over in Elm-UI?

I would like a simple wipe when hovering over a button. I figured out to use mouseOver to change the background on hover, but I am not sure how to create a wipe from one background to another. I am aware of elm-simple-animation, but I am too new to…
Brock
  • 925
  • 5
  • 9
6
votes
2 answers

elm-ui center elements in wrapped row

I'm using Elm with mdgriffiths/elm-ui, and I've really been enjoying it. Right now, I'm trying to create a centered, wrapped row of elements: I can get it to this point: using this code: button : String -> String -> Element Msg button label url = …
Logan Waite
  • 423
  • 5
  • 12
6
votes
2 answers

Blue shadow when I click on button

How do I get rid of the blue shadow around buttons when I click on them? I am building a web app using Elm and mdgriffith/elmui. Picture of button before click: And after click: Elm code: module Main exposing (main) …
8n8
  • 1,233
  • 1
  • 8
  • 21
5
votes
1 answer

How Do I make an Elm-UI element respond to pressing "Enter"

I need to make my app send a message when Enter is pressed. I have an element like: Input.text [] { onChange = UpdateText, text = model.text, placeholder=Nothing } How can I make it submit when enter is pressed? Note: Q/A copied from the Elm-Slack…
Ben
  • 5,952
  • 4
  • 33
  • 44
4
votes
0 answers

Turn on/off mouseOver attribute in elm-ui

I am trying to make a simple game on Elm with elm-ui for my interest, but I stacked how to turn on/off mouseOver attribute. I made a sample code for my explanation: https://ellie-app.com/9rvqJxz4ypga1 In this code, model has only two status…
AnMint
  • 41
  • 3
2
votes
1 answer

How to make text strikethrough when hovered in elm (elm-ui)?

Basically I want to make the text strikethrough when hovered. This doesn't work easily with el [ mouseOver [Font.strike] ] (text "some text") as it would with el [ mouseOver [Background.color someColor] ] (text "some other text") because…
3nt3
  • 321
  • 3
  • 10
1
vote
1 answer

Append elm-ui button to 2nd child of column , type error

Trying to create a simple Point of Sale in elm similar to image below. Click a Product (Input.button, which understand is of type Element msg?) then a record of said button is created in the Order List panel. This is also an Input.button and can be…
eNath
  • 109
  • 5
1
vote
1 answer

Same row height for all table columns using elm-ui

I cannot figure out how to obtain the same row height for every column when using table or indexedTable in elm-ui. Is this possible (without setting a fixed height) or should I resort to implementing my own table with row and column? The following…
Francisco Dibar
  • 353
  • 1
  • 5
1
vote
1 answer

How do I add a Html line break in Elm-Ui?

I an using Elm-UI and I would like add an Html
tag, but I am not sure how. \n doesn't seem to work.
Brock
  • 925
  • 5
  • 9
1
vote
1 answer

Modal in Elm without framework

I am new to ELM and I want to create a modal without the use of any libraries such as Bootstrap or ELM-UI. I found this simple example online which is also using JSON Decode. Is there a possibility to have the modal work simply without any…
EverydayDeveloper
  • 1,110
  • 4
  • 11
  • 34
0
votes
0 answers

Content-Security-Policy violation with style-src 'self', but no inline styles

Why do I get a Content-Security-Policy violation on style-src 'self' when there are no inline styles? I have a server in Go, and a web app in Elm. Here is a minimal example: Server (Go 1.12): package main import ( "fmt" "io" …
8n8
  • 1,233
  • 1
  • 8
  • 21
0
votes
0 answers

Trigger LinkClicked when button is pressed

I'm building an Elm application and am trying to add navigation as per the manual. I've added the required handling of LinkClicked and UrlChanged and they work fine for href, but they don't work for buttons that lead to different pages. For example,…
noamt
  • 7,397
  • 2
  • 37
  • 59