Hi,
I have a row on a dashboard with a number of panels with metrics.
However, the panels appear off-set and the metrics are not centered:
Currently, the row is defined as follows:
<row>
<panel id="tn">
<title>Total</title>
<html>
<style>
single{
width: auto;
font-size=20%;
}
</style>
</html>
How can I fix this?
Thanks,
Hi @POR160893,
I mocked up a similar dashboard and it looked fine in my browser when the window was maximised, but got the same bunched up look when the window was smaller.
I played around with the CSS and got it looking ok no matter how small the window went. Here's what I ended up with:
<row depends="$CSS$"><html><sytle>
.singlevalue{width:10%!important;}
.splunk-single, .svg-container{width: 100%!important;min-width:auto!important;;}
.dashboard-row .dashboard-panel .panel-element-row div.single { min-width:auto;}
rect{width: 100%!important;}
</style>
</html>
</row>
Note I set the single value width to 10% because there are 10 panels (100% / 10 = 10%)
Give it a go and see how you get on.
Cheers,
Daniel
