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: [upl-image-preview uuid=c1ba6dbb-dc2e-4c44-bdfb-a00b9ddf61af url=https://www.awareim.com/forum/assets/files/phpbb_migrated/1132_dd2581864a999fcf29a5cd7a8805370c alt=emptySpace.png] 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: [upl-image-preview uuid=bca1618f-10e0-4e41-a7e2-5837168ba6df url=https://www.awareim.com/forum/assets/files/phpbb_migrated/1132_a63076af4658bad321e0f21a79da9970 alt=threeColumns.png] 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: [upl-image-preview uuid=95cc6443-f6d0-46ed-a7dc-02b15cbc288a url=https://www.awareim.com/forum/assets/files/phpbb_migrated/1132_e741d0cb2233f251ad021de6ff1a5d6d alt=formDesigner.png] 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-)

Great job. Here’s [url=https://www.awareim.com/forum/d/11328]more css[/url] for the separator.

[quote]I assume this setting is on the attribute level, so it is not on per-form basis?[/quote] No, this was a wish list item so we could easily Hide and make Read Only fields on a Form x Form basis.

Form design with multiple columns, unwanted rowspans fix

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:

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:

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:

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-)

Jaymer

Great job.
Here’s more css for the separator.

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 😃

joben

ACDC wrote
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 😃

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:

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:

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.

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

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.

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.

joben

Jaymer, that's even better!

PointsWell

ACDC wrote
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.