Fields in line in multi column layout

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
Post Reply
SkayyHH
Veteran Member
Posts: 425
Joined: 2015-04-27 21:18

Fields in line in multi column layout

Post by SkayyHH » 2020-08-12 05:38

Hello Jan,

is it possible to get the fields all in the same size in the multi column layout? My fields and elements they are not in line with the other fields. Dropdown fix didn't quite help.

And how did you get the lookups flat with the dropdown fix in your docs on your website? Mine still have the original appgini design. Only the buttons and the distance between the labels have changed.

Thank you very much, Kai

Image

Image


User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Fields in line in multi column layout

Post by jsetzer » 2020-08-12 07:47

Hello Kai,

(1) there is no function in AppGini Helper Javascript Library for changing the height of all (single-line) form-controls and giving them the same height. If you want to try on your own, I think lookups and dates (year-, month-, day-selector + button) will be most complicated because they are a combination of controls placed inside a div. Also Checkboxes and Option-list (as dropdown or as radios) may be complicated to adjust to all other controls.

(2) I have changed a couple of css styes like border-radius, padding, margin and border-column-colors for making it "flat".

Regards,
Jan

@Olaf: I can see his uploaded pictures.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

SkayyHH
Veteran Member
Posts: 425
Joined: 2015-04-27 21:18

Re: Fields in line in multi column layout

Post by SkayyHH » 2020-08-12 07:54

Hello Jan,

many thanks. I didn't know exactly whether your scripts act with that. Then I do that with css.

Many greetings, Kai

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Fields in line in multi column layout

Post by jsetzer » 2020-08-13 11:04

@Kai and @all customers facing a similar issue:


Please remember that our multi-column layout feature is a multi-COLUMN-layout:

POWERPNT_wxiBHsxiAw.png
POWERPNT_wxiBHsxiAw.png (13.63 KiB) Viewed 1617 times

The issue

Different controls have different heights, for example an input has a different height than a textarea.

POWERPNT_Nrjck45p1t.png
POWERPNT_Nrjck45p1t.png (11.15 KiB) Viewed 1617 times

The top-position of a follow-up control depends on (top+height+margin) of the control above, not on y-position of any "nearby" control in column to the left.

The following drawing should be good for illustration:

POWERPNT_Dnbrtv4a0t.png
POWERPNT_Dnbrtv4a0t.png (10.12 KiB) Viewed 1617 times

So this is exactly what is happening here:

POWERPNT_l3JURvghOT.png
POWERPNT_l3JURvghOT.png (46.8 KiB) Viewed 1617 times

This is by design. It is not a software bug but an error in reasoning: "thinking in rows".

Multi-column layout has been designed for "thinking in columns":

POWERPNT_Sdt9cIRRpM.png
POWERPNT_Sdt9cIRRpM.png (54.18 KiB) Viewed 1617 times

Another example

chrome_pnikJGdBgK.png
chrome_pnikJGdBgK.png (62.15 KiB) Viewed 1617 times

Alternatives

So, if you are trying to mimic a vertically-aligned layout, you should use the inline-feature (https://appgini.bizzworxx.de/products/j ... ine-fields) or build your layout differently:

POWERPNT_hUJaI7VTt3.png
POWERPNT_hUJaI7VTt3.png (12.61 KiB) Viewed 1617 times

I really hope this will help understanding multi-column layout. Any feedback appreciated!

Kind regards,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Post Reply