Question

Laserfiche Lounge

Need to eliminate the space between inline block fields.

Forms

Updated January 8, 2019

asked on January 3, 2019 • Show version history

I have a collection of 12 fields that need to be displayed inline block style.

I am using 2 classes to manage the fields differently in 2 groups and allow sizing independently where needed. The issues are that there is space between the fields that I need to remove to maximize the field input sizes and also they are not centered with respect to the labels and are instead offset to the right it appears.

I suspect that my limited knowledge is a factor here but can't seem to find an example that works.

Please see screen capture, CSS and field IDs.

I should mention that I did try using the actual IDs instead of classes but seem to have the same issue.

LF-Case199151-Capture.JPG (45.86 KB)

| Download

CSS-Fields.txt (1.31 KB)

| Download

CSS.txt (168 B)

| Download

0 0

Replies

replied on January 6, 2019 • Show version history

Hi Todd,

The space ahead the field appears because the padding of its parent element is configured "10px". To remove it, please try to add minus margin for the cf-field, for example,

.LineItemsInvmed .cf-field {margin-left:-10px;}
.LineItemsInv .cf-field {margin-left:-10px;}

With this CSS, the space will be eliminated. See this screenshot.

Then you can configure the field width as you like by using "width: xxx", which you already did.

Hope it helps.

2019-01-07_1356.png (25.06 KB)

| Download

0 0

replied on January 7, 2019

Thanks Yuqin, I tried adding those lines to the 2 classes involved and commented out the existing cf-field width lines. This helped with all fields except GL description. Can you attach the complete CSS that got you the result depicted?

I have attached another txt file with my CSS including changes.

Thanks again.

LF-Case199151-Capture-AfterChanges.JPG (36.93 KB)

| Download

CSS-AfterChanges-Jan7-2019.txt (2.43 KB)

| Download

0 0

replied on January 7, 2019

Sorry Todd, I didn't make it clear enough. Please just keep the existing width lines and add the minus margin lines in addition.

My complete CSS as follows. (For the form named "Master-V34-OCAD-Expense Reimbursement Form" of the process I got from the support case)

.TwoPerLine{display: inline-block; width:47%;} 
.TwoPerLine {position:relative;} 
.TwoPerLine .cf-medium {width:97%;} 
.TwoPerLine .cf-small {width:97%;} 
.LineItems{display: inline-block; width:25%;} 
.LineItems .cf-medium {width:110%;} 
.LineItems .cf-small {width:97%;} 
.LineItems {margin: 0 auto;} 
.LineItemsInv{display: inline-block; width:8%; margin-right:0rem;/*; margin: 0 auto;*/}
.LineItemsInv .cf-small {width:90%} 
.LineItemsInv .cf-field {width:100%; min-width:0; margin-left:-10px;} 
.LineItemsInvmed {display: inline-block; width:9.5%; margin-right:.5rem;}
.LineItemsInvmed .cf-small {width:85%;}
.LineItemsInvmed .cf-medium {width:110%;}
.LineItemsInvmed .cf-large {width:126%;}
.LineItemsInvmed .cf-xlarge {width:115%;}
.LineItemsInvmed .cf-field {width:100%; min-width:0; margin-right:1rem; margin-left:-10px;}

0 0

replied on January 8, 2019

Thanks for the followup Yuqin,

I tried commenting out everything I already had in CSS and copied in your version.

Still no luck as I need the Account Numbers field entry box to accommodate 1 more digit but it just overlaps the Description box if I increase the % on the .cf-large. As you can see there is a lot of wasted space between most fields except the one I need to widen called Account Numbers.

My form is set to 1200px in case that matters. I am wondering if I will need to abandon classes all together and start specifying fields individually but it seems that there is adequate space if I could just eliminate the wasted space and increase the .cf-large input box without overlap. I thought there was an advantage in using classes also to allow easy changes going forward?

Any further ideas ?

Thanks again.

LF-Case199151-Capture-AfterChanges-Jan8-2018.JPG (57.2 KB)

| Download

0 0

replied on January 8, 2019

Fyi Yuqin,

I was able to work around the issue by putting this font size adjustment in: input {font-size:12px;}
div {font-size:12px;}.

Any thoughts on the above to address the field space issue would still be helpful.

Thanks again.

0 0

You are not allowed to follow up in this post.

Question

Question

Need to eliminate the space between inline block fields.

Replies

Sign in to reply to this post.