Why is this grey line suddenly showing up under each of my collection boxes on this one form?
SOLUTION!!! After many hours of testing and testing, I finally found a way to get rid of the scroll bar.
REMOVE THE “overflow-x:scroll;” PART OUT OF “.myTable.cf-table-block {overflow-x:scroll; overflow-y:hidden;})
That's the browser's scroll bar showing up. It usually means that something is too wide for the parent element to contain. Do you have any custom CSS that is acting on this part of the form?
Thanks, Devin. Sorry, I've been home sick for a few days. CSS? Answer is Yes:
/*Field Formatting to remove spaces between columns in the table*/
.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;}
And this CSS isn't perfect, it is still leaving too much space after the last column and not the same amount of space between all the columns:
Form is fixed width 1000. Any ideas on how to do it differently? I would prefer it to be a complete boxed table/grid with no empty spaces.
UPDATE: I was able to get rid of the blank space just before the X;s on the right by adding "thead th:last-child {width:10px;}" on another line, however, everything I try to get the scroll line to be gone does not work. I have changed every column to try to force each to be no more than 12% (5 columns) and 5% (2 columns) and also tried to change the column width with this CSS, but nothing works!
.myTable th, .myTable.cf-table th.col0, .myTable td {width:90px;}
SOLUTION!!! After many hours of testing and testing, I finally found a way to get rid of the scroll bar.
REMOVE THE “overflow-x:scroll;” PART OUT OF “.myTable.cf-table-block {overflow-x:scroll; overflow-y:hidden;})