Border help around dynamic size fields when three per line

asked on August 18, 2024 • Show version history

Hello Laserfiche Community,

I'm working on a form that I want to add a border around certain fields to create a table-like look, however I'm experiencing some difficulty in making sure the borders are working as intended. The current requested set up is

Multi-line ---- Radio Button ---- Multi-line

This works fine for what I need, however when the user goes to change the vertical height of a multi-line field it creates a gap between the border properties for the field below, as such:

When ideally it would align with the bordering on the other side automatically, like this:

I'm currently just using some basic CSS (border-left and border-right) for the borders, but was wondering if there's anything that can be done to automatically adjust the borders depending on the size of the fields? Simply removing the CSS to change the vertical height of the multi-line fields is an option I want to avoid.

Thank you

0 0

SELECTED ANSWER

replied on August 19, 2024

I think you'd be best to nestle those fields in some kind of container, either a section or an actual table, since the outer borders are currently tied to individual fields I think you'll have a difficult time syncing them up otherwise.

2 0

View 1 previous reply

replied on August 19, 2024

Thank you for the advice. I just did some testing in a blank form through the modern designer and was able to get something like this with both sections and tables (and visual for if anyone else requires this)

As I've already made ~70 rows out of the ~200 needed I'm just going to use the sections as it's just easier, despite the pixel indent between each section that I can't seem to figure out where it's coming from.

1 0

replied on August 20, 2024

Glad you got it sorted!

Try this for the indent:

.fl-section .fl-component {
  padding: 0px !important;}

0 0

replied on August 20, 2024

Hmm didn't seem to work unfortunately. Zooming in it looks like there's a radius styling applied

The only styling I have applied to it is:

#q1
{
	border-top: 2px solid #000000;
	border-right: 2px solid #000000;
	border-left: 2px solid #000000;
	padding: 6px;
	background-color: #F8F8F8;
	border-radius: 6px 6px 0px 0px;
}

#q5
{
	border-right: 2px solid #000000;
	border-left: 2px solid #000000;
	padding: 6px;
}

No big deal though, hardly noticeable among the multitude of questions on this form. Thank you for all your help

0 0

Question

Question

Border help around dynamic size fields when three per line

Answer

Replies

Sign in to reply to this post.