Jump to content

Desktop Panel Set Height At Runtime ?


andyhill

Recommended Posts

Haryi, Desktop Panel as in Desktop TUniPanel as opposed to Mobile Panel TUnimPanel - I thought it was obvious.

I have a Form with a UniScrollBox (tried PanelContainer too) that is set by Flex and LayoutConfig overrides and has one Panel which is also set by Flex and LayoutConfig overrides and inside that one Panel there are multiple FieldContainers (3 in this case) each with their own collection of Labels and Edits - all good.

I may decide at runntime to adjust the amount of Labels and Edits shown in each FieldContainer requiring that I adjust the Height of the Panel so that the ScrollBox does not scroll unnecessary blank canvas in the Vertical Scroll Event.

The obvious xxx.Height:= yyy; fails to have any effect at runtime.

I need a Javascript Solution.

 

 

Link to comment
Share on other sites

You can't mix 'Height'/'Width' with 'flex'.

When layout of parent is 'vbox' and the child has 'flex' set then the child 'height' has no effect !

When layout of parent is 'hbox' and the child has 'flex' set then the child 'width' has no effect !

Link to comment
Share on other sites

When doing layouts, there is normally not only one way to do it... So attached is probably not exactly what you want. I suppose it all depends on where the constrains should be. if the various fields are allowed to make the form higher or if the form itself should be fixed. (Design outside in or inside out...) 

So in this example the height is effected by the visible controls - and if the inner height is more than the form height the form scrollbar is visible. But as I wrote, probably not you asked, but at least one way to solve the changing size of the panel height when the controls are hidden/made visible.

 

example_layout.gif

Users.zip

Link to comment
Share on other sites

alfr, thank you for your input. Your right it is not exactly how I wanted the end result.

As you know when writing UniGUI apps it is imperative that the results render correctly on the end users hardware which is an absolute must when working with Mobile, however Desktop devices that run at Hi-Resolution (Microsoft Surface etc.) different to the Server/DesignPC hardware are also in need of this precise rendering (one can no longer think like VCL [AlignmentControl:= uniAlignmentServer]).

My goal was to build a UniGUI Form Generator for editing many table fields at once simplifying the coding process of Form Design and Rendering, that is, to use my generator to create the basic form and its associated objects, then at the project level, add the generated pas/dfm files to the project and  tweak to match the project's specific needs).

The "Users" Form(pas/dfm) was one such example.

My goal:-

PanelOne (to claim 75% of the screen) which holds three FieldContainers (each field container holds up to 20 Label/Edit combinations) therefore it may take up more than 75% of the screen, as the panel object has no scroll capabilities (config.scrollable = true) it must be rendered inside a ScrollBox that only claims 75% of the screen realestate - scrolling edits in and out of view as necessary.

PanelTwo set at 25% of the screen holds a HtmlEditor which always displays at the same size and position.

Ideally:-

[ToolBar] always in view at top of form, never moves out of view

[ScrollBox] holds PanelOne and its contents - never claims more than 75% of the screen (PanelOne may require scrolling to access all of the edits)

[PanelTwo] 25% of screen holds HtmlMemo always in view at the bottom of the form and never changes

You could say this is an exercise in getting out of UniGUI ones exact needs rather than bowing down to a not quite ideal result with lots of future enhancements to come.

I would love it if Farshad or Sherzod showed us all how to achieve this requirement above. 

Link to comment
Share on other sites

Ok, I've updated the example to do that. So then the inside height of the PanelOne needs to be allowed to be bigger than the outside - and by also setting AutoScroll=True on this panel, the scrollbar will be shown if insideHeight is larger than outsideHeight.

So I've set flex=1 on PanelOne to take all space after the toolbar panel and the "25% panelTwo" have taken theirs. I moved the toolbar to have the form as its parent, and removed the Scrollbox as it is not needed, and set height=auto on the two inner panels. I also would not use align=alTop etc when using client AlignmentControl. 

example_layout 2.gif

Users (2).zip

Link to comment
Share on other sites

Thank you alfr - your amazing, I was aware about the ToolBar placement but was working on the bigger picture.

You have achieved my goal and although it is an exercise in layouts I will develop from this concept via Auto-Form generation with different variations.

I love UniGUI but the fact that many of the IDE parameter editors are invalid on UniGUI Objects makes it harder to quickly get that perfect display result. It would be amazing if the UniGUI Team could hide or disable useless property editors in the IDE environment for UniGUI Objects. I also look forward to UniGUI objects having full unified ajax implementations rather than the current variations in their implementations.

I hope I can return the favor in the future.

Link to comment
Share on other sites

alfr, I think I have gone brain dead in vertically lining up my check boxes, if you would be so kind, check out my rough and simple generator (my Checkbox Top calcs do not work the same as the Text/Combo Top calcs) - I have tried so many ways I have to stop for a break ? It hard code writes to "C:\Temp".

FormGenerator.exe

Link to comment
Share on other sites

Yes, believe you just needed a break...^_^

You should put the layoutConfig.Margin only on the labels, but have as well put it on the unicheckboxes. So believe below is more how you like to have the checkboxes?

Another option you have is to use the built in FieldLabel on the uniEdit, uniCombo, uniCheckbox, but perhaps you'll then need to work more with the CSS to adjust the margins between the fieldlabel and the control.... 

image.png.bb58d51f291372fef079d969025cd33e.png

 

image.png.871160e3cdfcd348cb8f5cf456682ba9.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...