Jump to content

Formular Layout Example


Recommended Posts

Hello,

I'm trying to create a UniGuiMobile application.
I'm having big difficulties with layouting my application.
I've looked into the UniGuiMobile touch examples. I've found no examples that shows what i'm looking for.
The examples are quite simple. I need to layout a lot of edit fields with a working scroll box.
I found follow article on the Developer's Guide. http://www.unigui.com/doc/online_help/user-interface.htm
It is quite helpful but its written for UniGuiWeb (not Mobile).
As example there is no "Columns" property for the TUnimFieldContainer.
A gridstyle container would be really cool for the future.

Can somone create an example application with the layout showed in the attachment ?

Requirements:
- Scrolling needs to work
- Using only UniGuiMobile Components
- Label needs to be close to the UnimDBEdit
- The DBEdits needs to be equally paced between eachother. (picture is only a scetch)
- If the users enters a edit field the virtual keyboard get's showed. The virtual keyboard must not cover the field.

Best Regards,
Int3g3r

FormularLayout.JPG

Link to post
Share on other sites
21 minutes ago, Int3g3r said:

working scroll box.

 

add JS-code to TUnimScrollBox.ClientEvents.ExtEvents

function painted(sender, eOpts)
{
    sender.bodyElement.dom.setAttribute('style', 'overflow-y:auto !important'); 
    sender.bodyElement.select('.x-dock .x-dock-vertical').setStyle('overflow-y', 'auto');
}

 

Link to post
Share on other sites

TUnimFieldContainer

Layout = hbox

LayoutAttribs

Align = stretch

Pack = justify

 

unimSpinner1.Flex = 1

unimSpinner2.Flex = 1

unimSpinner3Flex = 1

Screenshot_54.jpg

Screenshot_55.jpg

  • Like 1
Link to post
Share on other sites
43 minutes ago, Int3g3r said:

- Label needs to be close to the UnimDBEdit

fieldLabel, fieldLabelAlign, fieldLabelWidth (in percents %)

Screenshot_56.jpg

Link to post
Share on other sites

Hello,

Thank you for the instructions.

I have still some problems:
- How do i layout not equal width input fields ? (screenshot)
- Is it not possible to set the width (%) and margins and the space gets equally adjusted ?
- Is it possible to adjust the space between the label and Edit ? In my scetch the label is right above it.
   In the unigui application is space between label and edit, i would like to shrink that space.
 

layout2.JPG

Link to post
Share on other sites
22 hours ago, Int3g3r said:

- Is it not possible to set the width (%) and margins and the space gets equally adjusted ?

i do not know

try

Link to post
Share on other sites
22 hours ago, Int3g3r said:

- Is it possible to adjust the space between the label and Edit ? In my scetch the label is right above it.

 

On 10/23/2020 at 1:49 PM, x11 said:

use Margin

0 1 = 0px 1px 0px 1px

margin := '0 5';

Link to post
Share on other sites
×
×
  • Create New...