Are there samples of custom choosers in the GP Widget?

1482
1
Jump to solution
06-21-2016 07:46 AM
TimDine
Occasional Contributor II

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!

0 Kudos
1 Solution

Accepted Solutions
TimDine
Occasional Contributor II

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%;

}

View solution in original post

1 Reply
TimDine
Occasional Contributor II

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%;

}