Forum > LCL

Form moving on resize

(1/2) > >>

andyH:
I have a simple form with a single button. That button launches another form with an image, label and a couple of buttons - a message form. Nothing special, but having problems with the message form when I resize it.

I have a resize function on the message function. It works, but as soon as I resize the form moves left and up. Move form back to the centre of the screen - resize and off it goes stage left and up to the top left of the screen again. The constructor has Position:= poScreenCenter (that works), I've put the same again in the resize function to no effect.

The resize function is

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---procedure TMyMsg.MsgResize(Sender : TObject);var  LineHeight, NoLines, NoLF : byte;  i : integer;begin  //message label  MsgLbl.Width:= Self.Width - fwImage - 3 * fwBorder;  LineHeight:= xGetTextHeight('Ag',MsgLbl.Font);  NoLF:= 0;  for i:= 1 to length(MsgLbl.Caption) do      if MsgLbl.Caption[i] = LineEnding then NoLf+= 1;  with MsgLbl do NoLines:= round(xGetTextWidth(Caption,Font)/Width + NoLF/2);  if NoLines <= 5 then NoLines+= 1; //by inspection was chopping off at the bottom  MsgLbl.Height:= NoLines * LineHeight;  //Buttons  Btn1.BorderSpacing.left:= Self.Width - fwBorder - Btn1.Width;  Btn2.BorderSpacing.left:= Self.Width - 2 * fhBorder - Btn2.Width - Btn1.Width;  Self.Height:= fhBorder * 2 + MsgLbl.Height + Btn1.Height;  Self.Position:= poScreenCenter;end; Doesn't do much more than re-calculate width/height of the tlabel and reset the border spacing on the buttons.

The form gets created as

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} --- MsgForm:= TMyMsg.CreateNew(nil);
Why does it keep wandering around the screen on resize. I have another 'pop up' form that does not exhibit this behaviour on resizing?

Running under linux (linux mint).

First screenshot - as created and sat in the middle of the screen, second - after resize but form is now in the top left hand corner of the screen.


trev:
What widget set are you using?

andyH:
GTK under linux

andyH:
Done a bit more troubleshooting but no closer to a workable solution.

Adding to the constructor:

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---Position:= poScreenCenter;writeln('constructor, top=',top,' left=',left);and then adding

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---writeln('resize top=',self.top,'   left=',self.left);to the resize function results in:


--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---constructor, top=0 left=0resize top=0   left=0resize top=390   left=1120resize top=390   left=1120resize top=390   left=1120resize top=390   left=1120resize top=358   left=1080resize top=358   left=1080resize top=358   left=1080resize top=358   left=1080resize top=342   left=1060resize top=342   left=1060resize top=310   left=1020resize top=310   left=1020resize top=310   left=1020resize top=310   left=1020resize top=294   left=1000resize top=294   left=1000resize top=262   left=960resize top=262   left=960resize top=246   left=940resize top=246   left=940clearly using poScreenCenter does not assign any values to left or top, but you can see the form moving towards the top left of the screen (0,0) as it is resized. As soon as you resize (X,Y) values are assigned (so why not with poScreenCenter?).

replacing poScreenCenter with

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---left:= 400;top:= 400;in the constructor results in:

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---constructor, top=400 left=400resize top=400   left=400resize top=400   left=400resize top=400   left=400resize top=400   left=400resize top=400   left=400resize top=400   left=400resize top=400   left=400resize top=400   left=400resize top=368   left=360resize top=368   left=360resize top=352   left=340resize top=352   left=340resize top=352   left=340resize top=352   left=340resize top=352   left=340resize top=320   left=300resize top=320   left=300resize top=304   left=280resize top=304   left=280resize top=288   left=260resize top=288   left=260same as before, but the form is initially positioned at (400,400) and resizing rapidly moving it towards (0,0).

Adding

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---self.top:= 400;self.left:= 400;to the resize function, produces the desired end result but in an undesired fashion.

As the form is resized by dragging the mouse it is visually moving towards (0,0). When the mouse is released the form snaps to the desired position at (400,400). If this is an improvement, it is a very small improvement. Would be disconcerting to an end user.

I'm a little further forward but would appreciate some suggestions:

* how to calculate top left on the message form (X,Y) as poScreenCenter doesn't result in any values?

* what is causing the problem in the first place - so when you resize the form (X,Y) remains unchanged?
The form moves top left as soon as you start to drag the size with the mouse. Is this a bug in the GTK implementation?

Would welcome any ideas on things to try.  :(

To add to my previous, running linux mint 20.1 with lazarus 2.0.10.

wp:

--- Quote from: andyH on May 09, 2021, 10:41:35 pm ---
--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---procedure TMyMsg.MsgResize(Sender : TObject);begin  ...  Self.Height:= fhBorder * 2 + MsgLbl.Height + Btn1.Height;end;
--- End quote ---
Changing the Height inside the OnResize event looks wrong to me since this will trigger another OnResize. Please comment this line and check whether it has an effect on your observations.

Navigation

[0] Message Index

[#] Next page

Go to full version