I'm working on a GP widget which I'd hoped would be out of the box. One of the input parameters is a list of layer names which the user picks multiple options. Out of the box the WAB has an input method in simpleeditor.js that makes a bunch of checkboxes. The checkboxes aren't necessarily a problem, but they're not very organized. In desktop they're in a box with a scroll bar with one checkbox per line. That isn't the case in the WAB. I'm looking for someone who has found a good way to tidy this up or a suggestion that leads me to a good way to deal with it..
Thanks!
Solved! Go to Solution.
I believe I've gotten it with css changes within the style.css of the GP widget.
I've added a max-height and overflow options for x and y instead of the regular overflow option.
.jimu-widget-geoprocessing .input-node, .jimu-widget-geoprocessing .output-node{
max-height: 300px;
overflow-y: auto;
overflow-x:visible;
margin-top: 20px;
}
Doing this I ended up with a horizontal scrollbar on pulldown parameters, so I've cheated and changed that to 99% width.
.jimu-widget-geoprocessing .input-node>.editor-container, .jimu-widget-geoprocessing .output-node>.renderer-container{
margin-top: 5px;
width: 99%;
}
Finally made the checkboxes be full width. They're not in the right spot yet and shouldn't be in style.css.
.jimu-checkbox{
width: 100%;
}
I believe I've gotten it with css changes within the style.css of the GP widget.
I've added a max-height and overflow options for x and y instead of the regular overflow option.
.jimu-widget-geoprocessing .input-node, .jimu-widget-geoprocessing .output-node{
max-height: 300px;
overflow-y: auto;
overflow-x:visible;
margin-top: 20px;
}
Doing this I ended up with a horizontal scrollbar on pulldown parameters, so I've cheated and changed that to 99% width.
.jimu-widget-geoprocessing .input-node>.editor-container, .jimu-widget-geoprocessing .output-node>.renderer-container{
margin-top: 5px;
width: 99%;
}
Finally made the checkboxes be full width. They're not in the right spot yet and shouldn't be in style.css.
.jimu-checkbox{
width: 100%;
}