Comments (4)
I encountered this similar issue when trying to center an input slider in a column. A simple workaround to center one element in a column is:
E.column
[]
[ ......
, E.el
[ E.htmlAttribute (Html.Attributes.style "marginLeft" "auto")
, E.htmlAttribute (Html.Attributes.style "marginRight" "auto")
]
yourElementHere
, ......
]
Also remember to do
import Element as E
import Html.Attributes
in the header.
I also extracted out a function for centering an element:
center : E.Element msg -> E.Element msg
center element =
E.el
[ E.htmlAttribute (Html.Attributes.style "marginLeft" "auto")
, E.htmlAttribute (Html.Attributes.style "marginRight" "auto")
]
element
so the above example can be simplified as:
E.column
[]
[ ......
, center
yourElementHere
, ......
]
If you have many elements that needs to be centered, I created this helper function:
centerAll : List (E.Element msg) -> List (E.Element msg)
centerAll elements =
List.map
center
elements
Use centerAll
like so:
E.column
[]
( centerAll
[ element1
, element2
, element3
, element4
])
To preserve the spacing of the row/column, you can use centerList
:
centerList : List (E.Element msg) -> List (E.Element msg)
centerList elements =
let
length =
List.length elements
in
List.indexedMap
(\index element ->
if index == 0 then
E.el
[ E.htmlAttribute (Html.Attributes.style "marginLeft" "auto") ]
element
else if index == length - 1 then
E.el
[ E.htmlAttribute (Html.Attributes.style "marginRight" "auto") ]
element
else
element
)
elements
from elm-ui.
#unexpected
from elm-ui.
Bit late to this one, but had the same problem. Found out that the culprit is the CenterX attribute on the element (not the row). Remove that one, and the row will align left. Or wrap it in an Element.el []
from elm-ui.
Another temporary workaround that doesn't require writing and importing css (but might be a bit more hacky) is if you have a Browser.Events.onResize subscription you could do something like
(if m.window.width < 1100 then
column
else
row) [] <| none
from elm-ui.
Related Issues (20)
- Element content not rendered when using Element.scrollbarY inside of an Element.inFront attribute HOT 4
- Some elements don't get style applied HOT 2
- Tooltips? HOT 1
- Element.modular math is wrong (easy fix provided)
- Input.slider doesn't respond to mouseOver HOT 1
- Why are some of the events functions like onMouseCoords not exported?
- Feature request: from Html.Styled HOT 1
- Make text unselectable? HOT 2
- CSP nonce support (to be able to protect against XSS attacks)
- Feature request: batch attributes together HOT 2
- Feature request: add attributes retroactively HOT 1
- Feature request: attribute 'none' HOT 1
- Add a function similar to ZStack in SwiftUI HOT 3
- Canvas inside Element HOT 1
- Below attribute adds a z-index of 20 and thus jumps in front of everything
- Enable custom styling for elements which are both focused and hovered
- Serialize elm-ui to json
- Pseudo-classes are triggered randomly (hover/mouseOver, focus/focused, active/mouseDown) HOT 1
- New Chrome warning: The keyword 'slider-vertical' specified to an 'appearance' property is not standardized. HOT 3
- Element.table rendering time is non-linear in the size of the table data - problems with thousands of rows
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from elm-ui.