×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Jobs

How to bring control on top

How to bring control on top

How to bring control on top

(OP)
Hi,

I am facing a problem in showing the container to the front of all.
In one container I placed an image and in click event of it I resize the container according to the grid inside the same container.
Everything is working except when I placed this image within another container, it is not going out the border of the container.
How can I show it to required size.

Please find the image (Img1.gif), (it is what I am facing)
Please find the image (Img2.gif), (which is required)

Kindly suggest me.

Thanks

Abbasaif



RE: How to bring control on top

Use ZORDER
From the help:

Places a specified form or control at the front or back of the z-order within its graphical level.
[Object.]ZOrder([nOrder])

nOrder

Specifies an integer indicating the position of the object relative to other objects.
If you omit nOrder, the setting is 0.

Setting Description
0 (Default) The object is positioned at the front of the z-order.

1 The object is positioned at the back of the z-order.

Regards

Griff
Keep Smileing

There are 10 kinds of people in the world, those who understand binary and those who don't.

I'm trying to cut down on the use of shrieks (exclamation marks), I'm told they are !good for you.

RE: How to bring control on top

Hi,

It seems to me you would like to have a colored heading on your grid's header. You want to place a container over your grid. For that you have several options.
1) place the colored heading container manualy on your grid and if ness, click on the VFP menu: Format-> Bring to Front
or
2) color the headings: Grid.Themes = .F. in your Header select the color you want for backcolor

Rgds,

Koen

RE: How to bring control on top

(OP)
Hi

Quote:

Places a specified form or control at the front or back of the z-order within its graphical level.
[Object.]ZOrder([nOrder])

I did the same, but no luck. It is not going out of the horizon of the parent container.

Abbasaif

RE: How to bring control on top

(OP)
Hi,

Quote:

It seems to me you would like to have a colored heading on your grid's header.

No, I just wanted to display the container of the "help" outside of the parent container.

Thanks

Abbasaif

RE: How to bring control on top

If something is inside a container, you have to call Zorder(0) on the container to bring the full container to the top-
But what you not will be able to do is set a control's parent to let it swap position in the object hierarchy, .Parent is a read-only property.
And you also can't let the container move up its child object to the same hierarchy level.

If you want the freedom to move things around in z-order per individual control, you can't use the container concept. Everything would need to be directly on the form canvas with object name path THISFORM.objectnameX so it can be put in front of other THISFORM.objectnameY objects. But I'd not recommend that, as that complicates other things, for sure. For example, maintaining the single objects in classes. You can't even write code about two controls belonging to a group like a search textbox and a grid when you give up the control concept. That includes the great idea to make use of the control base class to create such groups based on them instead of containers. They also will mean you can only change the outmost control object z-order.

Bye, Olaf.

Olaf Doschke Software Engineering
https://www.doschke.name

RE: How to bring control on top

Mr. Abbasaif,

I now understand you would like to show a container inside an other container. You will have to play with the Zorder()

try this:

CODE --> VFP

**************************************************
*-- Class:        zordertest
*-- ParentClass:  form
*-- BaseClass:    form
*-- Time Stamp:   11/12/19 09:40:08 PM

PUBLIC oForm as Form
oForm = CREATEOBJECT('ZorderTest')
oForm.Show(2)
RETURN

DEFINE CLASS zordertest AS form


	Top = 0
	Left = 0
	Height = 288
	Width = 681
	DoCreate = .T.
	Caption = "Form1"
	Name = "Form1"


	ADD OBJECT command1 AS commandbutton WITH ;
		Top = 24, ;
		Left = 432, ;
		Height = 37, ;
		Width = 97, ;
		Caption = "Show Yellow", ;
		Name = "Command1"


	ADD OBJECT command2 AS commandbutton WITH ;
		Top = 24, ;
		Left = 576, ;
		Height = 37, ;
		Width = 97, ;
		Caption = "HIde Yellow", ;
		Name = "Command2"


	ADD OBJECT container2 AS container WITH ;
		Top = 72, ;
		Left = 168, ;
		Width = 108, ;
		Height = 96, ;
		BackColor = RGB(255,255,0), ;
		Name = "Container2"


	ADD OBJECT container1 AS container WITH ;
		Top = 48, ;
		Left = 120, ;
		Width = 200, ;
		Height = 200, ;
		BackColor = RGB(255,0,0), ;
		Name = "Container1"


	PROCEDURE command1.Click
		Thisform.Container2.ZOrder(0)
	ENDPROC


	PROCEDURE command2.Click
		Thisform.Container2.ZOrder(1)
	ENDPROC


