topic Re: Where should other css files be placed? in Web AppBuilder Custom Widgets Questions

Where should other css files be placed?

AndrewTerwiel — Fri, 19 Jun 2015 02:09:12 GMT

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?

Re: Where should other css files be placed?

JunshanLiu — Fri, 19 Jun 2015 09:01:17 GMT

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

Re: Where should other css files be placed?

TerryGustafson — Wed, 05 Aug 2015 14:24:36 GMT

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?

Re: Where should other css files be placed?

RobertScheitlin__GISP — Wed, 05 Aug 2015 17:02:48 GMT

Terry,

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

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.
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).

Re: Where should other css files be placed?

TerryGustafson — Wed, 05 Aug 2015 17:39:01 GMT

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..

Re: Where should other css files be placed?

RobertScheitlin__GISP — Wed, 05 Aug 2015 17:51:20 GMT

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.

Re: Where should other css files be placed?

TerryGustafson — Wed, 05 Aug 2015 18:22:13 GMT

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

Re: Where should other css files be placed?

RobertScheitlin__GISP — Wed, 05 Aug 2015 18:39:24 GMT

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.

Re: Where should other css files be placed?

TerryGustafson — Wed, 05 Aug 2015 18:45:57 GMT

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..

Re: Where should other css files be placed?

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:48:58 GMT

Terry,

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

.dgrid {
  height: auto !important;
}

Re: Where should other css files be placed?

TerryGustafson — Wed, 05 Aug 2015 19:42:36 GMT

Looks like the auto does not want to work but I put a fixed size of 7em and the !important made it override the dgrid.css.. Still not sure why auto size would not work as its listed for css as an option.