Change font size for group layer in LayerList widget

MarkCooper5 — Mon, 30 Apr 2018 10:03:14 GMT

I would like to change the font size for the group layer name (service) in the layer list widget in order to make them stand out more. I have looked at the CSS file for the widget but cant work out how to do this. Is this possible at all?

Many thanks

Mark

Re: Change font size for group layer in LayerList widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 15:18:18 GMT

Mark,

Here is what you will need to change.

1. In the LayerList widgets style.css. Add this new css rule.

.jimu-widget-layerList .div-content.layer-is-group{
  font-size: 12px;
  font-weight:bolder;
}‍‍‍‍

2. In the LayerListView.js: lines 95 - 98 are additions and line 101 is a change.

    addLayerNode: function(layerInfo, level, toTableNode, position) {

      var layerTrNode, layerTdNode, ckSelectDiv, ckSelect, imageNoLegendDiv, handle,
        imageNoLegendNode, popupMenuNode, i, imageShowLegendDiv, divLabel;

      var rootLayerInfo = layerInfo.getRootLayerInfo();
      // if(!this._layerNodeHandles[rootLayerInfo.id]) {
      //   this._layerNodeHandles[rootLayerInfo.id] = [];
      // }

      // init _layerDomNodeStorage for rootLayerInfo.
      if(layerInfo.isRootLayer() || layerInfo.isTable) {
        this._layerDomNodeStorage[layerInfo.getObjectId()] = {
          layerTrNode: null,
          layerContentTrNode: null,
          layerNodeEventHandles: [],
          layerNodeReferredDijits: []
        };
      }

      var layerTrNodeClass = "layer-tr-node-" + layerInfo.id;
      layerTrNode = domConstruct.create('tr', {
        'class': 'jimu-widget-row layer-row ' +
          ( /*visible*/ false ? 'jimu-widget-row-selected ' : ' ') + layerTrNodeClass,
        'layerTrNodeId': layerInfo.id
      });
      domConstruct.place(layerTrNode, toTableNode, position);

      layerTdNode = domConstruct.create('td', {
        'class': 'col col1'
      }, layerTrNode);

      for (i = 0; i < level; i++) {
        domConstruct.create('div', {
          'class': 'begin-blank-div jimu-float-leading',
          'innerHTML': ''
        }, layerTdNode);
      }

      imageShowLegendDiv = domConstruct.create('div', {
        'class': 'showLegend-div jimu-float-leading',
        'imageShowLegendDivId': layerInfo.id
      }, layerTdNode);

      ckSelectDiv = domConstruct.create('div', {
        'class': 'div-select jimu-float-leading'
      }, layerTdNode);

      ckSelect = new CheckBox({
        checked: layerInfo.isVisible(), //layerInfo.visible
        'class': "visible-checkbox-" + layerInfo.id
      });

      domConstruct.place(ckSelect.domNode, ckSelectDiv);

      imageNoLegendDiv = domConstruct.create('div', {
        'class': 'noLegend-div jimu-float-leading'
      }, layerTdNode);

      var imageName;
      if (layerInfo.isTable) {
        imageName = 'images/table.png';
      } else {
        imageName = 'images/noLegend.png';
      }

      imageNoLegendNode = domConstruct.create('img', {
        'class': 'noLegend-image',
        'src': this.layerListWidget.folderUrl + imageName,
        'alt': 'l'
      }, imageNoLegendDiv);

      if (layerInfo.isTiled || layerInfo.isTable) {
        domStyle.set(imageShowLegendDiv, 'display', 'none');
        domStyle.set(ckSelectDiv, 'display', 'none');
        domStyle.set(imageNoLegendDiv, 'display', 'block');
      }

      // set tdNode width
      domStyle.set(layerTdNode, 'width', level * 12 + 40 + 'px');

      var layerTitleTdNode = domConstruct.create('td', {
        'class': 'col col2'
      }, layerTrNode);

      var grayedTitleClass = '';
      try {
        if (!layerInfo.isInScale()) {
          grayedTitleClass = 'grayed-title';
        }
      } catch (err) {
        console.warn(err.message);
      }
      var layerTitleDivIdClass = 'layer-title-div-' + layerInfo.id;
      var layerGroupClass = '';
      if(layerInfo.getSubLayers().length > 0){
        layerGroupClass = 'layer-is-group ';
      }
      divLabel = domConstruct.create('div', {
        'innerHTML': layerInfo.title,
        'class': layerGroupClass + layerTitleDivIdClass + ' div-content jimu-float-leading ' + grayedTitleClass
      }, layerTitleTdNode);
....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change font size for group layer in LayerList widget

MarkCooper5 — Thu, 03 May 2018 12:47:43 GMT

Absolutely perfect. Thank you Sir!

topic Change font size for group layer in LayerList widget in ArcGIS Web AppBuilder Questions

Change font size for group layer in LayerList widget

Re: Change font size for group layer in LayerList widget

Re: Change font size for group layer in LayerList widget