asked on June 5, 2020

Does anyone know what could cause a form to appear differently in the repository vs how it appears when it still resides in Forms? I've noticed this happening on two of my forms and and it only seems to happen when I "sentence-ify" fields in conjunction with html fields and then use CSS to minimize the empty space. 

Here's what the completed portion of this form looks like within Forms (don't mind that the sentence clearly makes no sense. The fun of testing!):

In case it isn't clear, these are the following fields and their corresponding types. Everything else is an html field.

  • Full-Time (dropdown)
  • Temporary/Seasonal (dropdown)
  • 40 (number)
  • M-F 8a-5p (single line)
  • January 3rd - Whenever (single line)

 

And here's the same form, saved as a .tiff (though I tried .pdf and the result is the same), in our repository:

And at risk of exposing my novice CSS skills, here's the CSS associated with this statement:

/*Sentence*/
	/*"This is a"*/
		#q15 {width: 9%}
	/*Position Status*/
		#q16 {width: 11%}
		#q16 .cf-xlarge {width: 65%}
	/*Position Type*/
		#q14 {width: 19%}
		#q14 .cf-xlarge {width: 100%}
	/*"Position that will be working"*/
		#q17 {width: 23%}
	/*Number of Hours*/
		#q24 {width: 6%}
		#q24 .cf-xlarge {width: 30%}
	/*"Hours per week with a schedule of"*/
		#q19 {width: 27%}
	/*Schedule*/
		#q20 {width: 20%}
		#q20 .cf-xlarge {width: 100%}
	/*"for the following timeframe"*/
		#q21 {width: 23%}
	/*Timeframe*/
	        #q26 {width: 20%}
	        #q26 .cf-xlarge {width: 100%}

I'm sure increasing the field widths via CSS would do the trick, but I'm just wondering if there's something that I'm missing that would allow me to preserve the look of the statement without adding large gaps between each field. Any help would be appreciated!

0 0