Flash messages when user has scrolled down

[nomeata]

I like that IHP has this single-page-application feeling, and when the next view is similar to the current, the viewport doesn’t move.

But this is a problem with flash messages, which are visible at the top by default, so the user might get an error message and not even see it.

How do others fix this?

Is there maybe some simple CSS I throw at the problem to make the flash message appear, say, at the bottom of the viewport instead?

[mpscholten]

You could try attaching a js-scroll-into-view to the flash message

[unhammer]

I don't know if this is the best way, but I did this by modifying the cssFramework, e.g. with the default bootstrap

import IHP.FlashMessages.Types
import IHP.View.CSSFramework
import IHP.HSX.QQ (hsx)
import IHP.View.Types

myBootstrap = bootstrap { styledFlashMessage }
  where
    styledFlashMessage _ (SuccessFlashMessage message) = [hsx|<div class="alert alert-success js-scroll-into-view">{message}</div>|]
    styledFlashMessage _ (ErrorFlashMessage message)   = [hsx|<div class="alert alert-danger  js-scroll-into-view">{message}</div>|]

and then in Config.hs

config :: ConfigBuilder
config = do
    option myBootstrap

[mpscholten]

This is a good way to solve this 👍