topic Re: TitleBar.Title component does not automatically center in Developer Q&A Forum

TitleBar.Title component does not automatically center

MaximilianoML — Thu, 01 Aug 2024 13:44:48 GMT

Hello, Dev Friends!

Today I was changing some titles in my Custom App and then I realized that my TitleBar.Title component was no rendering with the right style, I'll attach 3 images to explain my point.

My component rendered:

My code snippet:

A Dynatrace example of how I want to look like:

Thank you for your attention 🙂

Re: TitleBar.Title component does not automatically center

educampver — Mon, 05 Aug 2024 06:45:49 GMT

Hi @MaximilianoML, the issue is that the icon is taller than the level 3 heading. As I see it you have two options:

Remove the heading component and leave the content inside the <TitleBar.Title> component. With this option the font size will be larger and cover the whole height of the title bar.
If you must keep the smaller font size, you can add custom styles to the <TitleBar.Title> component. Something like this should work:

// App.css .app-title { display: flex; align-items: center; height: 100%; } // App.tsx import './App.css <TitleBar.Title className="app-title"> <Heading level={5}>Cost and Trafic Control</Heading> </TitleBar.Title>

Re: TitleBar.Title component does not automatically center

MaximilianoML — Mon, 05 Aug 2024 08:21:38 GMT

Hi @educampver !

Great! I can't believe I was styling the wrong component hahahaha

Thank you for your help, my friend!

Have a great day 🙂

Maximiliano Lopes