Forums

Hello,

I want to know how can we reduce the vertical spacing between two fields. I read few other posts which says we can do by editing css file but I am not able to find that file to edit. I have attached 2 images. I want to reduce gaps between fields in img1 so that it looks like img2.

Hi poojah12,

The first place to try is to change to the Tight layout setting on the Styles tab of the form. If that isn't enough then you can add Custom CSS using a Load CSS action in the form ON Load event.

Bob

Hi GreyHead,

Thanks for the reply. I tried Tight layout, it has reduced the spacing little bit. But i still want to reduce the spacing and also want to reduce the text box height and increase its width. I am not getting the option of 'Load CSS'. Is it because i created form using Custom code and not 'Wizard Designer'? Pls suggest.

Thanks

Here is my custom code:

<div class="form-group gcore-form-row" id="form-row-title"><label for="title" class="control-label gcore-label-left">Title</label>
<div class="gcore-input gcore-display-table" id="fin-title"><select name="title" id="title" size="" class="validate['required'] form-control A" title="" style="" data-load-state="" data-tooltip="">
<option value="0">Select</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Dr.">Dr.</option>
</select></div></div><div class="form-group gcore-form-row" id="form-row-firstname"><label for="firstname" class="control-label gcore-label-left">First Name</label>
<div class="gcore-input gcore-display-table" id="fin-firstname"><input name="firstname" id="firstname" value="" placeholder="" maxlength="" size="" class="validate['required'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-lastname"><label for="lastname" class="control-label gcore-label-left">Last Name</label>
<div class="gcore-input gcore-display-table" id="fin-lastname"><input name="lastname" id="lastname" value="" placeholder="" maxlength="" size="" class="validate['required'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-email"><label for="email" class="control-label gcore-label-left">Email</label>
<div class="gcore-input gcore-display-table" id="fin-email"><input name="email" id="email" value="" placeholder="" maxlength="" size="" class="validate['required'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-position"><label for="position" class="control-label gcore-label-left">Position</label>
<div class="gcore-input gcore-display-table" id="fin-position"><input name="position" id="position" value="" placeholder="" maxlength="" size="" class="validate['required'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-multi-6"><div class="gcore-subinput-container" id="fitem-code"><label for="code" class="control-label gcore-label-left">Telephone   <font size="1">Country code</font></label>
<div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-code"><input name="code" id="code" value="" placeholder="" maxlength="2" size="2" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div>
<div class="gcore-subinput-container" id="fitem-phone"><div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-phone"><input name="phone" id="phone" value="" placeholder="" maxlength="15" size="15" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div><font size="1">Example 123-456-7890</font></div></div><div class="form-group gcore-form-row" id="form-row-company"><label for="company" class="control-label gcore-label-left">Company</label>
<div class="gcore-input gcore-display-table" id="fin-company"><input name="company" id="company" value="" placeholder="" maxlength="" size="" class="validate['required'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div><div class="form-group gcore-form-row" id="form-row-companysize"><label for="companysize" class="control-label gcore-label-left">Company Size</label>
<div class="gcore-input gcore-display-table" id="fin-companysize"><select name="companysize" id="companysize" size="" class="validate['required'] form-control A" title="" style="" data-load-state="" data-tooltip="">
<option value="0">Select</option>
<option value="1-Less_than_100">Less than 100</option>
<option value="2-500to1000">500 - 1000</option>
<option value="3-1000to5000">1000 - 5000</option>
<option value="4-5000plus">5000+</option>
</select></div></div><div class="form-group gcore-form-row" id="form-row-industry"><label for="industry" class="control-label gcore-label-left">Industry</label>
<div class="gcore-input gcore-display-table" id="fin-industry"><select name="industry" id="industry" size="" class="form-control A" title="" style="" data-load-state="" data-tooltip="">
<option value="0">Select</option>
<optgroup label="---Business---">
                                    <option value="BROADCAST/CABLE/TV/RADIO">Broadcast/Cable/Tv/Radio</option>
                                    <option value="CONSTRUCTION">Construction</option>
                                    <option value="ENGINEERING_AND_MANAGEMENT_SERVICES">Engineering & Management Services</option>
                                    <option value="FINANCIAL_SERVICES">Financial Services</option>
                                    <option value="INSURANCE">Insurance</option>
                                    <option value="LEGAL">Legal</option>
                                    <option value="MANUFACTURING">Manufacturing</option>
                                    <option value="MEDIA_ENT_ARTS">Media/Entertainment/Arts</option>
                                    <option value="NONPROFIT_CHARITY">Non-Profit/Charity</option>
                                    <option value="OTHER_INDUSTRY">Other Industry</option>
                                    <option value="PRINTING_AND_PUBLISHING">Printing and Publishing</option>
                                    <option value="PROFESSIONAL_SERVICES_(BUSINESS)">Professional Services business</option>
                                    <option value="PROFESSIONAL_SERVICES_(TECHNICAL_WEB_IT)">Technical/Web/IT</option>
                                    <option value="REAL_ESTATE">Real Estate</option>
                                    <option value="RETAIL_WHOLESALE_TRADE">Retail/Wholesale/Trade</option>
                                    <option value="SERVICES">Services</option>
                                    <option value="TECHNOLOGY/HIGH_TECH">Technology/High Tech</option>
                                    <option value="TELECOMMUNICATIONS">Telecommunications</option>
                                    <option value="TRANSPORTATION_AND_PUBLIC" utilities="UTILITIES">Transportation</option>
                                    <option value="UTILITIES">Utilities</option>
                                  </optgroup>
                                  <optgroup label="---Creative---">
                                    <option value="ADVERTISING/MARKETING_AGENCY">Advertising</option>
                                    <option value="ARCHITECTURE">Architecture</option>
                                    <option value="FILM/VIDEO/ANIMATION_PRODUCTION">Film/Video/Animation Production</option>
                                  </optgroup>
                                  <optgroup label="---Education---">
                                    <option value="EDUCATION-HIGHER_ED">Higher Ed</option>
                                    <option value="EDUCATION-K-12">K-12</option>
                                  </optgroup>
                                  <optgroup label="---Government---">
                                    <option value="GOVERNMENT-FEDERAL">Federal</option>
                                    <option value="GOVERNMENT-MILITARY/AEROSPACE" & defense="DEFENSE">Military/Aerospace & Defense</option>
                                    <option value="GOVERNMENT-STATE/LOCAL">State/Local</option>
                                  </optgroup>
                                  <optgroup label="---Life Sciences---">
                                    <option value="HEALTH_CARE">Health Care</option>
                                    <option value="PHARMACEUTICAL/BIOTECH">Pharmaceutical/Biotech</option>
                                  </optgroup>

