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