# Using elm-css with elm-pointer-events

**URL:** <https://discourse.elm-lang.org/t/using-elm-css-with-elm-pointer-events/5617>\
**Category:** Learn\
**Created:** [April 22, 2020, 7:43am UTC](https://discourse.elm-lang.org/t/using-elm-css-with-elm-pointer-events/5617 "2020-04-22T07:43:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Alm\_Martensson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/john_alm_martensson/32/3183_2.png) [@John\_Alm\_Martensson](https://discourse.elm-lang.org/u/John_Alm_Martensson)\
**Post date:** [April 22, 2020, 7:43am UTC](https://discourse.elm-lang.org/t/using-elm-css-with-elm-pointer-events/5617/1 "2020-04-22T07:43:04Z")

</div>

Hi,  
I’m new to Elm and trying to use [elm-css](https://package.elm-lang.org/packages/rtfeldman/elm-css/16.0.1) with [elm-pointer-events](https://package.elm-lang.org/packages/mpizenberg/elm-pointer-events/4.0.2).

But I’m getting the following error:

```
TYPE MISMAT CH - The 1st argument to `p` is not what I expect:

29| [ p
30|#># [Mouse.onClick Click]
31| [text <| Debug.toString event]

This argument is a list of type:

List #(Html.Attribute Msg)#

But `p` needs the 1st argument to be:

List #(Attribute msg)#

```

Any thoughts on how to solve this?

Sourcecode:

```
module Mouse exposing (..)

import Browser
import Html.Events.Extra.Mouse as Mouse
import Html.Styled exposing (..)

-- import Html exposing (..)

main : Program () Msg Msg
main =
    Browser.sandbox
        { init = None
        , view = view
        , update = always
        }

type Msg
    = None
    | Click Mouse.Event

view : Msg -> Html Msg
view event =
    div []
        [ p
            [Mouse.onClick Click] 
            [text <| Debug.toString event]
        ]
```

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [April 22, 2020, 8:27am UTC](https://discourse.elm-lang.org/t/using-elm-css-with-elm-pointer-events/5617/2 "2020-04-22T08:27:27Z")

</div>

Have a look at [Html.Stryled.Attributes.fromUnstyled](https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Html-Styled-Attributes#fromUnstyled).

`Html.Styled.Attribute` from `elm/css` is actually not the same type as `Html.Attribute` from `elm/html` and this function is required to use the later in `elm-css`.

Similarly, this is a little tricky at first with `elm-css`, but `Html.Html` type from `elm/html` is not the same as `Html.Styled.Html` from `elm-css`, and the `Browser.sandbox` `view` function needs the former, hence the `>> Html.Styled.toUnstyled` needed at the top level.

Example: [https://ellie-app.com/8Fz4PKzrjmHa1](https://ellie-app.com/8Fz4PKzrjmHa1)

PS: nice trick with using the `Msg` as the `Model` for a quick debug, a little confusing at first though.

---

<div class="post-metadata">

**Author:** ![John\_Alm\_Martensson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/john_alm_martensson/32/3183_2.png) [@John\_Alm\_Martensson](https://discourse.elm-lang.org/u/John_Alm_Martensson)\
**Post date:** [April 22, 2020, 8:39am UTC](https://discourse.elm-lang.org/t/using-elm-css-with-elm-pointer-events/5617/3 "2020-04-22T08:39:41Z")

</div>

Thanks a lot @dmy !  
The “Attr.fromUnstyled” did the trick.

And I get your comment regarding the model. I just used an example code from elm-pointer-events to get a small and readable example.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [May 2, 2020, 8:39am UTC](https://discourse.elm-lang.org/t/using-elm-css-with-elm-pointer-events/5617/4 "2020-05-02T08:39:48Z")

</div>

Closed on May 2, 2020, 8:39am UTC

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.