Form design with multiple columns, unwanted rowspans fix

Contains tips for configurators working with Aware IM
Post Reply
joben
Posts: 65
Joined: Wed Nov 06, 2019 9:49 pm
Location: Sweden
Contact:

Form design with multiple columns, unwanted rowspans fix

Post by joben »

This is how we circumvented the problem with a text input field container in Column A adopting the same height as a text area container in Column B, thus wasting a lot of space and ruining the structure of the form.
Here is an example of the empty space:
emptySpace.png
emptySpace.png (14.99 KiB) Viewed 4596 times
The solution I came up with is based on using the separator function combined with some minimal CSS styling.
It can look something like this:
threeColumns.png
threeColumns.png (35.86 KiB) Viewed 4596 times
In this example, I am using only 1 column in the form designer. The separators will behave like columns when we set separator width and float in the CSS. Here are all the settings and CSS styles used for each separator:
formDesigner.png
formDesigner.png (33.31 KiB) Viewed 4596 times
At the moment, I cant come up with a more efficient way to circumvent the issue. I am thinking that the separator lines and labels could probably be removed with CSS as well, but I think the default setting looks pretty neat 8)
Regards, Joakim

Image
Jaymer
Posts: 1948
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: Form design with multiple columns, unwanted rowspans fix

Post by Jaymer »

Great job.
Here’s more css for the separator.
Click Here to see a collection of my tips & hacks on this forum? Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
ACDC
Posts: 1011
Joined: Sat Jun 30, 2007 5:03 pm

Re: Form design with multiple columns, unwanted rowspans fix

Post by ACDC »

In this example, I am using only 1 column in the form designer. The separators will behave like columns when we set separator width and float in the CSS.
Very interesting concept, this used with extra css to remove the separator border and ''not present when applicability rule" could make for nice versatility on the form. The one thing about separators when they are "not present or invisible", there is zero gap space left on the form like there is when using READ PROTECT. I find myself using separators very often to hide attributes because of the zero space

Thank you for this :D
joben
Posts: 65
Joined: Wed Nov 06, 2019 9:49 pm
Location: Sweden
Contact:

Re: Form design with multiple columns, unwanted rowspans fix

Post by joben »

ACDC wrote: Fri Jan 08, 2021 4:07 pm
In this example, I am using only 1 column in the form designer. The separators will behave like columns when we set separator width and float in the CSS.
Very interesting concept, this used with extra css to remove the separator border and ''not present when applicability rule" could make for nice versatility on the form. The one thing about separators when they are "not present or invisible", there is zero gap space left on the form like there is when using READ PROTECT. I find myself using separators very often to hide attributes because of the zero space

Thank you for this :D
We have used the "not present when" functionality for separators a lot lately to hide one or several attributes based on conditions.
Combining it with this CSS style removes unnecessary spacing and lines:

Code: Select all

border:0; padding:0; margin:0;
Related to this is the ability to display informational messages if a certain condition is met or not met:
notice.png
notice.png (9.72 KiB) Viewed 2061 times

The yellow box is just a separator with a "not present when" condition set, containing an HTML row with some basic CSS.

It is a simple and powerful way to display important information without using DISPLAY MESSAGE or REPORT ERROR which is not always a viable solution.


Also, we have discovered another way to circumvent the rowspan issue, but it is not fully tested yet. I will post a solution if we think it's stable enough.
Regards, Joakim

Image
ACDC
Posts: 1011
Joined: Sat Jun 30, 2007 5:03 pm

Re: Form design with multiple columns, unwanted rowspans fix

Post by ACDC »

I have also noted a new feature under presentation rules, by using the Access option you can hide attributes based on a condition, it works very well. Also it doesn't leave a space when it hides it, so this may be better than using the separator workaround

But you cannot use it on references, because references have limited presentation rule options, so the separator will have to suffice
Attachments
Hide.jpg
Hide.jpg (67.48 KiB) Viewed 2022 times
joben
Posts: 65
Joined: Wed Nov 06, 2019 9:49 pm
Location: Sweden
Contact:

Re: Form design with multiple columns, unwanted rowspans fix

Post by joben »

Looks neat. Will try after upgrading.
I assume this setting is on the attribute level, so it is not on per-form basis?
Will still be useful though.
Regards, Joakim

Image
Jaymer
Posts: 1948
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: Form design with multiple columns, unwanted rowspans fix

Post by Jaymer »

I assume this setting is on the attribute level, so it is not on per-form basis?
No, this was a wish list item so we could easily Hide and make Read Only fields on a Form x Form basis.
Click Here to see a collection of my tips & hacks on this forum? Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
joben
Posts: 65
Joined: Wed Nov 06, 2019 9:49 pm
Location: Sweden
Contact:

Re: Form design with multiple columns, unwanted rowspans fix

Post by joben »

Jaymer, that's even better!
Regards, Joakim

Image
PointsWell
Posts: 1115
Joined: Tue Jan 24, 2017 5:51 am
Location: 'Stralya

Re: Form design with multiple columns, unwanted rowspans fix

Post by PointsWell »

ACDC wrote: Thu Jan 14, 2021 12:05 pm I have also noted a new feature under presentation rules, by using the Access option you can hide attributes based on a condition, it works very well. Also it doesn't leave a space when it hides it, so this may be better than using the separator workaround

But you cannot use it on references, because references have limited presentation rule options, so the separator will have to suffice
This is interesting. Does this prevent the attribute being downloaded (ie is a CSS control or is it server controlled)

One thing to note is that presentation rules are not dynamic so you can't use this to control visibility based on another attribute value. Hopefully they can be made dynamic in a very near update.
Post Reply