Splash Widget

[LefterisKoumis]

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.

[RickeyFight]

Lefteris,

In the widgets/splash/css/style.css

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

Controls the splash widget width.

[LefterisKoumis]

Tried it. No change. Thanks.

[RickeyFight]

Just to make sure,

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

[LefterisKoumis]

yes.

[RobertScheitlin__GISP]

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');

[LefterisKoumis]

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.

[RickeyFight · Accepted solution]

Lefteris,

I use chrome developer tools to edit css

I use this site for examples

Inspect and Tweak Your Pages: the Basics — Web Fundamentals

[LefterisKoumis]

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

[RobertScheitlin__GISP]

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();
      },