Add a background color to a form layout

Help Center Get Answers
1

I'd like to be able to add a background color to a layout group on a form, to help people distinguish between areas of the input. Example mockup:


Is this possible using layout groups, or CSS, or other objects / coding?

If not, it is possible to add a graphic header or divider by injecting an HTML / javascript line at a specific place in the form? 

Thanks,

Doug

2

I'm not sure what type of input field you have - it looks like a paragraph. If so, see an example below:

textarea#field_62 {

   width: 505px !important;

   height: 80px;

   line-height: 1.2;

}

For a standard 'input' field, this may not work, as the height is determined by the line-height and padding. For example, when I wanted to change the height of cells in a table I used the following. You could probably apply this technique to an input field as well.

#view_103 tbody td {padding: 2px 5px !important;}

#view_103 thead th {padding: 2px 5px !important; line-height: 18px;}

3

Michael, I wasn't able to get this syntax to work. Can you be more specific about the labels? Here's the information:

Desired height: 80px

4

very nice!  

5

You might try something like this:


input#field_140 {

  width: 56px !important;

}

I have used this method on paragraph fields, i.e. - textarea#field_xx


6

How about changing the width / height of one field on a layout? Looking through the forums I found this code suggested:


#view_52_field_14_chzn > a {width: 300px !important;}


Here's a screenshot of the inspector from Chrome:



The view is #115, so I tried this CSS:


#view_115_field_140_chzn > a {height: 56px !important;}


...and a bunch of other variations, including #view_115-field_140 (with a hyphen)... but it's not changing the field at all. Any suggestions? 


7

Hi.

That's contained in the first code line


 

/*style the form group */
/*your view_ID here*/ > form > ul:nth-child(n) > li { border: solid 1px lightgrey ; border-radius: 5px; padding:10px; min-width: 50% }

 see the padding: 10px; 


if you want all input fields to be the same width, regardless of the field type that's another story

8

This is awesome!! I'm going to have a lot of fun figuring this out... thank you Stevan. 


Now of course I have questions. 


1) Can I target just the left or right column in a 2-column form layout?


2) Any idea how I can extend the form group area to add some padding around the input fields? Currently it looks like this:


... and I'd like it to look more like this:


Thanks!

9

It is possible using CSS.

Example of code to achieve this

 Code ( for 1 col form)

/*style the form group */
/*your view_ID here*/ > form > ul:nth-child(n) > li { border: solid 1px lightgrey ; border-radius: 5px; padding:10px; min-width: 50% }

/* Set yellow and red for every other form group (li) */

/your view_ID here/  > form > ul:nth-child(2n+1) > li { background-color: yellow }

/your view_ID here/  > form > ul:nth-child(2n) > li { background-color: red }