ENDDEFINE
*
*-- EndDefine: zordertest
************************************************** 

Koen

RE: How to bring control on top

(OP)
Thanks Mr. Koen Piller

Thanks for the reply,

Let me explain you again by taking the example of your code:

1. Kindly reduce the size of the red container
2. Increase the size of the yellow container than the red container, and keep it visible.
3. Keep the Yellow Container inside the red container.
3. Put the "Show Yellow" command button inside the yellow container.
4. Now, what I want if I click on "Show Yellow" button the Yellow container which is now
in bigger size than the red container should display in full.

I hope I tried to explain you.

Regards

Abbasaif

RE: How to bring control on top

Dear Abbasaif,

in Koen's code you can do that, simply change the Width/Height for container1 and 2 as you like. But in your situation, I strongly assume the containers are nested. An outer container always clips its content. You also can't put the inner conatiner outside of the outer container, you can't change the parent object at runtime. Only then it could overlap outside. VFP is NOT HTML, where things "inside" other things are allowed to overlap and flow outside.

That's what I already said.

If your two containers are not nested inside each other you call ZORDER(0) on the container you want to be on top.

This modifies Kiens code with overlapping container sizes putting on or the other on top instead of putting one on top or to the back. Just another strategy to do the same thing, but concentrating on the "make this top" aspect only using ZORDER(0)

CODE

**************************************************
*-- Class:        zordertest
*-- ParentClass:  form
*-- BaseClass:    form
*-- Time Stamp:   11/12/19 09:40:08 PM

PUBLIC oForm as Form
oForm = CREATEOBJECT('ZorderTest')
oForm.Show(2)
RETURN

DEFINE CLASS zordertest AS form

   Top = 0
   Left = 0
   Height = 288
   Width = 681
   DoCreate = .T.
   Caption = "Form1"
   Name = "Form1"


   ADD OBJECT command1 AS commandbutton WITH ;
      Top = 110, ;
      Left = 333, ;
      Height = 37, ;
      Width = 197, ;
      Caption = "Bring red to the top", ;
      Name = "Command1"


   ADD OBJECT command2 AS commandbutton WITH ;
      Top = 150, ;
      Left = 333, ;
      Height = 37, ;
      Width = 197, ;
      Caption = "Bring yellow to the top", ;
      Name = "Command2"


   ADD OBJECT container1 AS container WITH ;
      Top = 50, ;
      Left = 100, ;
      Width = 100, ;
      Height = 200, ;
      BackColor = RGB(255,0,0), ;
      Name = "Container1"

   ADD OBJECT container2 AS container WITH ;
      Top = 100, ;
      Left = 50, ;
      Width = 200, ;
      Height = 100, ;
      BackColor = RGB(255,255,0), ;
      Name = "Container2"

   PROCEDURE command1.Click
      Thisform.Container1.ZOrder(0)
   ENDPROC


   PROCEDURE command2.Click
      Thisform.Container2.ZOrder(0)
   ENDPROC


ENDDEFINE
*
*-- EndDefine: zordertest
************************************************** 

This is only possible, because the containers are not nested, they both are objects direclty on the form, they just have a z-order anyway. Once you nest containers overlapping becomes impossible. It's like wanting controls to stick outside the form itself. Once something is inside a container, the outside container is the maximum rectabgle area it shows, just like controls you shift to control.top>form.height or control.left>form.widht are invisible, they don't appear belo or right of the form.

Bye. Olaf.

Olaf Doschke Software Engineering
https://www.doschke.name

RE: How to bring control on top

(OP)
Thanks Mr. Olaf

I will check it

Abbassaif

RE: How to bring control on top

(OP)
Thanks for the reply and sorry for the delay.

Actually I want the parent container in the back (Zorder(1)) of the child container.

There is an image of search in child container on which if it is clicked the child container (which is bigger in size of the parent container) should come out of the parent container boundary.

Regards

Abbassaif


RE: How to bring control on top

Quote (abbasaif)

... the child container ... should come out of the parent container boundary.

Well, you can't have that.

Quote (myself)

An outer container always clips its content. You also can't put the inner conatiner outside of the outer container, you can't change the parent object at runtime.

Quote (myself)

But what you not will be able to do is set a control's parent to let it swap position in the object hierarchy1, .Parent is a read-only property.
And you also can't let the container move up its child object to the same hierarchy level.

If you need something to appear in front of something else, both have to be on the same hierarchy level. You can't unnest something at runtime, it has to start unnested. So your only solution is not nesting the containers you need to z-order differently at runtime. It should not be hard to do that, because both the things are based on a container anyway.

