FGGEms

Costumize ESRI PopUp-Window (Feature Info) Style

Blog Post created by FGGEms on Jan 31, 2018

If you want to change the appearance of the Popup-Window (Feature-Info) in the WebAppBuilder Application, you have to change the esri main style sheet. Normally the PopupWindow gets it's style from the following style sheet:

 

http://js.arcgis.com/3.20/esri/css/esri.css 

 

It's referenced in the following WAB file:

 

init.js in the folder \server\[yourAppName]

 

If you download the above mentioned style sheet to you local computer and then link the downloaded ersi.css in the init.js file you can make changes in the PopupWindow Style.

 

resources = resources.concat([
window.apiUrl + 'dojo/resources/dojo.css',
window.apiUrl + 'dijit/themes/claro/claro.css',
window.path + 'esri.css',
window.apiUrl + 'dojox/layout/resources/ResizeHandle.css',
window.path + 'jimu.js/css/jimu-theme.css',
window.path + 'libs/caja-html-sanitizer-minified.js',
window.path + 'libs/moment/twix.js',
window.path + 'libs/Sortable.js',
//because we have jimu/dijit/GridLayout dijit, so we import this css here
window.path + 'libs/goldenlayout/goldenlayout-base.css',
window.path + 'libs/goldenlayout/goldenlayout-light-theme.css'
]);

 

I made the PopUp-Window moveable and hence the pointer in the PopUp-Window weren't very useful anymore. So I changed the esri.css file and it worked great.

Outcomes