Center text to view instead of Flex Component

Ignition
,
1

Hi!

We designed a header that goes on the top of all the views.

The person that did it like 2 years ago didn't center the text and I'm trying to fix it.

It's a Flex View that contains the following:

| Icon | Logo | Flex Container 1 | User Icon | Conf Icon | Flex Container 2 |

All of those have a fix width except the Flex Container 1 that has the view tittle and has grow:1.

This means that the tittle is centered to that Flex Container and not the view. Any idea on how to fix it? If I could get the total view widht I could do a % on that with a binding.

Help is appreciated.

2

Can you post the view here? Right-click, copy, paste and then format it as shown in Wiki - how to post code on this forum. That way we can try it out.

3

Can't share the entery view.

The header looks like this:
image

Components are like:
image

The user name is shown next to the icon so the size is not always the same.
Want to center the Tittle to the view not to the container is in.

Do you need any more information?

4

I think the original designer did it properly.
The way it is set up it will respond correctly to changes in the window width, etc.

1 Like
5

If you must, you can wrap the components on each side in another container, and set those to a a fixed width. You risk squashing the title when there is still available space, though.

1 Like
6

This is just some good ol' CSS flex box tinkering. You can use empty containers to fill gaps on either side of the title component to make sure each side has the same basis %. In your case, if the logo is taking up only 20% of the view, maybe you need to add an empty 20% container to balance it with all of the components on the right side.

I believe if you look at the template Perspective project that IA provides, they do this method in their header if you would like a more concrete example.

7

There's always a way that doesn't involve using "spacer" components. That's what margins/padding are for.

3 Likes
8

padding-left: 20% will do that for you.
Or margin-left, but I'm a padding guy.

In this case, I'd probably use fixed width for the containers on both side. You usually don't want these growing or shrinking.

1 Like