You have to keep these containers unnested already at design time, then you can zorder them, no matter if you bring something to top with zorder(0) or to the bottom with zorder(1), but nothing brings something out of a parentship.

Bye, Olaf.

Olaf Doschke Software Engineering
https://www.doschke.name

RE: How to bring control on top

(OP)
Thanks Mr. Olaf

I understood very well! let me check other alternatives.

Regards

Abbassaif

RE: How to bring control on top

Mr. Abbasaif,

Would you be able to show us what you are after? And explain the reason.

Regards,

Koen

RE: How to bring control on top

I would have thought you could make the one within the parent container visible=.f. and then open a new one outside of the container
and move it to the uppermost position...

Regards

Griff
Keep Smileing

There are 10 kinds of people in the world, those who understand binary and those who don't.

I'm trying to cut down on the use of shrieks (exclamation marks), I'm told they are !good for you.

RE: How to bring control on top

Griff,

that's a good idea, as long as a container is not needing more than an init gives it, ie.. when it has a state it gets from the interaction that's lost.

But in case the zorder only is necessary to hide something temporary and later make it visible on top again, og course the visible setting is the easiest thing to use. Also in that case the container you want to be on top and larger (wider or higher or both) as a container can't be nested inside.

What's bad design in a situation you need independent cotainers is, when code of one expects the other to be its parent or child object by code referencing it via THIS.PARENT.somcontrolwithintheparentcontainer or via THIS.childcontainert.somecontrolinthechildcontainer. That's obviously causing the dependency you don't want.

If youu have a dependency between two containers that visually should be close togehter then use a new third class, yet another container, sized as large so it can contain both other containers, alsways, and then one of these two can be on top inside the outmost container. And in the simplest case that outmost container is the form itself.

Bye, Olaf.

Olaf Doschke Software Engineering
https://www.doschke.name

RE: How to bring control on top

Olaf,
Are you sure Abbassaif wants the 2 containers to be depended of each other? I can't see this anywhere in this request.
Rgds,
Koen

RE: How to bring control on top

He doesn't want that, but they are, they are nested.
At least they're nested, or the advice to use ZORDER would have worked.

If the two containers are nested without addressing each other, then it will be easy to unnest them. Select the inner container, cut it with CTRL+X, step out onto the form level and paste it back in on that level with CTRL+V. And then you can do the ZORDERing. The only other thing to consider in that case is whether you set the containers as opaque or not.

Bye, Olaf.

Olaf Doschke Software Engineering
https://www.doschke.name

RE: How to bring control on top

Olaf,

I am still puzzled, please advise.
You have changed virtualy nothing in my simple test, only the sizes of the boxes. Are they now 'nested'? And if not what are the specifics for containers to be nested?
The way mr. Abbassaif wants his containers:

3. Keep the Yellow Container inside the red container.
3. Put the "Show Yellow" command button inside the yellow container.

Won't work as when you hide the yellow it will also hide the button, consequently you cannot unhide it anymore.ponder
Buttons should be outside the containers.

Regards,

Koen

RE: How to bring control on top

Koen,

first let's clear up what nested means. It means that some container is inside another. Noit just visually but as child object.

And with that term defined all I did here in short was:
1. I told what's impossible. For example having a bigger container nested in a smaller container and then letting it show on top and stick out of the smaller container.
2. I showed what's possible. And as I don't see a reason for a use case where one container is completely hidden when it's on bottom, I changed your example to a high and a wide container. If one of the containers was just small so it hides completely, or if it is sufficient to hide, a solution not needing zorder at all would be switching visible .t./.f. And yes, of course that will need extra buttons, or the button making the hidden container visible must be in the other, that IS visible.

But these are details, they are up to Abbassaif.

Let's just wait, because only he can say what of his problem remains. Just one thing is sure: We can't offer a solution for something impossible. If you absolutely need a nested container only partially visible when it's at the back, also clipped by the size of an outer container, then that has to be nested. If you needs to come to top AND stick out, you have to use trickery and have the same container twice, one time nested inside to have that background and clipped behaviour and one time outside to be able to stick out.

Bye, Olaf.

Olaf Doschke Software Engineering
https://www.doschke.name

RE: How to bring control on top

Olaf,

Thanks of explication. Since in the code I presented and in the code you changed there is no container inside an other, there is no nested containers in either code.

As for the functionality, let us wait what mr. Abbasaif has to say, pending that, this topic is closed for me.

Regards,

Koen
====

RE: How to bring control on top

