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?
Solved! Go to 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.
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.
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?
Terry,
Did you create a new .css file or did you just add you new css rules to the existing style.css?
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..
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.
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
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.
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..
Terry,
I am not use if auto is going to work but if you may have to use:
.dgrid { height: auto !important; }