topic Re: Extend Checkbox Selection to Hover Area in LayerList Widget in Web AppBuilder Custom Widgets Questions

Extend Checkbox Selection to Hover Area in LayerList Widget

Gianna_BBSRC — Tue, 13 Aug 2019 11:16:24 GMT

Hi,

I want to make my web app as simple as possible for users, especially those on small screens. Is there a way to allow the checkbox visibility functionality (switch on/off) to be spread across the entire :hover area?

Currently, there is only a small area within the checkbox to select the layer be visible. I want users to have a larger target to hit to be able to toggle between layers very easily.

Thanks in advance!

Gianna

Re: Extend Checkbox Selection to Hover Area in LayerList

Gianna_BBSRC — Sun, 12 Dec 2021 09:40:08 GMT

I've managed to alter style.css to add some formatting to the checkbox, but only to add a margin on the top and bottom of the checkbox. If I add either margin or padding to the left or right, it totally throws off the other elements (regardless of position and/or z-index).

.jimu-checkbox .checkbox {
  margin-top: 10px;
  margin-bottom: 10px;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The hover area content is 330px wide x 36px high, and the checkbox is 16x16. It feels like I've tried every combination of padding, margin, border, position, z-index. I'm not sure what I'm doing wrong.

I'm a complete novice at javascript, so I'm not sure if this problem can be solved programmatically.

Any help will be super appreciated!

Re: Extend Checkbox Selection to Hover Area in LayerList Widget

RobertScheitlin__GISP — Wed, 14 Aug 2019 12:52:57 GMT

Gianna,

What you are wanting t do is going to be problematic... Right now the whole list row has a chick event applied to open or close the legend. If you attempt to make the layer visibility toggle when clicking on the row then you will have competing actions and a UI that is not very intuitive or user friendly.

Re: Extend Checkbox Selection to Hover Area in LayerList Widget

Gianna_BBSRC — Wed, 14 Aug 2019 13:17:59 GMT

Hi Robert,

I should have mentioned that I've disabled the legend option, fold/unfold, and all actions which are shown in the context menu, so effectively, I only have a check box and a layer name.

But you've given me a hint about the click event to open and close the legend. Is there a way to change that click event to check and uncheck the checkbox?

Re: Extend Checkbox Selection to Hover Area in LayerList Widget

RobertScheitlin__GISP — Wed, 14 Aug 2019 13:31:23 GMT

Sure in the LayerListView.js look at the _onRowTrClick function and have it call the _onCkSelectNodeClick

Re: Extend Checkbox Selection to Hover Area in LayerList Widget

Gianna_BBSRC — Wed, 14 Aug 2019 13:38:30 GMT

Sorry I'm a total noob. Do you have a bit of code I could put at the _onRowTrClick?

Re: Extend Checkbox Selection to Hover Area in LayerList Widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:40:11 GMT

    _onRowTrClick: function(layerInfo, imageShowLegendDiv, layerTrNode, subNode, evt) {
      // this._changeSelectedLayerRow(layerTrNode);
      // var fold = this._foldSwitch(layerInfo, imageShowLegendDiv, subNode);
      // if(evt.ctrlKey || evt.metaKey) {
      //   if(layerInfo.isRootLayer()) {
      //     this.foldOrUnfoldAllRootLayers(fold);
      //   } else {
      //     this.foldOrUnfoldSameLevelLayers(layerInfo, fold);
      //   }
      // }
      var chk = query('.visible-checkbox-' + layerInfo.id)[0];
      chk.click();
    },‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Extend Checkbox Selection to Hover Area in LayerList Widget

Gianna_BBSRC — Wed, 14 Aug 2019 14:46:32 GMT

Works like a dream! I really appreciate it.

Thank you thank you