git.iko.soy/typeable/elm-ui
on master help sign in
Make sure the textarea doesn't accidently trigger scrollbars
7cedd3aMatthew Griffith
src/Element/Input.elm+70−21
compare with master
unifiedsplit
@@ -856,6 +856,14 @@ textHelper textInput attrs textOptions =
856 _ ->
856 _ ->
857 False
857 False
858
858
859+ getHeight attr =
860+ case attr of
861+ Internal.Height h ->
862+ Just h
863+
864+ _ ->
865+ Nothing
866+
859 isHeightContent attr =
867 isHeightContent attr =
860 case attr of
868 case attr of
861 Internal.Height Internal.Content ->
869 Internal.Height Internal.Content ->
@@ -864,16 +872,18 @@ textHelper textInput attrs textOptions =
864 _ ->
872 _ ->
865 False
873 False
866
874
867− bottomPadding attr =
875+ getPadding attr =
868 case attr of
876 case attr of
869 Internal.StyleClass cls (Internal.PaddingStyle pad t r b l) ->
877 Internal.StyleClass cls (Internal.PaddingStyle pad t r b l) ->
870− Just <|
878+ -- The - 3 is here to prevent accidental triggering of scrollbars
871− Element.paddingEach
879+ -- when things are off by a pixel or two.
872− { top = 0
880+ -- (or at least when the browser *thinks* it's off by a pixel or two)
881+ Just
882+ { top = max 0 (floor (toFloat t - 3))
873− , right = 0
883+ , right = max 0 (floor (toFloat r - 3))
874− , bottom = b
884+ , bottom = max 0 (floor (toFloat b - 3))
875− , left = 0
885+ , left = max 0 (floor (toFloat l - 3))
876− }
886+ }
877
887
878 _ ->
888 _ ->
879 Nothing
889 Nothing
@@ -884,7 +894,24 @@ textHelper textInput attrs textOptions =
884 False
894 False
885
895
886 TextArea ->
896 TextArea ->
897+ withDefaults
898+ |> List.filterMap getHeight
899+ |> List.reverse
900+ |> List.head
901+ |> Maybe.map ((==) Internal.Content)
902+ |> Maybe.withDefault False
903+
904+ parentPadding =
887− List.any isHeightContent withDefaults
905+ withDefaults
906+ |> List.filterMap getPadding
907+ |> List.reverse
908+ |> List.head
909+ |> Maybe.withDefault
910+ { top = 0
911+ , right = 0
912+ , bottom = 0
913+ , left = 0
914+ }
888
915
889 inputElement =
916 inputElement =
890 Internal.element
917 Internal.element
@@ -910,6 +937,9 @@ textHelper textInput attrs textOptions =
910 , Element.height Element.fill
937 , Element.height Element.fill
911 , Internal.htmlClass classes.inputMultiline
938 , Internal.htmlClass classes.inputMultiline
912 , calcMoveToCompensateForPadding withDefaults
939 , calcMoveToCompensateForPadding withDefaults
940+ , Element.paddingEach parentPadding
941+ , Internal.Attr (Html.Attributes.style "margin" (renderBox (negateBox parentPadding)))
942+ , Internal.Attr (Html.Attributes.style "box-sizing" "content-box")
913 ]
943 ]
914 )
944 )
915 ++ [ value textOptions.text
945 ++ [ value textOptions.text
@@ -932,10 +962,17 @@ textHelper textInput attrs textOptions =
932 Internal.element
962 Internal.element
933 Internal.asEl
963 Internal.asEl
934 Internal.div
964 Internal.div
965+ ((if heightContent then
966+ [ Element.width Element.fill
967+ , Internal.htmlClass classes.focusedWithin
968+ ]
969+
970+ else
935− ([ Element.width Element.fill
971+ [ Element.width Element.fill
972+ , Internal.htmlClass classes.focusedWithin
936− , Element.scrollbarY
973+ , Element.scrollbarY
937− , Internal.htmlClass classes.focusedWithin
974+ ]
938− ]
975+ )
939 ++ redistributed.parent
976 ++ redistributed.parent
940 )
977 )
941 (Internal.Unkeyed
978 (Internal.Unkeyed
@@ -946,14 +983,7 @@ textHelper textInput attrs textOptions =
946 :: Element.height Element.fill
983 :: Element.height Element.fill
947 :: Element.inFront inputElement
984 :: Element.inFront inputElement
948 :: Internal.htmlClass classes.inputMultilineParent
985 :: Internal.htmlClass classes.inputMultilineParent
949− :: List.concat
950− [ if heightContent then
951− redistributed.wrapper
986+ :: redistributed.wrapper
952−
953− else
954− redistributed.wrapper
955− ++ List.filterMap bottomPadding redistributed.parent
956− ]
957 )
987 )
958 (Internal.Unkeyed
988 (Internal.Unkeyed
959 (if textOptions.text == "" then
989 (if textOptions.text == "" then
@@ -1009,6 +1039,25 @@ textHelper textInput attrs textOptions =
1009 wrappedInput
1039 wrappedInput
1010
1040
1011
1041
1042+negateBox box =
1043+ { top = negate box.top
1044+ , right = negate box.right
1045+ , bottom = negate box.bottom
1046+ , left = negate box.left
1047+ }
1048+
1049+
1050+renderBox { top, right, bottom, left } =
1051+ String.fromInt top
1052+ ++ "px "
1053+ ++ String.fromInt right
1054+ ++ "px "
1055+ ++ String.fromInt bottom
1056+ ++ "px "
1057+ ++ String.fromInt left
1058+ ++ "px"
1059+
1060+
1012renderPlaceholder (Placeholder placeholderAttrs placeholderEl) forPlaceholder on =
1061renderPlaceholder (Placeholder placeholderAttrs placeholderEl) forPlaceholder on =
1013 Element.el
1062 Element.el
1014 (forPlaceholder
1063 (forPlaceholder