pythoncsspanelholoviz

Holoviz panel notification width

Holoviz panel notification width is too small for more than a few words so my messages get cut.

Can I wrap text and/or increase default width to e.g. 600 px?

What I tested so far:

In https://panel.holoviz.org/reference/global/Notifications.html I don't see any direct parameter to change.

From https://panel.holoviz.org/how_to/layout/size.html I get that I can change size of a component with width=600, but notifications are under pn.state and not pn directly so this does not work.

I tried with CSS but I am bad at CSS and did not succeed (most probably because I did it wrong, maybe as it's not doable ?!):

import panel as pn
pn.extension(
    notifications=True,
    raw_css=[ """
/* increase notifications width and force wrapping */
.bk-notification {
  max-width: 720px !important;   /* desired width */
  width: 720px !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
""" ]
pn.state.notifications.success("...or not...")
Solution

  • Partial victory ! 😅

    With the kind help of @furas (🙏, see his comments on question) :

    problem with large notification

    I added this not directly in pn.extension, but after it as:

    pn.config.raw_css.append("""
/* Toast text */
.notyf__message {
  white-space: normal !important;       /* allows line break */
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  text-align: right !important;
}
""")

    Note : !important seems required so that styling is effectively applied.

    [Edit] More about wider notifications

    As pointed by @furas, we can increase width but this also need background color adjustement (ideally for each type of notification... for now I put only gray for all).

    pn.config.raw_css.append("""
.notyf__toast {  /* notfy__toast of notfy__message works*/
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  text-align: right !important;
  min-width: 800px !important;
  background-color: #bbb !important; /*gray*/
}
""")

    large notification with gray background

    [Edit 2] Complete victory : wider notifications, working ✅

    Based on @furas advice to work on animation, I edited the ripple parameters as such:

    pn.config.raw_css.append("""
.notyf__ripple {
  width: 150% !important;
  height: 200% !important;
  border-radius: 0% !important;
}
""")

    I also deactivated background-color in notyf__toast as it was not needed anymore.

    The ripple is active and final state is OK :

    large notification ok