style-elements
style-elements copied to clipboard
mdgriffith
`Input.multiline` fails to fill parent element's height if rendered as HTML5
The big picture of what I'm trying to do
Trying to create a multi-line input that fills the entire width and height of its parent component.
What I did
Added a Input.multiline with [ height (percent 100), width (percent 100) ]:
module Main exposing (main)
import Color
import Element exposing (..)
import Element.Attributes exposing (..)
import Element.Input as Input
import Style exposing (..)
import Style.Color as Color
type Styles
= None
| Green
stylesheet =
styleSheet
[ style None []
, style Green [ Color.background Color.green ]
]
main =
Element.layout stylesheet <|
column None
[ height (px 300), width (px 300) ]
[ Input.multiline Green
[ height (percent 100), width (percent 100) ]
{ onChange = \_ -> ""
, value = "foo\nbar\nbaz"
, label = Input.hiddenLabel ""
, options = []
}
]
What I Expected To Happen
Expected the text area to fill the entire parent component.
What Actually Happened
The text area fills the parent element's entire height only if <!DOCTYPE HTML> is not used.
Here is an ellie with the code (this looks correct since Ellie's HTML does not include <!DOCTYPE HTML>!):
https://ellie-app.com/dMVkrcHxga1/4
Screenshot:
However, if you give the same code to elm-make, the index.html that is produced will display the following:
Removing the first line of the index.html produced by elm-make (<!DOCTYPE HTML>) “fixes” the issue.
Wrapping the Input.multiline in an el does not seem to have an effect.
Versions
- Elm: 0.18
- style-elements: 4.2.0
- Browser: Safari 11.0, Chrome 62.0.3202.75
- Operating System: macOS 10.12.6
@Oustad found out that wrapping the Input.multiline in a fixes the issue too:
Element.layout stylesheet <|
column None
[ height (px 300), width (px 300) ]
[ row None
[ height (percent 100)
, width (percent 100)
]
[ Input.multiline Green
[ height (percent 100), width (percent 100) ]
{ onChange = \_ -> ""
, value = "foo\nbar\nbaz"
, label =
Input.hiddenLabel ""
, options = []
}
]
]
I had the same problem, and wrapping it in a row helped for me too (though for correct behavior I used height fill on the multiline instead of height (percent 100) ).
I would greatly appreciate this working as expected. After all, this library is meant to make very predictable layouts :)
