git.iko.soy/typeable/elm-ui
on master help sign in
fix multiline overflow issue
77cde74Matthew Griffith
src/Element/Input.elm+24−8
compare with master
unifiedsplit
@@ -872,7 +872,7 @@ textHelper textInput attrs textOptions =
872 _ ->
872 _ ->
873 Nothing
873 Nothing
874
874
875− heightContent =
875+ heightConstrained =
876 case textInput.type_ of
876 case textInput.type_ of
877 TextInputNode inputType ->
877 TextInputNode inputType ->
878 False
878 False
@@ -882,7 +882,7 @@ textHelper textInput attrs textOptions =
882 |> List.filterMap getHeight
882 |> List.filterMap getHeight
883 |> List.reverse
883 |> List.reverse
884 |> List.head
884 |> List.head
885− |> Maybe.map isShrink
885+ |> Maybe.map isConstrained
886 |> Maybe.withDefault False
886 |> Maybe.withDefault False
887
887
888 parentPadding =
888 parentPadding =
@@ -950,18 +950,16 @@ textHelper textInput attrs textOptions =
950 Internal.element
950 Internal.element
951 Internal.asEl
951 Internal.asEl
952 Internal.div
952 Internal.div
953− ((if heightContent then
953+ ((if heightConstrained then
954− [ Element.width Element.fill
954+ (::) Element.scrollbarY
955− , Internal.htmlClass classes.focusedWithin
956− ]
957
955
958 else
956 else
957+ identity
958+ )
959 [ Element.width Element.fill
959 [ Element.width Element.fill
960 , Internal.htmlClass classes.focusedWithin
960 , Internal.htmlClass classes.focusedWithin
961− , Element.scrollbarY
962 , Internal.htmlClass classes.inputMultilineWrapper
961 , Internal.htmlClass classes.inputMultilineWrapper
963 ]
962 ]
964− )
965 ++ redistributed.parent
963 ++ redistributed.parent
966 )
964 )
967 (Internal.Unkeyed
965 (Internal.Unkeyed
@@ -1190,6 +1188,24 @@ isShrink len =
1190 isShrink l
1188 isShrink l
1191
1189
1192
1190
1191+isConstrained len =
1192+ case len of
1193+ Internal.Content ->
1194+ False
1195+
1196+ Internal.Px _ ->
1197+ True
1198+
1199+ Internal.Fill _ ->
1200+ True
1201+
1202+ Internal.Min _ l ->
1203+ isConstrained l
1204+
1205+ Internal.Max _ l ->
1206+ True
1207+
1208+
1193isPixel len =
1209isPixel len =
1194 case len of
1210 case len of
1195 Internal.Content ->
1211 Internal.Content ->
src/Internal/Style.elm+5−6
@@ -1567,20 +1567,19 @@ baseSheet =
1567 -- Get this.
1567 -- Get this.
1568 -- This allows multiline input to anchor scrolling to the bottom of the node
1568 -- This allows multiline input to anchor scrolling to the bottom of the node
1569 -- when in a scrolling viewport, and the user is adding content.
1569 -- when in a scrolling viewport, and the user is adding content.
1570+ -- however, it only works in chrome. In firefox, it prevents scrolling.
1570 --
1571 --
1571− -- How crazy is this solution?
1572+ -- But how crazy is this solution?
1572 -- [ Prop "display" "flex"
1573 -- [ Prop "display" "flex"
1573 -- , Prop "flex-direction" "column-reverse"
1574 -- , Prop "flex-direction" "column-reverse"
1574 -- ]
1575 -- ]
1576+ [ -- to increase specificity to beat another rule
1575− [ Descriptor "::after"
1577+ Descriptor (dot classes.single)
1576− [ Prop "content" "''"
1577− , Prop "overflow-anchor" "auto"
1578+ [ Prop "flex-basis" "auto" ]
1578− ]
1579 ]
1579 ]
1580 , Descriptor (dot classes.inputMultilineParent)
1580 , Descriptor (dot classes.inputMultilineParent)
1581 [ Prop "white-space" "pre-wrap"
1581 [ Prop "white-space" "pre-wrap"
1582 , Prop "cursor" "text"
1582 , Prop "cursor" "text"
1583− , Prop "overflow-anchor" "none"
1584 , Child (dot classes.inputMultilineFiller)
1583 , Child (dot classes.inputMultilineFiller)
1585 [ Prop "white-space" "pre-wrap"
1584 [ Prop "white-space" "pre-wrap"
1586 , Prop "color" "transparent"
1585 , Prop "color" "transparent"