Question

Hide Table Column (but leave blank space where it would have appeared)

Version 10 Forms

Updated August 7, 2017

asked on August 7, 2017

I have a form that has two tables. The first is returning lookup data from a sql table and will have several rows. The second table exists to total the rows from the first table and is fixed to one row. The issue I am having is that the first field in both tables is "Date" (I just copied the first table to create the second one), which obviously will not be totaled. I want to have the total columns in the second table appear directly underneath their corresponding columns in the first table, so I would like to just hide the column name and the input cell but leave the blank space to that the other cells line up properly. If I hide the table column using field rules, it moves everything over and spaces out the columns, which doesn't work for this application.

If anyone can tell me how to hide this table column but pad the row so that the spacing still works, I would really appreciate it. For now I can just hide the column label using javascript, but the input box still appears, which doesn't look professional.

0 0

Answer

SELECTED ANSWER

replied on August 7, 2017 • Show version history

I would do this with pure CSS instead of JavaScript since CSS seems to work better when the time comes to store a copy of the form.

You can also target the columns based on name, but you would need to specify the table if you did that since there are technically two "Date" columns.

For example, similar to what Rob said, grab the #q value of the column (not the Table), then you could do the following:

#q100 label, [data-col="q100"] > * {
  display:none;
}

The > * selector will make sure it hides anything under that data column, including the date picker, without hiding the wrapper or changing the size/spacing.

Although it is probably not the way to go in this case since you have multiple tables using the same column names, for future reference you can also use the "data-title" attribute to grab the fields from a specific column:

#q100 label, [data-title="Column Name"] > * {
  display:none;
}

2 0

Replies

replied on August 7, 2017

Hi Melanie,

This snippet should do the trick:

$('#q100 label, .date input, .date img').remove();

Directly target the row header via the ID associated with it (so, replace '#q100' with whatever ID is used on your form) . Add the CSS class 'date' (or whatever you want to call it) to the 'Date' field on the table:

That should do it!

~Rob

1 0

SELECTED ANSWER

replied on August 7, 2017 • Show version history

I would do this with pure CSS instead of JavaScript since CSS seems to work better when the time comes to store a copy of the form.

You can also target the columns based on name, but you would need to specify the table if you did that since there are technically two "Date" columns.

For example, similar to what Rob said, grab the #q value of the column (not the Table), then you could do the following:

#q100 label, [data-col="q100"] > * {
  display:none;
}

The > * selector will make sure it hides anything under that data column, including the date picker, without hiding the wrapper or changing the size/spacing.

#q100 label, [data-title="Column Name"] > * {
  display:none;
}

2 0

replied on August 7, 2017

Thank you to both Rob and Jason for this excellent information. I ended up using the CSS only, and it worked perfectly, both for the display of the form and for the saved version inside Laserfiche.

0 0

You are not allowed to follow up in this post.

Question

Question

Hide Table Column (but leave blank space where it would have appeared)

Answer

Replies

Sign in to reply to this post.