topic Re: Splash Widget in Web AppBuilder Custom Widgets Questions

Splash Widget

LefterisKoumis — Wed, 07 Oct 2015 20:23:15 GMT

How can you change the size of the splash screen? Modifying the css file or the json did not help. My app is to be used as a desktop app, so I don't worry about how it will look in a mobile environment.

Thanks.

Re: Splash Widget

RickeyFight — Wed, 07 Oct 2015 20:29:32 GMT

Lefteris,

In the widgets/splash/css/style.css

.jimu-widget-splash-desktop .splash-container{

Controls the splash widget width.

Re: Splash Widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:48:31 GMT

Lefteris,

The height and width of the splash is set by code in the Widget.js in the _changeStatus function (line 16 and 19):

and a max-width and max-height is set in the css

.jimu-widget-splash-desktop .envelope{
  max-height: 500px;
  max-width: 640px;
}

      _changeStatus: function() {
        if (isFullWindow()) {
          html.addClass(this.domNode, 'jimu-widget-splash-mobile');
          html.removeClass(this.domNode, 'jimu-widget-splash-desktop');
        } else {
          html.addClass(this.domNode, 'jimu-widget-splash-desktop');
          html.removeClass(this.domNode, 'jimu-widget-splash-mobile');
        }

        if (html.hasClass(this.domNode, 'jimu-widget-splash-desktop')) {
          html.setStyle(this.customContentNode, 'marginTop', '20px');
          html.setStyle(this.customContentNode, 'height', 'auto');

          var box = html.getContentBox(this.splashContainerNode);
          if (box && box.w > 0) {
            html.setStyle(this.envelopeNode, 'width', box.w + 'px');
          }
          if (box && box.h > 0) {
            html.setStyle(this.envelopeNode, 'height', box.h + 'px');
          }
        } else {
          html.setStyle(this.splashContainerNode, 'top', 0);
          html.setStyle(this.splashContainerNode, 'left', 0);
          html.setStyle(this.envelopeNode, 'width', 'auto');
          html.setStyle(this.envelopeNode, 'height', 'auto');

          this._moveContentToMiddle();
        }
        this._resizeContentImg();
      },

Re: Splash Widget

LefterisKoumis — Wed, 07 Oct 2015 21:05:01 GMT

Thanks Robert. I already did both. I clear the cache and still no change.

Re: Splash Widget

LefterisKoumis — Wed, 07 Oct 2015 21:05:29 GMT

Tried it. No change. Thanks.

Re: Splash Widget

RickeyFight — Wed, 07 Oct 2015 21:10:41 GMT

Just to make sure,

You are editing the widget in server/apps/(your app number)

Re: Splash Widget

LefterisKoumis — Wed, 07 Oct 2015 21:20:18 GMT

yes.

Re: Splash Widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:48:34 GMT

Lefteris,

Rickey's reply is correct. If I add this to the style.css then the splash is resized (lines 6 & 7 Added):

.jimu-widget-splash-desktop .splash-container{
  position: absolute;
  display: inline-block;
  background-color: #485566;
  box-shadow: 0 0 4px rgba(160, 160, 160, 0.4);
  width: 800px;
  height: 600px;
}

Now if you want the splash content to take up the new height then make this adjustment to the css:

.jimu-widget-splash-desktop .custom-content{
  /*width: 560px;*/
  margin: 20px auto;
  overflow: auto;
  color: #fff;
  /*max-height: 388px;*/
  height: 470px;
}

and in the Widget.js _changeStatus function comment out this line:

html.setStyle(this.customContentNode, 'height', 'auto');

Re: Splash Widget

LefterisKoumis — Wed, 07 Oct 2015 22:15:34 GMT

Yes, you are correct. However, the text is overflow outside the widget new width. I reduced the width to 450 and increased height to 600. How do I restrict the text within the new width?

Thank you.

Re: Splash Widget

RickeyFight — Wed, 07 Oct 2015 22:30:15 GMT

Lefteris,

I use chrome developer tools to edit css

I use this site for examples

Inspect and Tweak Your Pages: the Basics — Web Fundamentals

Re: Splash Widget

DavidWasserman — Wed, 07 Oct 2015 23:15:52 GMT

I am having a similar problem, except with edits to the edit widgets popup. Changes don't necessarily reveal themselves. itsomes works better when I view the results in another browser or use "incognito".

Re: Splash Widget

LefterisKoumis — Thu, 08 Oct 2015 00:10:59 GMT

Thanks. The link was helpful and I fixed the overflow.