Question

Customize field spacing with CSS/JavaScript

Forms Version 11

Updated September 5, 2023

asked on August 31, 2023

I have to use fields vs a table for data that really should be a table due the inability to format a number we are pulling in from a lookup view as I wish in the table. I want to reduce the space between the fields. I have customized the theme to lower the space as much as I am comfortable with on the form as a whole. Is there a way, with CSS or JavaScript, to reduce the space between the fields for those particular fields only. I essentially want the space between the makeshift "rows" below to be about half as tall as they are:

0 0

Replies

replied on August 31, 2023

Can you provide more information about why you can't use a table? I'm not sure I understand what formatting you can do with the numbers in standalone fields that can't be done in a table.

0 0

replied on August 31, 2023 • Show version history

I apologize. You are correct, I did find that function.

Here's the other obstacle I have not yet been able to overcome when trying to use a table on this particular form. When pulling data over by using a stored procedure. See data points for each row below. When I attempt to do this with a table, even if I have chosen a fixed number of rows, I am unable to select data points for each row, only for each column of the table. Or at least, I have not found a way to do so.

Also, the ability to use scripting to alter the spacing on just a portion of the form, could prove useful at other times.

0 0

replied on August 31, 2023 • Show version history

Is your stored procedure returning a single row at a time, or is it returning all rows at once? That is going to make a big difference.

It sounds like the issue is more about how the data is being retrieved/returned because the only reason you should have to set data points per row is for single row lookups.

The setting for a Fixed number of rows is not really applicable to lookups if you're using the "add as new row" option in the lookup. The row settings on a table are primarily about what users can add/remove.

Either your stored procedure should be returning all the rows in that format and populating both columns of the table with "as new rows" enabled, or if the stored procedure only returns a single result, then the "source" value for the lookup should be in the same row.

It's hard to say much without more specifics, like what exactly the stored procedure returns, the input parameters, how the lookup is configured, and exactly what is "wrong" about the results you get with your current configuration, but I've done many things like this before so I know Forms is capable.

As far as the CSS goes, that will depend on whether you're using the Classic designer or the Modern designer because they are substantially different.

Also helps to know what other CSS you're already using because it looks like you have the labels hidden, but based on the spacing it seems like only the visibility is changed and not the actual display property because when I hide labels with the display property the fields end up much closer together.

For example with display:none; I get this,

but visibility:hidden; looks like this and is a lot more like what you're seeing

The difference there is that display:none; means it doesn't render at all so it doesn't affect layout/spacing, but visibility:hidden; only makes it invisible and doesn't stop it from affecting the layout/spacing.

0 0

replied on September 1, 2023 • Show version history

I only use the Classic Designer. The only other CSS I'm using here is to affect the fields so that they are side-by-side, I have a blank Field Label for all except the first row which is why you don't see the labels, but do see the space where the label would be. Here is the script I'm using for the width to have 2 fields per line:

0 0

replied on September 1, 2023

Then that's the reason for the space. You just need to add a class to those fields and hide the label and prevent it from taking up space.

Probably just a NoLabel class to the appropriate fields, then do the following:

.NoLabel .cf-label {
     display: none;
}

But I still think this would be more manageable with a table, it just needs the right configuration.

0 0

replied on September 5, 2023

Thanks, Jason!

0 0

You are not allowed to follow up in this post.

Question

Question

Customize field spacing with CSS/JavaScript

Replies

Sign in to reply to this post.