topic Re: Variable group widths in single-column dashboard panels (using CSS?) in Dashboards & Visualizations

Variable group widths in single-column dashboard panels (using CSS?)

sethfam1 — Thu, 09 May 2013 18:37:29 GMT

Hey Splunk community!

I currently have a dashboard with a number of panels, and each panel has 5 groups:

panel 1: | grp1 | grp2 | grp3 | grp4 | grp5 |

panel 2: | grp1 | grp2 | grp3 | grp4 | grp5 |

panel 3: | grp1 | grp2 | grp3 | grp4 | grp5 |

etc.

I've chosen to use 1 column per panel so I can get more than 3 elements in a row, and so I can have a custom html title at the top, like this:

    module name="StaticContentSample" layoutPanel="panel_row4_col1" 
    module name="HiddenSavedSearch" layoutPanel="panel_row4_col1_grp1" autoRun="True"
    module name="HiddenSavedSearch" layoutPanel="panel_row4_col1_grp2" autoRun="True"
    module name="HiddenSavedSearch" layoutPanel="panel_row4_col1_grp3" autoRun="True"
    module name="HiddenSavedSearch" layoutPanel="panel_row4_col1_grp4" autoRun="True"
    module name="HiddenSavedSearch" layoutPanel="panel_row4_col1_grp5" autoRun="True"

Currently, each of these groups is the same width (20% because there are 5). However, I'd like to customize the group widths so grps 1, 3, and 5 are each 10%, and grps 2 and 4 are 35%.

FWIW, the groups I'd like to be 35% each contain 1 flashchart, while the 10% groups contain a set of single-value metrics. (Not sure if that's relevant, though.)

Any suggestions on how to make this custom-width modification via CSS or otherwise?

Thanks!
Seth

Re: Variable group widths in single-column dashboard panels (using CSS?)

tgeer123 — Fri, 10 Jan 2014 19:59:29 GMT

I have been trying to find a way to do this also...you can change some settings with css, but I don't think the grp width is one of them. Did you ever find a way?

Re: Variable group widths in single-column dashboard panels (using CSS?)

sowings — Fri, 10 Jan 2014 20:42:15 GMT

I'm guessing you're using Splunk 5, based on the fact you're in advanced XML rather than the HTML framework. In this instance, grab the Fire Brigade app, and check out the index_detail.xml, as well as the application.js contained in the app. The latter has the jQuery code to resize a panel on the fly. Check the segment contained in if (Splunk.ViewConfig.view.id == "index_detail") { ... }.