cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - You can change your system assigned username to something more personal in your community settings. X

Flexible containers

jensc
17-Peridot

Flexible containers

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

 

ACCEPTED SOLUTION

Accepted Solutions
Constantine
17-Peridot
(To:jensc)

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

View solution in original post

9 REPLIES 9
slangley
23-Emerald II
(To:jensc)

Hi @jensc.

 

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

 

Regards.

 

--Sharon

 

 

jensc
17-Peridot
(To:slangley)

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

slangley
23-Emerald II
(To:jensc)

Hi @jensc.

 

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

 

Regards.

 

--Sharon

jensc
17-Peridot
(To:slangley)

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

slangley
23-Emerald II
(To:jensc)

Hi @jensc 

 

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

 

Thanks.

 

--Sharon

Constantine
17-Peridot
(To:jensc)

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

jensc
17-Peridot
(To:Constantine)

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

slangley
23-Emerald II
(To:jensc)

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

jensc
17-Peridot
(To:slangley)

Hello @slangley 

 

It is no problem.

I thought it was set to fixed size... The position of the container is set to responsive though.

jensc_0-1680241930386.png

 

In the end I ended up setting a similar sized container on the left side as @Constantine suggested and this works well, at least for people with screens of 1080p or higher.

 

Thank you for taking your time!

 

Thanks,

Jens

Announcements


Top Tags