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
Solved! Go to Solution.
_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();
},
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!
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.
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?
Sure in the LayerListView.js look at the _onRowTrClick function and have it call the _onCkSelectNodeClick
Sorry I'm a total noob. Do you have a bit of code I could put at the _onRowTrClick?
_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();
},
Works like a dream! I really appreciate it.
Thank you thank you