Notification Widget with setCanDismiss() setting, Dismiss icon is in middle of Label

[tece321]

SmartClient Version: v12.1p_2021-10-22/PowerEdition Deployment (built 2021-10-22)

This should be easy. What is the control/setting that will ensure that a dismiss icon in a Notification widget is not placed in the middle of the message?

I'm seeing this result:




Using this code:

                 Label warnLabel = new Label();
                    warnLabel.setBackgroundColor("Orange");
                    warnLabel.setBorder("3px solid black");
                    warnLabel.setShowShadow(true);
                    warnLabel.setWrap(false);
                    warnLabel.setAlign(Alignment.CENTER);
                    warnLabel.setMargin(10);

                    NotifySettings warnSettings = new NotifySettings();
                    warnSettings.setCanDismiss(Boolean.TRUE);
                    warnSettings.setPosition(EdgeName.T); // top edge
                    warnSettings.setAppearMethod(NotifyTransition.SLIDE);
                    warnSettings.setDisappearMethod(NotifyTransition.FADE);
                    warnSettings.setMessagePriority(Notify.WARN);
                    warnSettings.setLabelProperties(warnLabel);
                    warnSettings.setAutoFitWidth(true);
                    warnSettings.setDuration(10 * 1000); // 10 seconds

                    Notify.addMessage("Run Loading not completed. No comparison allowed", null, null, warnSettings);

[tece321]

public NotifySettings setMessageControlPadding(java.lang.Integer messageControlPadding) ?

While the animation is in progress, e.g. SLIDE, the dismiss icon appears at the end of the message, to the right side. But once the animation ends the dismiss ICON jumps back into the middle of the notification, just like in the image I posted earlier. This can't be correct...

[Isomorphic]

We see the behavior you reported and are looking into the problem.

[Isomorphic]

Please observe that not all Label properties are supported in NotifySettings.labelProperties, as the message canvii are managed by the notification system. In particular, you should be seeing a warning in the console from setting labelProperties.wrap:false as it's not the recommended approach for what you're trying to achieve. Instead, we recommend setting an autoFitMaxWidth value large enough to cover all the cases you care about - it can be set to "100%" if you like.

That feature was not measuring the border that you specified in labelProperties, so we've just fixed that. It should be in the next nightly builds (dated 2021-11-13). Note however, that setting a margin isn't supported - it would be applied outside the border, and that space, including stacking of messages, is managed by the notification system. If you want to control the spacing between messages, you can set NotifySettings.stackSpacing, or if you want a precise x,y position for the message stack itself, you can set x,y coordinates instead of an edge.

Custom padding also isn't supported through labelProperties, as that would override the CSS. In general, if you want to format the message content, you should just specify the content as HTML. You can put whatever HTML you like as the message content.

So, putting all of that together, as well as dropping some redundant settings, such as the message background color (already orange for warnings), and the appear and disappear methods (your settings are the defaults), we have the following for the code that should work with the fixed nightly builds:

    Label warnLabel = new Label();
    warnLabel.setBorder("3px solid black");
    warnLabel.setShowShadow(true);
    warnLabel.setAlign(Alignment.CENTER);

    NotifySettings warnSettings = new NotifySettings();
    warnSettings.setCanDismiss(Boolean.TRUE);
    warnSettings.setPosition(EdgeName.T); // top edge
    warnSettings.setMessagePriority(Notify.WARN);
    warnSettings.setLabelProperties(warnLabel);
    warnSettings.setAutoFitWidth(true);
    warnSettings.setAutoFitMaxWidth("100%");
    warnSettings.setDuration(10 * 1000); // 10 seconds

    Notify.addMessage("Run Loading not completed. No comparison allowed", null, null, warnSettings);

Note that if you want some of these settings applied to all of your messages, you can just set them via Notify.configureMessages() and then you won't have to pass them to every addMessage() call.

[tece321]

Thanks. Your suggestions seem to work. So much better

Some messages wrap, despite setting

warnSettings.setAutoFitWidth(true);
warnSettings.setAutoFitMaxWidth("100%");

Which is fine, as it does it correctly on word boundaries. But I need to know if that is as expected?

[Isomorphic]

Can you provide us with some examples of it misbehaving? For example, by tweaking the sample code posted in message #4? Please also include your OS and browser versions, and whether your app is calling Canvas.resizeFonts() and/or Canvas.resizeControls().