Centering content when you have a sidebar

Hello,

I’m working on a prototype for something that has a sidebar which you can toggle on and off when you click a button (it’s a dynamic panel that changes states - open and docked).

I need the content on the right side to be centered on the space that’s left. Meaning the width of the window minus the width of the sidebar. In both cases, when the sidebar is open and when it’s docked. I want the positioning to be dynamic.

How would you go about doing this? Is there a way to center things inside a panel? Because you could use a panel on the right side that changes size when the sidebar is toggled, but I need the elements inside that panel to align themselves to center all the times.

Thanks!
example.rp (72 KB)

Hi spaztest,
Try this attached rp file. I am using move by 170(open panel-closed panel = 170)
I’m not quite sure it will be useful for you.

Thanks,
Vikram
example_move_by_170.rp (70 KB)

Thanks Vikramadhithan but that’s not what I want.
I know I can use “move” to manually move the content in the center, but I wondered if there’s a different way, an automatic way, without telling the object by how many pixels I want it moved. It should be variable, you could have any size content there.

Also, in this particular case, you would need to move the content by 85 (170/2) since I want it in the middle of the right hand side.

Place all Elements inside the to center objects width.

Place the open close button inside the sticky dp (in both states).
Set page propertoes to centered.
example.rp (71.9 KB)

1 Like

Hi Gregor,

Thanks for your reply. You have centered the content to the browser window, but this is not what I asked. I want to center it to the area defined by [browser.width - sidebar.width] …

Thanks again for your effort.

Sticky Navigation onPanelStateChange:
content.moveTo: [[((Window.width - this.width) / 2 + this.width) - (target.width / 2)]]

and i add a wait before, because i fear that the requested this.width might not be updated in time.
example(1).rp (74.7 KB)

1 Like

That’s fantastic Gregor, thanks so much! I tried this way too but couldn’t figure out the formula for target.x coordinate.

Hi Gregor,

Would it be possible to please ask you to help/advise on the prototype where I need to toggle the content left and right in sync with the sidebar. The only issue that I can’t resolve is returning the content to the center of the screen (horizontally) when I close the expanded sidebar. I tried to use your script.

Thank you in advance!
content is returning to the center.rplib (1.1 MB)

Preview

Natalie

Hi Gregor,
Sorry I did not explain properly what I am trying to solve.

I am trying to build an interface with left navigation sidebar and content in the middle. On page load content pin to the browser in the middle. Then when user clicks to the hamburger condensed version of left navigation become visible and breadcrumbs with content move together.

In have checked the hotspots that you have mentioned. I called them ‘hotspot 1’ and ‘hotspot 2’, but, in reality, they are dynamic panels. I did my best to investigate them both and can say that, in the ‘hotspot1’ dynamic panel, the ‘content’ loses the center alignment only after I click on the hamburger menu and it prompts the ‘hotspot1’ to move to its ‘State 2 - selected’. So, ‘hotspot 1’ doesn’t work as intended in its second state.
I think that maybe this portion of the code might be the source of the problem:

Then user clicks to left navigation sidebar become 260px in width and content at this point moves to 261,89.

Then user is clicking in any sidebar options and then by clicking on hamburger icon, sidebar become narrow again. The issue that I can’t resolve is returning the content to the center of the screen (horizontally) when I close the expanded sidebar.

For the ‘hotspot 2’ panel, when I click on it, it also triggers the changes that are inconsistent with the center alignment of the ‘content’ – the content shifts far to the right and moves down…

Thank you again. Hope that you would be able to help me with theses :slight_smile:

Natalie.

Natalie,

You can try position content not by pinning it to the browser window, but manually using “OnPageLoad” and “OnWindowResize” functions, and taking into account current state of side panel:

centered_content.rp (48.4 KB)

1 Like

Hi Adverico, Thank you so much for helping me out! I really appreciate it! Many thanks again!

I also got help, and here is a final edits (The prototype works beautifully now. This is really exciting!!!)
content is returning to the center_edited.rplib (1.1 MB)

From Simon - Axure Customer Support: I was able to do some more investigating with your file, and it looks like the behavior you’re seeing may indeed be coming down to the expression currently being used in the “move” action moving the “content” dynamic panel. In this case, I found that using the following expression instead does seem to work as expected:

[[(Window.width / 2) - (target.width / 2)]]

And, if you’d like to add the width of the “condensed” hot spot widget as an additional margin, this expression should do the trick:

[[(Window.width / 2) - (target.width / 2) + LVAR1.width]]

Where “LVAR1” is referring to a local variable that’s referencing the condensed hot spot, so that “LVAR1.width” returns the exact width of the widget (using “this.width” can become ambiguous in certain cases depending on the widget the action is being triggered from):

I’ve gone ahead and attached an edited version of your file below with this implemented into the condensed hot spot, where I also modified the “hotspot1” dynamic panel to mirror the move actions there:

Note that I did remove the “OnPanelStateChange” event from the “sidebar” dynamic panel in the edited version, as I wasn’t quite clear on what this event was doing. If you need to keep this event in the original version of your file, you should be able to also modify the move action in that event using the same expressions mentioned above.
Preview