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!

Earn a $35 Gift Card for Answering our Splunk Admins & App Developer Survey

Survey for Splunk Admins and App Developers is open now! | Earn a $35 gift card!      Hello there,  Splunk ...

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

You’ve probably heard the latest about AppDynamics joining the Splunk Observability portfolio, deepening our ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

As we’ve seen, integrating Kubernetes environments with Splunk Observability Cloud is a quick and easy way to ...