Question

Remove White Space in Table Formatting

Forms

Updated June 13, 2023

asked on November 21, 2017 • Show version history

I'd like to make a table in LFForms that looks more like a spreadsheet. I've tried

.cf-table-block{padding:0!important} and it doesn't work like I'd like it to work. I'll attach what my current table looks like and what I'd like my table to actually look like. Any assistance is welcomed! It would be cook if I could add a table that may be wider than the screen also that would have a scrollbar at the bottom...

Currently:

Desired:

0 0

Answer

SELECTED ANSWER

replied on November 21, 2017 • Show version history

Hi Kathy,

Try this:

.myTable.cf-table-block {overflow-x:scroll; overflow-y:hidden;}
.myTable th, .myTable.cf-table th.col0, .myTable td {width:100px;}
.myTable td {padding: 0px!important;}
.myTable .cf-field {padding: 0px!important; width:100%!important;} 
.myTable input {width:100% !important;}

Lines 1-2: Fixes columns to a width of 100 pixels. If it overflows horizontally, a scrollbar will show up. You can target each column individually if you want different widths.

Line 3: Removes padding around each column cell

Line 4: Removes padding around the actual input field

Line 5: Forces the input field to take as much width as possible (removes the vertical gap between columns)

3 0

View 1 previous reply

replied on November 22, 2017

Thanks Tri, this is a very elegant solution. I tested with a few different data types and had strange results. Drop-down (too short), Currency (extra line for the $), and Date (calendar icon on the next line). Do you have suggestions for those cases?

0 0

replied on June 5, 2019

Hi Erik,

Put this in Javascript. This will get rid of the date picker icon. It will still show up when user clicks on that field so they can select date. Just replace #q2 with the field ID. If the date is part of a table, use the table field ID. Hope this helps! There is also a topic in answers regarding how to hide the currency icon.

https://answers.laserfiche.com/questions/68510/How-to-hide-Currency-Symbol-in-Currency-Field>

1 0

replied on June 1, 2020

I had the same issue. I see that there is always padding to the right of my dropdown fields. I would like to minimize that. I also tried @████████'s javascript above and referenced the correct column of my table and the date picker icon still shows up.

Thoughts?

0 0

replied on June 13, 2023

Hey,

Do you think it's possible with the new conceptor ? I just try and it's doesn't work :(

Ty :)

0 0

Replies

replied on November 21, 2017

I did something similar one day and among different tweaks, this one below gave me the basics. I'm no expert in CSS, I got it from a tutorial, but it worked for me. It might get you started hopefully.

/* styling the table */
table td tr {
 border: 1px solid #000;
  border-collapse: collapse;
  padding: 0px;
}

td {
 border: 1px solid #000;
 padding: 0px;
}

2 0

replied on November 21, 2017

This is helpful, but what I'm really looking for is the actual fields to touch.

0 0

You are not allowed to follow up in this post.

Question

Question

Remove White Space in Table Formatting

Answer

Replies

Sign in to reply to this post.