Happy New Year!
How can I define a individual color for each tab in the AttributeTable widget?
Thank you!
Curt
Solved! Go to Solution.
Curt,
It is actually in the widget.js initDiv function (line 42 added).
initDiv: function() {
this.AttributeTableDiv = html.create("div", {}, this.domNode);
html.addClass(this.AttributeTableDiv, "jimu-widget-attributetable-main");
var tabDiv = html.create("div");
html.place(tabDiv, this.AttributeTableDiv);
this.tabContainer = new TabContainer({
style: "width: 100%;"
}, tabDiv);
html.setStyle(this.tabContainer.domNode, 'height', (this.normalHeight) + 'px');
//if(has("mozilla")){
// this.tabContainer.tablist.containerNode.style.width = "50000px";
//}
//We need to startup tabContainer before call addChild method, or it will result in issue #8678
this.tabContainer.startup();
var configInfos = this._resourceManager.getConfigInfos();
var len = configInfos.length;
for (var j = 0; j < len; j++) {
var configInfo = configInfos[j];
if (configInfo.show) {
var json = lang.clone(configInfo);
var paneJson = {};
paneJson.paneId = json.id;
paneJson.title = json.name;
paneJson.name = json.name;
paneJson.layerType = this._layerTypes.FEATURELAYER;
paneJson.style = "height: 100%; width: 100%; overflow: visible;";
var cp = new ContentPane(paneJson);
this.layerTabPages[j] = cp;
this.tabContainer.addChild(cp);
}
}
if (len > 0) {
// tabListWrapperHeight + tolerance
this.noGridHeight = this._getGridTopSectionHeight() + 5;
this.tabContainer.selectChild(this.layerTabPages[1]);
} else {
this._toggleNoTableMessage(true);
}
Don't forget to mark this question as answered.
Curt,
How in depth are you wanting to go?.. A specific color for a specific layer or just a different color for each tab?
Hi Robert.
Just a different color for each tab.
Curt,
In your apps themes\Theme name\common.css add these rule (you need one for each tab):
div[widgetid="dijit_layout_TabContainer_0_tablist_dijit_layout_ContentPane_0"] {
background-color: beige !important;
}
div[widgetid="dijit_layout_TabContainer_0_tablist_dijit_layout_ContentPane_1"] {
background-color: rgb(160, 160, 83) !important;
}
div[widgetid="dijit_layout_TabContainer_0_tablist_dijit_layout_ContentPane_2"] {
background-color: rgb(96, 160, 83) !important;
}
Just sequence the number at the end of ContentPane_
Super! Work great!
Anyway to set the default selected tab to "... layout_ContentPane_1" to the default versus content pane 0?
I started looking in ...\server\apps\2\widgets\AttributeTable\table\_FeatureTable.js, but have not found where to set it.
Much appreciated.
Curt,
It is actually in the widget.js initDiv function (line 42 added).
initDiv: function() {
this.AttributeTableDiv = html.create("div", {}, this.domNode);
html.addClass(this.AttributeTableDiv, "jimu-widget-attributetable-main");
var tabDiv = html.create("div");
html.place(tabDiv, this.AttributeTableDiv);
this.tabContainer = new TabContainer({
style: "width: 100%;"
}, tabDiv);
html.setStyle(this.tabContainer.domNode, 'height', (this.normalHeight) + 'px');
//if(has("mozilla")){
// this.tabContainer.tablist.containerNode.style.width = "50000px";
//}
//We need to startup tabContainer before call addChild method, or it will result in issue #8678
this.tabContainer.startup();
var configInfos = this._resourceManager.getConfigInfos();
var len = configInfos.length;
for (var j = 0; j < len; j++) {
var configInfo = configInfos[j];
if (configInfo.show) {
var json = lang.clone(configInfo);
var paneJson = {};
paneJson.paneId = json.id;
paneJson.title = json.name;
paneJson.name = json.name;
paneJson.layerType = this._layerTypes.FEATURELAYER;
paneJson.style = "height: 100%; width: 100%; overflow: visible;";
var cp = new ContentPane(paneJson);
this.layerTabPages[j] = cp;
this.tabContainer.addChild(cp);
}
}
if (len > 0) {
// tabListWrapperHeight + tolerance
this.noGridHeight = this._getGridTopSectionHeight() + 5;
this.tabContainer.selectChild(this.layerTabPages[1]);
} else {
this._toggleNoTableMessage(true);
}
Don't forget to mark this question as answered.