`Input.multiline` fails to fill parent element's height if rendered as HTML5

ehamberg commented 7 years ago

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:

screen shot 2017-10-31 at 10 17 01

However, if you give the same code to elm-make, the index.html that is produced will display the following:

screen shot 2017-10-31 at 10 16 43

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

ehamberg commented 7 years ago

@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 = []
                    }
                ]
            ]

peacememories commented 6 years ago

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 :)

mdgriffith / style-elements