V7 - form design - merge rows

[johntalbott]

The approach that I used is little more involved than the approach shared by Support. But if you are looking for an alternative, here is what I did. Everything below is using the Staff Entry form of the CRM sample application.

Step 1. Put the controls that are getting pushed down the form into the same row as the tall control.

entryformconfig2.png (156.33 KiB) Viewed 22685 times

Step 2. Add id's to the attributes in the form to make it easier to refer to them using jQuery

fieldswithids2.png (131 KiB) Viewed 22685 times

Step 3. Add a Render script to remove display and width values in the CSS of the container for each field

Code: Select all

$("#lastname").closest (".form-group").parent().css( {"display":"", "width":""});
$("#email").closest (".form-group").parent().css( {"display":"", "width":""});
$("#jobtitle").closest (".form-group").parent().css( {"display":"", "width":""});
$("#loginname").closest (".form-group").parent().css( {"display":"", "width":""});
$("#password").closest (".form-group").parent().css( {"display":"", "width":""});
$("#accesslevel").closest (".form-group").parent().css( {"display":"", "width":""});

[aware_support]

The approach suggested by us only works for text areas. If you use pictures they should be already covered by the standard CSS settings and should not produce this gap.

[customaware]

The approach suggested by us only works for text areas. If you use pictures they should be already covered by the standard CSS settings and should not produce this gap.

Please explain what you mean by this and provide a sample bsv to demonstrate.

[pureist]

the Picture/Image upload control has never expanded the row height, either in a single column form, or multiple column form.
The control itself expands when a picture/image has been uploaded (to display the image) but it overlays controls/attributes below it, like it is floating over the top of the them, rather than expanding the row.
Attached is a bsv demonstrating. Create and new Regular User and attach a picture.

THE OUTSANDING PROBLEM, however, is that the Document upload control which works exactly the same way as the image upload control (uploads a file), DOES expand the row when it expands, as well as when the form is first loaded.
And it is also not the same default dimensions as the Image upload control.
Support needs to adjust the css on the Document upload control so it works like the Picture upload control in that when it expands it overlays the controls below and does not expand the row.
And while doing that, also adjust the defaiult dimensions of the document upload control to be the same as those of the Picture upload control, for the sake of uniformity.

twocolformwithPictandDocattr.zip

(34.6 KiB) Downloaded 717 times

The approach suggested by us only works for text areas. If you use pictures they should be already covered by the standard CSS settings and should not produce this gap.

Please explain what you mean by this and provide a sample bsv to demonstrate.

[PointsWell]

This issue also arises when you use a map image in the second column

[Bryan]

I am prepared to create a custom css file but I am not sure where to start on this one. Any tips/steps to accomplishing this?

Also, if I create a custom css file will upgrading to a newer version of AwareIM remove it? Just going from past experience customization outside the BSV is a nightmare to manage and I try to avoid it as much as possible.

[johntalbott]

Create folder with the same name as your BSV under Custom\CSS\

Example:
C:\AwareIM64\Tomcat\webapps\AwareIM\Custom\CSS\YourBSVName\YourCSSFile.css

I don't believe an update will overwrite your CSS, but I would not count on it. ALWAYS create a backup copy of all custom files before updating.

[Bryan]

I was able to implement the css file as described by support and johntalbott. Thank you.

Adding this however presents the following issue. Notice the grid going over top of the Save button.

Rightlist copy.png (119.16 KiB) Viewed 22099 times

[Bryan]

Any help on this one.

My main dev machine bricked on me so I migrated over to a windows machine. I can recreate the css file but would prefer a better solution if it exists now.

[rbross]

Using this css :/* Note field Spacing*/
.aw-column-multi textarea {
position: absolute;
}

You can have a form that looks like this: The Instructions attribute is 45 pixels high.

MulticolumnText.JPG (42.49 KiB) Viewed 21487 times

Here is another example of a larger text attribute with more attributes to the left. The Directions attribute is 200x200 pixels in this example.

SampleLargeTextAttrbute.JPG (41.64 KiB) Viewed 21487 times