Using lockBottom on a container on the fly

Targets Web
1

I have a web page on which I put a container with buttons along the top the simulate folder tabs. In the IDE I created a container for each tab and imbeded them all onto the tab container with only the first tab visible. So when the user opens the site they see the first tab selected with the tab1 container visible. If the click on another tab, the currently visible tab is hidden and the new tab is made visible.

Up until now I did not have anything locked at the bottom so nothing grows or shrinks when the user resizes the browser window. Now I have a container on one of the tabs that would work better if the bottom was locked so that it resized witht the browser window, but I don’t want the other tabs to resize with the browser window.

I thought I could just set the lockBottom property of the tabs container when the tab needing to be locked is selected and unlock it when the user moves to another tab, but I can’t get it to work…

WebPage TabsContainer (bottom is not locked in the IDE) Tab1Container User selects this tab ---> WebPage.TabsContainer.LockBottom = false Tab2Container User selects this tab --> WebPage.TabsContainer.LockBottom = true Tab3Container User selects this tab ---> WebPage.TabsContainer.LockBottom = false

If I lock TabsContainer bottom in the IDE the Tab2Container works the way I want, so I am pretty sure I have the locks set up properly. Doing it this way, however, all the other tabs resize with the browser. Not the behaviour I am looking for.

Is it even possible to change the lock parameter after the container is displayed? I am thinking not.

Thanks, John

2

Not it is not.

Your best option is to resize yourself the container in the Resize event proportional to self.height.

Or, get my autoscale class RubberViewsWE at http://rubberviews.com/rubberviewswe.html which takes care of all that transparently.

4

@Greg Olone told me before that locking should NOT be changed once embedding of a ContainerControl has occurred.

I sometimes need this functionality but I achieve it using JQuery. Also allows sizing and responsive design to work a lot better. Can use more various sizing units: 30px, 30%, 30vw (% of the view width)

5

Sorry, I just looked into http://documentation.xojo.com/index.php/WebControl and indeed LockHorizontal, LockVertical, LockLeft, LockTop and LockRight are indeed available after design.

I had simply never used them in code, and not too often in the IDE.

6

NM - “WEB CONTAINERS” … I skimmed this and saw containers … my bad

Web containers DO behave differently - Greg knows better about the web container than I

7

@Michel Bujardet They are available but I think they only work before you imbed them. Once imbeded I am finding that they have no affect.

I solved my problem by removing the background rectangle I had on the TabsContainer and placing one in each of the container tabs then locking the bottom of the tabsContainer in the IDE. Then I locked the background rectangle of the continer tab I wanted to resize, leaving the others unlocked…

WebPage TabsContainer ---> bottom locked Tab1Container ---> bottom rectangle bottom not locked Tab2Container ---> bottom rectangle locked Tab3Container ---> bottom rectangle bottom not locked

The effect is to the user it looks like the containers are not resizing for Tab1 and tab3 even though they are. When they select Tab2 the container magically resizes.

8

[quote=205720:@Norman Palardy]NM - “WEB CONTAINERS” … I skimmed this and saw containers … my bad

Web containers DO behave differently - Greg knows better about the web container than I[/quote]
Indeed. Changing the locking of a WebContainer instance after its Open event has fired was unpredictable at best, and was disabled to avoid confusion.

WebContainers dragged onto a layout will only respect the locks that are set in the inspector. If you add a container at runtime, you can set the lock properties up until you call EmbedWithin.