Forum > Designer
Custom Component Width and Height
Aruna:
Hi, I have a custom control that functions as intended. However, when I first click on it in the component panel and then click on the form to place an instance, it initially appears as a small black box (it looks like a dot, but I’m not sure how else to describe it). You can see this issue in the first attached screenshot..
I have explicitly set height and width in the code:
--- 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";}};} --- FMemo.Width :=600; FMemo.Height :=180; Once I manually drag the bottom-right corner of the component to resize it, I can adjust the width and height to my liking, and everything works as expected. You can see this in the second attached screenshot.
My question is: How can I ensure that Lazarus uses the width and height specified in my code for the control? For some reason, it t seems like Lazarus either doesn't pick up these dimensions or ignores them.
Here is the source:
--- 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";}};} ---unit Tlsusb; {$mode objfpc}{$H+} interface uses Classes, SysUtils, Controls, StdCtrls, Process; type { TLSB } TLSB = class(TCustomControl) private FMemo: TMemo; procedure DoRunCommand; protected procedure CreateWnd; override; public constructor Create(AOwner: TComponent); override; published property Align; property Anchors; property Font; property ParentFont; property ParentShowHint; property ShowHint; property TabOrder; property TabStop; property Visible; end; procedure Register; implementation constructor TLSB.Create(AOwner: TComponent);begin inherited Create(AOwner); // Initialize the memo FMemo := TMemo.Create(Self); FMemo.Parent := Self; FMemo.Align := alClient;// FMemo.Width :=600;// FMemo.Height :=180; FMemo.Font.Name:= 'Monospace'; //FMemo.ScrollBars := ssVertical; // Run the command DoRunCommand;end; procedure TLSB.CreateWnd;begin inherited CreateWnd; // Additional initialization if necessaryend; procedure TLSB.DoRunCommand;var outstr: string;begin RunCommand('lsusb', [''], outstr); FMemo.Lines.Add(outstr);end; procedure Register;begin RegisterComponents('Linux Sysinfo', [TLSB]);end; end.
Second question is if I change the FMemo.Align := alClient; to alNone things do not work.
--- 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";}};} --- FMemo.Align := alClient;
Why is this? And how do I fix?
EDIT: Oh btw, is how I have gone about doing this ok? Or there are more elegant ways to do this? If so please do share. Thank you!
bobby100:
Try to put this into Create method:
--- 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";}};} ---with GetControlClassDefaultSize do SetInitialBounds(0, 0, 50, 50);
wp:
--- Quote from: Aruna on August 31, 2024, 12:57:29 pm ---However, when I first click on it in the component panel and then click on the form to place an instance, it initially appears as a small black box (it looks like a dot, but I’m not sure how else to describe it).
--- End quote ---
This happens when the component has zero size. You did not specify its Width and Height in the constructor (only those of the FMemo, but this is not relevant for the component. The recommended way how to specify component size in its constructor is by calling the function GetControlClassDefaultSize and passing its return value to SetInitialBounds. Compared to setting Width and Height directly, this avoids a lot of overhead which is unnecessary at this early stage of component creation.
--- 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 TLSB.Create(AOwner: TComponent);begin inherited Create(AOwner); with GetControlClassDefaultSize do SetInitialBounds(0, 0, CX, CY);end; class function TLSB.GetControlClassdefaultSize: TSize; // must be declared in protected and as "override"begin Result.CX := 100; // This is the initial size of the component TLSB. Please adapt as needed. Result.CY := 100;end;
Having set the control's size should fix also the issue with FMemo.Align.
Aruna:
--- Quote from: bobby100 on August 31, 2024, 01:14:29 pm ---Try to put this into Create method:
--- 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";}};} ---with GetControlClassDefaultSize do SetInitialBounds(0, 0, 50, 50);
--- End quote ---
Perfect! Thank you.
Aruna:
--- Quote from: wp on August 31, 2024, 01:19:10 pm ---
--- Quote from: Aruna on August 31, 2024, 12:57:29 pm ---However, when I first click on it in the component panel and then click on the form to place an instance, it initially appears as a small black box (it looks like a dot, but I’m not sure how else to describe it).
--- End quote ---
This happens when the component has zero size. You did not specify its Width and Height in the constructor (only those of the FMemo, but this is not relevant for the component. The recommended way how to specify component size in its constructor is by calling the function GetControlClassDefaultSize and passing its return value to SetInitialBounds. Compared to setting Width and Height directly, this avoids a lot of overhead which is unnecessary at this early stage of component creation.
--- 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 TLSB.Create(AOwner: TComponent);begin inherited Create(AOwner); with GetControlClassDefaultSize do SetInitialBounds(0, 0, CX, CY);end; class function TLSB.GetControlClassdefaultSize: TSize; // must be declared in protected and as "override"begin Result.CX := 100; // This is the initial size of the component TLSB. Please adapt as needed. Result.CY := 100;end;
Having set the control's size should fix also the issue with FMemo.Align.
--- End quote ---
@wp thank you for the guidance I now have a fair understanding of how things work. I have another question for you, if I may. In Linux 'lsblk' we have multiple switches one can use:
--- 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";}};} ---lsblk -alsblk -Slsblk- Jlsblk -t how would I go about incorporating this into my component? I was thinking RadioGroup but cannot quite wrap my head around this. What I want is to give the user the ability to choose what they want lsblk to do. Or should I open a new thread?
Navigation
[0] Message Index
[#] Next page