Forums

Hi there,

I setup chronoform and created a form and embeded it in an article. The spacing between two text boxes are too large. I have chosen Tight Layout from the settings and also played with frontforms_tight.css to decrease the spacing. But I just cant find a way to decrease the vertical spacing between a text box and another text box under it.

I also searched the forum and there was only one related post that was not helpful (i did what exactly was said. Everything changes except the vertical space!).

Here is a link to my website: http://tinyurl.com/3oef3fn

And this is the CSS code: (I appreciate your help)

/*  * ChronoCMS (chronocms.com)  * Copyright 2010 - chronocms.com  * license : Commercial  * Redistributions of files must retain the above copyright notice.  */ /*================   FORMS STYLES   =================*/  

.ccms_form_element p { margin-bottom: 9px;} 

.ccms_form_element input, textarea, input[type="file"]  {padding: 4px !important;  border: 2px solid #d3d3d3; margin-bottom: 1px; } 

.ccms_form_element select { padding: 3px; border: 1px solid #d3d3d3; min-width: 100px;} 

/*.ccms_form_element select { min-width: 163px; }*/ 

.ccms_form_element label { float: left; width: 150px; line-height: 18px; margin: 3px 0 6px ; font-weight: bold;} 

.ccms_form_element fieldset  { background-color:#FAFAFA; border:1px solid #EEEEEE; padding:15px; width:auto; } 

.ccms_form_element fieldset legend {font-weight:bold; margin-left:-10px; padding:10px; }  

.ccms_form_element { margin-bottom: 1px; position: relative; padding: 1px 0px 1px 5px; /*border-bottom: 1px solid #dddddd;*/ clear: both;}  


.cfdiv_select select, /*.cfdiv_text input, .cfdiv_text label {float: left; }*/ 


.cfdiv_text label { width: 70px;}   

.small-message, .error-message { line-height: 18px; margin: 4px 0 0 70px; font-size: 11px; display: block; clear: both;} .small-message { color: #999999; font-style: normal; } 

.error-message { color: red;} 

.required input { border-color: #cccccc; background-color: #f9f9f9;} .form-error { background-color: #fff4f4; border: 1px solid #ffd4d4;}   .tooltipimg { position: absolute; top: 5px; right: 10px; line-height: 21px;  color: #999999; } 

.tooltipimg a {display: inline-block; font-weight: bold; color: #999999; line-height: 21px; height: 20px; background-color: #eeeeee; width: 20px; text-align: center;} 

.tooltipimg a:hover { color: white; text-decoration: none;}   

.cfdiv_checkboxgroup label, .cfdiv_radiogroup label,  .cfdiv_checkbox label, .cfdiv_radio label { font-weight: normal; /*margin-bottom: 5px;*/margin: 6px 0 9px; } 

.full_label {width: 70% !important;} 

.cfdiv_checkboxgroup label:first-child, .cfdiv_radiogroup label:first-child,  .cfdiv_checkbox label:first-child ,  .cfdiv_radio label:first-child,  .cfdiv_checkbox label:first-child, .cfdiv_checkboxgroup label:first-child { font-weight: bold !important; margin-bottom: 9px;}  

.ccms_form_element .button {  	background-color: #37a8f0;  	border: 0; 	padding: 5px 7px; 	font-size: 11px;  	color: white; 	text-decoration: none;  }     

.ccms_form_element .button:hover { 	background-color: #999999;   	text-decoration: none;  	}   

/* input sizes */ .small_input { width: 200px;} .medium_input { width: 350px !important; } .big_input, .title_input { width:475px; } 

.title_input { padding: 8px 5px; font-size: 18px; margin-bottom: 15px; float: left !important;}   

/* input types */ .ccms_form_element input[type="checkbox"],  .ccms_form_element input[type="radio"] { border-color: transparent; margin: 8px 9px 0 0; clear: none; }  

/* fixes for radio and checkboxes*/ .cfdiv_checkboxgroup label, .cfdiv_radio label { width: auto; margin-right: 25px;  } 

.cfdiv_checkboxgroup label:first-child, .cfdiv_radio label:first-child { width: 150px; margin-right: 0;} .cfdiv_checkboxgroup label, .cfdiv_radio label, .cfdiv_checkboxgroup input, .cfdiv_radio input { float: left; }  

.label_right{float: left; margin-left: 150px !important;}   

.label_over label:first-child { float: none !important;  } 

.label_over label:first-child { display: block; } .label_over .small-message, 

.label_over .error-message {  margin-left: 0;}  

.radios_over label, .radios_over input {     float: left !important; } .radios_over input {     clear: left !important; }  /* other fixes */ .fc-tbx{ 	z-index:9999; } .validation_label{ 	display:block; 	width:100%; } .chrono_captcha_input{ 	vertical-align:top; }  /*.clear{ 	clear:both; 	visibility:hidden; }*/  .clear:after { 	content:"."; 	display:block; 	height:0; 	clear:both; 	visibility:hidden; }

Hi aliakbari,

The problem is this line in joomla.css (around line 117)

div.item-page .clear {padding: 20px !important}

Changing this may affect other parts of the template though. Try adding this to the Form CSS:

form#chronoform_Banks-Contact-Form div.clear {
  padding:0px !important;
}

Bob

Mr. Grey Head. Thank you very much. I couldve never figured it out without you. I would like to buy you a beer. by all means. Cheers. 😀

Btw, are you also responsible for purchase questions? I'd like to purchase subscription but I really, really dont need any domains (let alone 3 of them!). I wonder if I can get it without all those domains for a better price. Thanks.

Hi aliakbari,

No Max is responsible for subscriptions and he will reply to your Contact Email soon I expect.

You do not 'get' any domains with the subscription; the subscription allows you to use ChronoForms on three different domains.

Bob

Ok I got it. Thanks.

Hi again,

What if I want to move the SUBMIT button, or change the font color on the button. Which line should I change?

Thank you for your help,