Position:Relative;float:left issue

replied on March 20, 2015

Hi Brandon,

Normally to position fields next to each other you would apply inline-block to both of the values and as long as there was enough horizontal room on the page they would appear side by side. If there wasn't enough room, they would end up stacking.

Displaying fields side by side

In the CSS section of the Script page, insert the following code, replacing ID with the ID of the specified field. You can see the id and class for each field on your form by clicking Show CSS Selectors, which should be enabled by default.

You can display fields side by side using the styling the display property. This is useful if you have more than two fields that should be displayed side by side. With this method you must also specify the width of each element. When the height of each element is different, specify that they should be vertically aligned with the top of their container.

#ID1, #ID2, #ID3 {display: inline-block; width: 30%; vertical align:top;}

http://www.laserfiche.com/support/webhelp/laserficheforms/9.0/en-us/forms/Content/CustomizingYourFormCSS.htm

If this doesn't work it out, would you mind pasting the CSS?

Cheers,

Carl

0 0

replied on March 20, 2015

I was using inline-block but I had show/hide rules on part of the row. When one part of the row was suppose to be hidden it would not hide when it got to the repository. In another post I was told that the inline-block function will not allow for the show/hide rules when a form is being saved to the repository. They had me change to the position:relative, float:left which worked but now I am having field alignment issues.

Here is my code.

.linesix is for putting student# and grade side by side.

.LineOne is for putting first and last name side by side.

code.png (8.6 KB)

form.png (7.5 KB)

0 0

Question

Question

Position:Relative;float:left issue

Replies

Sign in to reply to this post.