Dashboards & Visualizations

How to align the text of titles in panels?

Brausepaule
Path Finder

Hi,

i do know that you simply can add a html part above the charts to replace the actual panel title and that class used in the html part is easily centered. However it is not as wide as the chart below.

You also can use css to change the style of the panel title itself, but fpr some reason it has a weird offset and is not truly centered. The same is true for chart titles...

Back in a project i found a way to use flexbox to truly center the native .panel-title style

But for the hell of me, i can not put it back together. The problem is that the flexbox itself is already not centered in the panel header.

Any ideas are greatly appreciated.

 

Kind regards,

Mike

Labels (2)
0 Karma
1 Solution

Brausepaule
Path Finder

Hi,

 

i gave up with flexbox...maybe it is even matter of chrome, firefox, etc.

I ended up using the common approch with an h2 mimic via css styles:

Brausepaule_1-1676474840766.png

On the left is the centerd title for the original panel-title with the weird negative offset

In the middle is the standard version of the h2 mimic which i always found to be a bit hard on the eyes in relation to the charts

on the right ist the h2-mimic with margins...

.h2-mimic {
background:#177843 !important;
color:white !important;
text-align: center !important;
font-weight: bold !important;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
height: 38px; !important;
margin-top: -10px; !important;
margin-left: -10px; !important;
margin-right: -10px; !important;
display: flex; !important;
justify-content: center; !important;
align-items: center; !important;
font-size: 16px; !important;
}

Kind regards,

Mike

View solution in original post

0 Karma

Brausepaule
Path Finder

Hi,

 

i gave up with flexbox...maybe it is even matter of chrome, firefox, etc.

I ended up using the common approch with an h2 mimic via css styles:

Brausepaule_1-1676474840766.png

On the left is the centerd title for the original panel-title with the weird negative offset

In the middle is the standard version of the h2 mimic which i always found to be a bit hard on the eyes in relation to the charts

on the right ist the h2-mimic with margins...

.h2-mimic {
background:#177843 !important;
color:white !important;
text-align: center !important;
font-weight: bold !important;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
height: 38px; !important;
margin-top: -10px; !important;
margin-left: -10px; !important;
margin-right: -10px; !important;
display: flex; !important;
justify-content: center; !important;
align-items: center; !important;
font-size: 16px; !important;
}

Kind regards,

Mike

0 Karma
Get Updates on the Splunk Community!

Monitoring MariaDB and MySQL

In a previous post, we explored monitoring PostgreSQL and general best practices around which metrics to ...

Financial Services Industry Use Cases, ITSI Best Practices, and More New Articles ...

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Splunk Federated Analytics for Amazon Security Lake

Thursday, November 21, 2024  |  11AM PT / 2PM ET Register Now Join our session to see the technical ...