</select></div></div><div class="form-group gcore-form-row" id="form-row-services"><label for="services" class="control-label gcore-label-left gcore-label-checkbox">Please select all Organized Change Consultancy services of interest:</label></br>
<div class="gcore-input gcore-display-table" id="fin-services"><div class="gcore-single-column" id="fclmn"><div class="gcore-checkbox-item" id="fitem"><input name="services" id="services" class="A" title="" style="" data-load-state="" data-tooltip="" type="checkbox" value="Strategic Planning" />
<label class="control-label gcore-label-checkbox" for="services">Strategic Planning</label></div>
<div class="gcore-checkbox-item" id="fitem1"><input name="services" id="services1" class="A" title="" style="" data-load-state="" data-tooltip="" type="checkbox" value="Organizational Change & Development" />
<label class="control-label gcore-label-checkbox" for="services1">Organizational Change & Development</label></div>
<div class="gcore-checkbox-item" id="fitem2"><input name="services" id="services2" class="A" title="" style="" data-load-state="" data-tooltip="" type="checkbox" value="Balanced Scorecard & Performance Management" />
<label class="control-label gcore-label-checkbox" for="services2">Balanced Scorecard & Performance Management</label></div>
<div class="gcore-checkbox-item" id="fitem3"><input name="services" id="services3" class="A" title="" style="" data-load-state="" data-tooltip="" type="checkbox" value="Assessments & Surveys" />
<label class="control-label gcore-label-checkbox" for="services3">Assessments & Surveys</label></div>
<div class="gcore-checkbox-item" id="fitem4"><input name="services" id="services4" class="A" title="" style="" data-load-state="" data-tooltip="" type="checkbox" value="ISO9000:2000" />
<label class="control-label gcore-label-checkbox" for="services4">ISO9000:2000</label></div>
<div class="gcore-checkbox-item" id="fitem5"><input name="services" id="services5" class="A" title="" style="" data-load-state="" data-tooltip="" type="checkbox" value="Quality & TQM" />
<label class="control-label gcore-label-checkbox" for="services5">Quality & TQM</label></div>
<div class="gcore-checkbox-item" id="fitem6"><input name="services" id="services6" class="A" title="" style="" data-load-state="" data-tooltip="" type="checkbox" value="Performance appraisal, HR audits" />
<label class="control-label gcore-label-checkbox" for="services6">Performance appraisal, HR audits</label></div>
<div class="gcore-checkbox-item" id="fitem7"><input name="services" id="services7" class="A" title="" style="" data-load-state="" data-tooltip="" type="checkbox" value="Training" />
<label class="control-label gcore-label-checkbox" for="services7">Training</label></div>
<div class="gcore-checkbox-item" id="fitem8"><input name="services" id="services8" class="A" title="" style="" data-load-state="" data-tooltip="" type="checkbox" value="Re-engineering (BPR)" />
<label class="control-label gcore-label-checkbox" for="services8">Re-engineering (BPR)</label></div>
<div class="gcore-checkbox-item" id="fitem9"><input name="services" id="services9" class="A" title="" style="" data-load-state="" data-tooltip="" type="checkbox" value="Others" />
<label class="control-label gcore-label-checkbox" for="services9">Others:</label><textarea name="Otherneed" id="otherinfo" placeholder="" rows="3" cols="40" class="form-control A" title="" style="" data-wysiwyg="0" data-load-state="" data-tooltip=""></textarea></div></div></div></div><div class="form-group gcore-form-row" id="form-row-additionalinfo"><label for="additionalinfo" class="control-label gcore-label-left">Please provide any additional information describing your current organization:</label>
<div class="gcore-input gcore-display-table" id="fin-additionalinfo"><textarea name="additionalinfo" id="additionalinfo" placeholder="" rows="3" cols="40" class="form-control A" title="" style="" data-wysiwyg="0" data-load-state="" data-tooltip=""></textarea></div></div><div class="form-group gcore-form-row" id="form-row-howdidyouhear"><div class="gcore-input gcore-display-table" id="fin-howdidyouhear"><select name="howdidyouhear" id="howdidyouhear" size="" class="form-control A" title="" style="" data-load-state="" data-tooltip="">
<option value="0">How did you hear of us?</option>
<option value="Search_Engine">Search Engine</option>
<option value="Current/Past_Client">Current/Past Client</option>
<option value="Collegue/Friend">Collegue/Friend</option>
<option value="Trade/Print_Publications">Trade/Print Publications</option>
<option value="Journal_of_Organized_Change">Journal of Organized Change</option>
</select></div></div><div class="form-group gcore-form-row" id="form-row-register"><div class="gcore-input gcore-display-table" id="fin-register"><input name="register" id="register" type="submit" value="Contact Us" class="btn btn-default form-control A" style="" data-load-state="" /></div></div>

