I've been trying to make a panel that is anchored on both the left and right if the form is small enough but just centered if large enough. This way I replicate the idea of having a max width for the panel while keeping it centered.
I make the form nice and wide and then place the panel on the form along with TMSFNCResponsiveManager. I then set the panel to Align: Center and save my first state with the ResponsiveManager. After that, I set the form to the width where I want the behavior to change, set the panel to Align: None, set the anchors to left and right, and save my second state.
At this point, I expected it to work as described but it did not. I've tried fiddling with it in various ways, such as setting states up in different orders, changing the target Control to the Panel instead of the form, etc. No matter what I try it just seems to either stick with the default state or it deforms the panel in some unexpected way.
Am I doing this wrong or are anchors/align center just not supported yet by TMSFNCResponsiveManager?
Thank you Pieter! I'm still struggling with this, so any insight you could give would be great. I don't know if I'm doing it wrong or if these properties aren't supported yet.
Just in case my original post wasn't clear, what I'm trying to do is just have a Layout or Panel component centered on the screen at all times. At thinner window widths, I want that panel to be anchored to the sides of the screen so that it grows with the width of the window. At wider window widths, I want the panel to no longer be anchored to the sides, so it no longer grows with the window but has a constant width and stays centered on the screen.
In CSS/HTML I'd do this by setting a max-width on the panel or a breakpoint on the window. ResponsiveManager seems perfect to do this, but I can't seem to get it to work with how I'm trying it.
On the panel, set align: center and turn on anchors for the left and right
Save as a new state in ResponsiveManager
Make the form slightly wider
Remove the anchors from the left and right of the panel
Save as a new state in ResponsiveManager
Run the application and resize it
RESULT: the panel disappears completely when you make the form thinner. I did notice though that if you resize the form slowly, it kind of works, though it jumps a bit.
Now try setting the states in reverse order and the behavior changes:
Clear the states on the ResponsiveManager
Make the form wide and make sure the panel has no left and right anchors
Save as a new state
Make the form slightly thinner
Add anchors to the left and right on the panel
Save as a new state
Run the application and make the form wider and thinner
RESULT: when you make the form thinner, the panel seems to glitch and become infinitely wide and does not change back when you return to the wider form state.
Again, if you resize the form very slowly, it seems to work. It seems to have something to do with the speed you resize the form that gets it completely out of whack.
I also noticed the ResponsiveManager does not seem to calculate what its initial state should be by the size of the form. It always seems to start in the state that was loaded last in the IDE.
To reproduce:
Set up the form in either way above
If you are in state 2 in the IDE designer, change the width of the form to a width that state 1 should be triggered at runtime (but do not load state 1 in the designer)
Run the application
RESULT: despite the form initially loading with the width that should trigger state 1, it still loads in state 2 because it was the last state selected in the IDE.