Some users may have issues creating a community account. For more information, please click here.

joan_mckinley
Active participant

App Portal Catalog Item Alert Box

We are wondering if there is a way to customize the placement of an alert in a catalog item?  We have quite a bit of information in the alert and when it launches (when the user adds the catalog item to the cart), half of the box is cut off.  

The box can be moved, but it isn't a very good user experience.   

I looked in the database tables and the config files but not finding it.

Thanks!

Joan

 

0 Kudos
3 Replies
jdempsey
Moderator Moderator
Moderator

Can you provide a screenshot (even if partially obscured)?  Is it the content that gets truncated within the dialog, or is it the dialog itself that gets cut off on the screen?  This is likely something you could adjust within the style sheets, but it would impact all alert messages, not just one specific catalog item.

Anything expressed here is my own view and not necessarily that of my employer, Flexera. If my reply answers a question you have raised, please click "ACCEPT AS SOLUTION".
0 Kudos

@jdempsey  yes here is a screenshot.  The dialog itself is getting cut off the screen.

Thanks,

Joan

 

0 Kudos

You can try adding something like the following to the Custom.less style sheet located under <AppPortal>\Web\Content.

 

body > div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable { //added //JD - modifies the size and positioning of alert popup dialogs
    //display: block;
    //z-index: 1002;
    //outline: 0px;
    //height: auto;
    max-height: 700px; //added //JD - limits the maximum height of the alert popup
    width: auto !important; //400px; //JD - allows the width of the alert popup to dynamically size based on the text content
    max-width: 1000px; //added //JD - limits the maximum width of the alert popup
    top: 100px !important; //417.5px; //JD - moves the top of the alert popup closer to the top of the window
    left: 100px !important; //<dynamic from code>; //JD - moves the left side of the alert popup closer to the left edge of the window
    overflow-y: auto; //added //JD - adds a vertical scrollbar if the content is too large to fit inside the maximum size alert popup (1000x700px)
}

 

You may need to play with the top, left, max-height, and max-width parameters to suit your liking.  The challenge is that there is no way (that I know of) to automatically center the dialog on your window using style sheets, unless you know the window size is always the same (which you don't have control over) and you hard-code your height and width parameters.  The way the above example is coded, it will dynamically size the box to fit the content, up to 1000x700 pixels, and then if there is overflowing text, it will show a vertical scrollbar to allow you to scroll down within the popup.

Anything expressed here is my own view and not necessarily that of my employer, Flexera. If my reply answers a question you have raised, please click "ACCEPT AS SOLUTION".
0 Kudos