Hi poojah12,

If you go to the Form Editor then the Setup tab you should either be able to click the CSS tab (if you are using the Simple Wizard) or drag in a Load CSS action to the On Load event (if you are using the Normal/Advanced Wizard).

Bob

I got the CSS tab under Set Up. Now which class or div i should be editing?

Thanks

Please help Mr. GreyHelp

Hi poojah12,

Hard to say - it depends on what you need to change. If you use your browser web developer tools you can see what CSS is being applied and test the changes you want to make.

Bob

Alright. Just tell me where is this class defined "class="gcore-input gcore-display-table"?

Hi poojah12,

The class is defined in the HTML. The CSS that is related to it you can see using your browser web developer tools - they will tell you exactly which CSS and which file it is in. And you don't need to know as you can over-ride it using CSS in a Load CSS action in your form ON Load event.

Bob

Hi GreyHead,

I did what you said. I am able to reduce height of the text boxes and reduce the vertical spacing between every two text boxes.But I am not able to increase the width of the text boxes. Can you please inspect and let me know where I need to override or edit?

Thanks

Hi poojah12,

Please post a link to the form so I can take a quick look - I don't' see one here.

Bob

http://safehandindia.com/orgch/feedbackform.html

Hi poojah12,

One way is to use the element ids to get full control. Though that means a few lines of CSS.

If the Bootstrap classes do what you need you can use them by changing the class='A' in your HTML. The ChronoForms CSS is like this:

.gbs3 .SSS {width: 30px !important;}
.gbs3 .SS {width: 70px !important;}
.gbs3 .S {width: 110px !important;}
.gbs3 .M {width: 230px !important;}
.gbs3 .L {width: 350px !important;}
.gbs3 .XL{width:430px !important;}
.gbs3 .XXL{width:500px !important;}
.gbs3 .A{width:auto !important;}
.gbs3 .F{width:100% !important;}

Bob

Hi GreyHead,

I have figured out the solution for the width issue. Now I have one last question. In the contact us form you can see the last check box item 'Others' I wanted the text box just beneath it to come beside it .

<div class="gcore-checkbox-item" id="fitem9"><input name="services" id="services9" class="A" title="" style="" data-load-state="" data-tooltip="" type="checkbox" value="Others" />
<label class="control-label gcore-label-checkbox" for="services9">Others:</label><input name="others" id="others" value="" placeholder="" maxlength="" size="" class="validate['required'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div></div>

This is the code.

Hi poojah12,

Add style='float:right;' to the input and set the width of the parent div.

Bob

Hello GreyHead,

I did what you said and its working accordingly. Thank you.

One more issue I faced I.e, I created a copy of this same form renamed it and changed few field labels thats it. But the structure looks different. The float right causes the textbox to move to absolute right. And even labels are occupying more than one line. I tried altering the width of the labels via console but they dont fall in a single line still. And because of this the vertical spacing between every text box looks uneven. Any suggestions?
Www.safehandindia.com/orgch/wbt.html is the link to the copy of the previous form.
Thanks,

Hi poojah2,

My guess is that you haven't set the form Style to tight?

And the box is floating to the end of very long check-box label. You can add some right padding if you want to move it back - or set the width of the form - or use shorter label.

Bob

Hello GreHead,

I did tight layout. Spacing is proper now. But the text label is not moving to the left side. I tried adding padding right to label and also padding left to input. But no effect. The label of the checkbox is 'Other/Autres:' with no spaces at all. Pls suggest.

Sorry not text label it is text box

Hi poojah12,

margin-right appears to work OK

Bob

Hi GryHead,

margin-right to check box label right?

Hi poojah12,

To the Other text input but you don't need to ask me for basic CSS stuff - use your browser web developer tools and try it out.

Bob