Skip to main content
J
jensc17-Peridot
17-Peridot
March 10, 2023
Solved

Flexible containers

  • March 10, 2023
  • 3 replies
  • 2653 views

Hello,

 

I have a situation where I have an application "header" in a mashup, like so:

jensc_0-1678462468609.png

As you can see, the header is not really centered.

This is due to this hidden dropdown:

jensc_1-1678462554033.png

 

At the moment I have set the container that the dropdown (and button) are in as fixed width. This is because if I set it to responsive, the application header moves around as its container is growing and shrinking.

 

So basically what I want to accomplish is to have the header in the center of the screen in general regardless of what happens to the other widgets. 

I realize this might cause some issues for people with smaller resolutions, but I hope it would be OK.

 

Hope to get some feedback on this.

 

Thanks,

Jens

 

Best answer by Constantine

Hello Jens,

 

How about adding a second similarly-fixed-width empty container to the left of your header?

 

🙂Edit: There was a smiley at the end of that sentence. For some reason this website makes all stupid ideas look serious.

 

/ Constantine

3 replies

S
slangleyCommunity Manager
Community Manager
March 14, 2023

Hi @jensc.

 

Which version of ThingWorx are you running?  I'll need to do some testing with this.

 

Regards.

 

--Sharon

 

 

J
jensc17-PeridotAuthor
17-Peridot
March 14, 2023

Hello,

 

I am using 9.3.5 currently.

One option my colleague said we could perhaps use would be to add another container to the left of the header which is the same size as the one to the right of the header.

 

This will cause the header container to be centered and the text itself centered within it.

 

It's not a great solution perhaps, so if you have any thoughts I'd love to hear them.

 

Thanks,

Jens

S
slangleyCommunity Manager
Community Manager
March 14, 2023

Hi @jensc.

 

One other question....have you tried using a master?

 

Regards.

 

--Sharon

J
jensc17-PeridotAuthor
17-Peridot
March 14, 2023

Hello,

 

Ah, I forgot to write that in the original post.

This is a master that we are using.

For now it is not a huge issue so we will put it a little bit on the back-burner.

Of course any inputs are appreciated though.

 

Thanks,

Jens

S
slangleyCommunity Manager
Community Manager
March 15, 2023

Hi @jensc 

 

Can you send me your Master so I can see what options and widgets you're using?

 

Thanks.

 

--Sharon

C
Constantine18-OpalAnswer
18-Opal
March 15, 2023

Hello Jens,

 

How about adding a second similarly-fixed-width empty container to the left of your header?

 

🙂Edit: There was a smiley at the end of that sentence. For some reason this website makes all stupid ideas look serious.

 

/ Constantine

J
jensc17-PeridotAuthor
17-Peridot
March 15, 2023

Hello Constantine,

 

Yep, this was one of the way we discussed internally as well and I think it would be the easiest way to accomplish this.

However at the same time this could cause some issues for user with smaller resolutions. But for the majority of our users it should be fine.

 

Thanks,

Jens

S
slangleyCommunity Manager
Community Manager
March 30, 2023

Hi @jensc.

 

Apologies for the delay.

 

From the master you sent me, the container with the drop-down was set to responsive.  I know you said you had it set to static, but can you confirm in your master?

 

We agree too that the best way to center the header is to also add a static container to the left.

 

Let me know if you have further questions.

 

Regards.

 

--Sharon

Terms & ConditionsAccessibility statement