Customize formatter.html

[diniden]

I am working with using the Custom Visualization approach and have included the formatter.html file to provide a formatter to aid in customizing the visualization instance.

I would like to style the formatter to some degree but I do not see any approach to making this happen.

Some customizations I was wondering were possible:
Style elements in the formatter.html
Make dynamic elements so I can have lists of items that the user controls the number of items in the list

[diniden · Accepted solution]

I found a hacky solution:

I simply added a style tag INSIDE the first form tag and it let's me inject some styling to target text-areas and the dialog itself.

It should be decently contained as the style tag theoretically gets removed once the dialog is dismissed. I simply scoped the style as best as I could:

<form class="splunk-formatter-section" section-label="Panel Configz">
  <style>
    .popdown-dialog {
      min-width: 700px;
    }

    .popdown-dialog-body textarea {
      white-space: nowrap !important;
      min-height: 400px;
    }

    .popdown-dialog-body .shared-vizcontrols-components.tabbable {
      width: 100%;
    }

    .popdown-dialog-body .map-visualization-container {
      overflow: auto;
      max-height: 500px;
      max-width: 550px;
    }
  </style>
  <div class="map-visualization-container">
    <splunk-control-group label="Base">
      <splunk-text-area name="{{VIZ_NAMESPACE}}.initUI"></splunk-text-area>
    </splunk-control-group>
  </div>
</form>