Where should other css files be placed?

[AndrewTerwiel]

Where is the best place to put other css files, such as bootstrap.css etc? How does one make the custom widget refer to these stylesheets?

Putting them anywhere in the WAB folder and then doctoring the \client\stemapp\init.js by adding references in the resources object works, but feels like a hack.

resources = resources.concat([

      window.apiUrl + 'dojo/resources/dojo.css',

      window.apiUrl + 'dijit/themes/claro/claro.css',

      window.apiUrl + 'esri/css/esri.css',

      window.apiUrl + 'dojox/layout/resources/ResizeHandle.css',

      window.path + 'jimu.js/css/jimu.css',

      window.path + 'libs/jquery-2.1.1.min.js

]);

Does anyone have a more elegant solution?

[JunshanLiu · Accepted solution]

If these CSS files are used by only one widget, it's better to put them in widget's folder. But if they are shared, resources array is a good place to put.

Here is a topic about loading 3rd resource.

Uncaught Error: Bootstrap's JavaScript requires jQuery

[TerryGustafson]

So I created my css. in the custom widget/css folder. 

1.  do I need it in the stemapp section as well as the project section?

2. how do I call the new css so that it overrides a previous css?

[RobertScheitlin__GISP]

Terry,

   Did you create a new .css file or did you just add you new css rules to the existing style.css?

1. If you want all new apps that use your widget to have this css then yes you need to place it in the stemApp as well.
2. That depends on the answer to my question above. Normally if you just add the css rule to the style.css then if you have the css rule selector correct it will just get applied. If you have created a new something.css then you have to import that css style sheet to your code (I have never had the need to do this as I always just add the rule to the existing style.css).

[TerryGustafson]

So I would like to just add the rules to the existing style.css. Where do I place the rule selector so that it overrides the dgrid.css? I would think the style.css for the widget I’m working on would get called somewhere but I’m struggling to understand where..

[RobertScheitlin__GISP]

Terry,

   Assuming you are using the dgrid in your widgets code then the fact that you have a css rule in your widgets style.css means that it will override the default dgrids css. Once again assuming that you are using the proper css selector syntax.

[TerryGustafson]

This is what my style.css looks like. All I added was the .dgrid at the bottom.. Hoping it would override the previous css request but it seems to get overridden when I look at the developer tool. Here is a snap shot.

@import url("../common.css");

.jimu-widget-geoprocessing

.jimu-widget-geoprocessing .jimu-viewstack

.jimu-widget-geoprocessing .section

.jimu-widget-geoprocessing .opts [class*="col"]

.jimu-widget-geoprocessing .opts a.help{

line-height: 45px;

}

.jimu-widget-geoprocessing .section.opts{

margin-top: 20px;

}

.jimu-widget-geoprocessing .section .jimu-btn

.jimu-widget-geoprocessing .info

.jimu-widget-geoprocessing .info .text{

text-align: center;

width: 100%;

bottom: 0;

position: absolute;

}

.jimu-widget-geoprocessing .input-node, .jimu-widget-geoprocessing .output-node

.jimu-widget-geoprocessing .input-node>.input-label, .jimu-widget-geoprocessing .output-node>.output-label

.jimu-widget-geoprocessing .input-node>.editor-container, .jimu-widget-geoprocessing .output-node>.renderer-container{

margin-top: 5px;

width: 100%;

}

.TabTheme .jimu-widget-geoprocessing .jimu-tab>.control>.tab.jimu-state-selected{

border-top: 0;

}

.jimu-widget-geoprocessing li{

list-style: none;

}

.jimu-widget-geoprocessing .error-message{

text-align: left;

width: 100%;

margin-top: 10px;

color: #FF0000;

}

.dgrid

[RobertScheitlin__GISP]

Terry,

   Is you post missing something or are you thinking that adding .dgrid to the css will overwrite the default? You have to specify the css properties that you want to overwrite or the default ones will always be used.

[TerryGustafson]

yes my post was missing the rest..  I had

.dgrid {

height: auto;

}

at the bottom of the style.css for the widget I'm working on..

[RobertScheitlin__GISP]

Terry,

  I am not use if auto is going to work but if you may have to use:

.dgrid {
  height: auto !important;
}