WebAppbuilder splash screen size

2570
2
Jump to solution
06-09-2016 04:12 AM
AveKargaja
Occasional Contributor

Hi

Before I go a bit crazy while digging the code I just wanted to ask if anybody knows by heart where I can change the default splash screen size.

changing the numbers from

widgets\Splash\css\style.css

.jimu-widget-splash-desktop.envelope

is sadly not enough

WAB version 2.0.1

Thanks

Ramon

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Ramon

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 you want the new splash size to be centered:

.jimu-widget-splash-desktop .envelope{
  max-height: 600px;
  max-width: 800px;
}

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

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

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Emeritus

Ramon

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 you want the new splash size to be centered:

.jimu-widget-splash-desktop .envelope{
  max-height: 600px;
  max-width: 800px;
}

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

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

Awesome, thank You very much @Robert Scheitlin