Forum > LCL
Form moving on resize
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