Splash widget size settings are ignored

04-29-2019 03:39 AM
New Contributor III

I'm simply configuring the out of box splash screen widget.  No matter which size setting I use -- percentage or custom pixel settings - the splash screen shows up at 100%.  It covers the entire app. How do I fix this?  [Am not a first time users.  I've built a dozen or so apps.  Have googled around for similar instances and a solution but found nothing. )   Thanks.

Tags (2)
0 Kudos
5 Replies
MVP Emeritus


    The splash widgets settings allows you to adjust the splash widgets pane size, but there is always a overlay div that is 100% of the apps height and width to prevent user interaction with the app until the widget is acknowledged/closed.

.jimu-widget-splash .overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0,0,0,0.5);
0 Kudos
New Contributor III

I have this same issue - does anyone know of a solution?  Just to clarify, the actual splash screen (the bit with text and confirmation button) covers the entire screen, not just the faded background that prevents interaction with the map.  This seems to be the case when viewed in Chrome, although Edge displays the splash screen as expected (see attached).

0 Kudos
New Contributor II

Colin -

Did you ever find a solution to this problem? I am currently having the same issue and would like to solve before deployment to end users. However, this is the only thing information I can find on this issue.



0 Kudos
New Contributor III

Hi Molly,

Unfortunately I haven't yet found a solution in Web App Builder, but I've found an alternative route that I might go down. It looks like it's fairly easy to create a splash window in Experience Builder, so I'm thinking I might create a very simple Web Experience (essentially a single page with my existing Web App embedded in it) and then put a splash screen on top of it.  It's not as neat as having it done in one app and may not work in every circumstance, but I don't think my users will notice a bit.  I should say that I haven't actually got around to doing it yet, but from the webpage below it definitely sounds possible.




0 Kudos
Occasional Contributor

I can provide clues about what causes this to happen, but I haven't found a solution yet. It has to do with font scaling that takes place outside of AGOL. The two common causes are that the browser zoom level is not default and that the Windows "Scale and layout" display setting is not set to 100%. Laptops are often affected by the latter, as Windows defaults to scaling by 125% or 150%. Browser scaling is typically triggered by the user, either intentionally (to make small text easier to read) or accidentally (there are keyboard shortcuts that can do this--Ctrl-+, Ctrl--, and Ctrl-0). When you set scaling to 100% in both of these environments, the splash widget will likely behave as configured.

0 Kudos