Yes, there are no nested containes in the demos of working examples, because they are working. Simple enough?

Aa this works for us, but not in his case, I conclude his containers are nested. Or the case would already be solved by Griffs first answer, but Abbassaif said that didn't work for him.

Bye, Olaf.

Olaf Doschke Software Engineering
https://www.doschke.name

RE: How to bring control on top

(OP)
Hi

Thanks everyone for the time sharing for this.

Let me explain with the help of images.

1. In fig 1. It is actually a container. The size of the container is equal to the size of image (Search).
2. From fig 2. to fig 4 when the image is click it resize accordingly.
3. After getting the result, when image is click it return to the original size.

The problem arise when I keep this container inside any other container and it is not showing outside the parent container.

What is the alternate of this?

Please suggest.

Thanks

Abbassaif








RE: How to bring control on top

Mr. Abassaif,

despite your pictures, it is not clear, to me at least. Would you be able to upload the form?

Rgds,

Koen

RE: How to bring control on top

What you've described is the way containers work. You cannot show a contained object outside the bounds of its container. You could set up code to resize the container while showing your other container and then to size it back when done.

Tamar

RE: How to bring control on top

If you would illustrate what the exact borders of your containers are, simply be setting it to bordercolor red and bordersize 1, it wouold perhaps become more apparent what you actually do.

But one thing is for sure: You can't have containers stick out of a smaller container.

>when I keep this container inside any other container and it is not showing outside the parent container.
Yes. Exactly. And there is no setting doing this. The parent container needs to grow larger to be able to see the bigger container inside. OR don't put a larger conteirn inside a smaller container, just position it at the same coordinates, but on top in z-order.

Bye, Olaf.

Olaf Doschke Software Engineering
https://www.doschke.name

RE: How to bring control on top

(OP)
Hi

Quote:

The parent container needs to grow larger to be able to see the bigger container inside. OR don't put a larger conteirn inside a smaller container, just position it at the same coordinates, but on top in z-order.

The parent containers contains other objects also, like date, customer code, name etc. So, does not looks good to resize the parent container.

Thanks

Abbassaif

RE: How to bring control on top

You have to position the part of what you want to see of the inside to be at position (0,0) in the parent container. And then you HAVE TO resize the container to the size of the thing you want to see. And the parent container position itself has to be adjusted where you want to see it.

There is no other way than that. But then you WILL see what you want to see and only that. It only does not look good if you let the parent become even larger than it needs to be and show more of the inside then you want to show. In your screenshots the parent container is far too small, you clip the inside, you see less than you want. You neither can expect this to automatically resize nor can you expect this to adapt per row because your parent container is a child of a grid cell. And there is only one real grid row, all the others are painted with the grid recordsource row of data.

So, not only containers are containers in the sense of a box defining position and size of a rectangle also pageframes are, grids are, grid columns are and grid cells are a container, the latter resulting from the width of a grid column and the grid row height.

But how many times do we need to tell you, that you CAN'T let something inside a container stick outside of its borders? That's impossible.

Do you really still need an explanation of why your form looks the way it looks? Your texts are cut off because that's where the right border of a container is. Just because you didn't give color to the container border, that doesn't mean more text can break out and show outside of the container rectangle. right of it.

In comparison to the self-adjusting resizing world of HTML divs and other HTML objects VFP containers don't use any dynamic behavior. Their position and size is as you set it.

If you have a container inside a container inside a grid column inside a grid inside a pageframe inside a form. That doesn't change the size of the innermost container. It only shows its inside structure as far, as that fits from its (0,0) to (width,height) rectangle. Everything not in that rectangle is clipped. The container itself is clipped by the column width, if the container in the cell in the column is wider than the column it neither makes the grid column wider nor does it stick into the next column. Same with the rows bottom line. And the grid containing this is where it is relative to the pageframe position under its tabs, and the pageframe is where it's positioned on the form.

Every container of control acting as a container defines a new (0,0) coordinate for left(top positions of inside objects. That what makes it hard to position something relative to form (0,0) left upper corner position, but it makes it easy to position everything relative to where a container is positioned and if that parent is moved, no position of inner objects has to change, it all follows the container, that's the main idea. Everything moves along, also the right and bottom borders, containers don't resize. Unless you use anchoring, which complicates everything, but only acts towards the next parent level, you don't anchor everything to the form level position, you anchor position and sizes to the borders of a container.

All in all, it's complicated enough, but it's extremely easy to predict and set up in comparison to how HTML divs behave.

Bye, Olaf.

Olaf Doschke Software Engineering
https://www.doschke.name

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close