Bootstrap Layout Options/Tighter Formatting

mi

millermulti 18 Jun, 2014

Hello, I have been using Chronoforms for years and decided to try out V5 for creating a very large form. I have to say that I am very impressed with how far V5 has matured in such a short time. I really appreciate the ability to very easily add masks, and the easy addition of a Honeypot field and a number of other additions. As I build out my form I find myself really wishing for a few features that I am not seeing.
1. When I add a class to a form element it adds the class to the form field, not the DIV that wraps the field and label. I find that as I do more responsive websites, the designers I work with want very tight layouts. This means I need to be able to set the width and float on individual form elements. Right now this is a lot of work, finding each field's row's unique ID and then writing a lot of CSS. One idea, have the ability to assign a Bootstrap size to the wrapper. So in the wizard, a drop down from 1-12. Selecting this adds the class span## to the wrapping DIV. A second option would be to add the Class of the field to the wrapper as well. This way I could add the span## myself or my own custom class like "float_left".
2. In V4 of Chronoforms, I have been using the javascript example you have on your site to automatically move labels from the label tag to inside the form field. This allows for very tight forms, which work great on responsive sites. I would love to see this as a standard feature. The ideal situation would be to have it selectable. For example when you set the Label location, it could be Left, Top, Inside.
Great Job!
--Gary

Gr

GreyHead 19 Jun, 2014

Hi Gary,

1) You might be able to do this more simply using JavaScript to apply the CSS - just a thought.

2) Already exists in CFv5 using the Placeholder option with a blank label.

Bob

mi

millermulti 19 Jun, 2014

Hi Bob, thanks for the response. Great to know about #2.

In regards to #1, lets say I want a single row with City, State and Zip in the row. The City field should be 50% of the width and State and Zip should each be 25% of the width. Using Bootstrap I could assign the classes: span6, span3, and span3 to the respective DIVs and I am done. I then have the option of further styling the labels, fields, margins etc using some custom CSS for each page width option in Bootstrap. You are correct in that I could look at writing some custom javascript to take the field class and apply it to the wrapping DIV although in the case of the project I am working on, I am already out of time.
Thanks again!

Gr

GreyHead 20 Jun, 2014

Hi Gary,

Here's a first - and rather crude - attempt at a workaround to the CSS,

I added this JS to a Load JSaction in the form

jQuery(document).ready(function(jQ){
  jQ('#chronoform-my_form_name input').each(function() {
    var el = jQ(this);
    if ( typeof el.data('bs') !== 'undefined' ) {
      el.parent().parent().addClass(el.data('bs'));
    }
  });
});

Note the my_form_name in there which needs to be updated to the name of your form.

Then add bootstrap classes to a data attribute in the input using the Extra Params box like thisdata-bs=span4
The JavaScript reads the data-bs attribute and applies the value as classes to the parent+parent <div> of the input.

Bob

mi

millermulti 02 Jul, 2014

Answer

Hi Bob, a big thanks for the Javascript code. That gave me a great place to start. I took what you created and tweaked it somewhat. It turns out that radio button and checkboxes are two DIV levels deeper. In order to address this I created a second data variable "data-btn=yes" By adding this to only the check boxes I can add the extra parent levels to the javascript just for those types of inputs. I also needed an extra function to deal with textarea's. If I were a better Javascript programmer I could probably find a way to combine all of the form field types into one function. For me the individual functions worked fine. This script saved me a lot of headaches. Not only was I able to use it to apply bootcamp styles to the main div for each field but it also allows for multiple classes to be applied, allowing for things like custom labels widths.

A couple other notes, with V5, I have been using custom fields to add in formatted text. These also get added inside a DIV which I can not address via a Javascript, so they were a bit of a pain to deal with. In V4 there had been a "Raw Code" option which was great as I could then add the parent DIV in my code. Having this ability back or the ability to add Extra Params for custom code would be very helpful. I also found that the email labels I add in the email action area do not show up in the main Setup tab like they did in V4. Minor but a handy thing to have available.

Here is my tweaked version of your script.


jQuery(document).ready(function(jQ){
  jQ('#chronoform-Application_Form input').each(function() {
    var el = jQ(this);
    if ( typeof el.data('bs') !== 'undefined' ) {
    	if ( typeof el.data('btn') !== 'undefined' ) {
      		el.parent().parent().parent().parent().addClass(el.data('bs'));
    	}else{
      		el.parent().parent().addClass(el.data('bs'));
      	}
    }
  });
});
jQuery(document).ready(function(jQs){
  jQs('#chronoform-Application_Form select').each(function() {
    var el = jQs(this);
    if ( typeof el.data('bs') !== 'undefined' ) {
      el.parent().parent().addClass(el.data('bs'));
    }
  });
});

Gr

GreyHead 02 Jul, 2014

Hi Gary,

Thanks for posting the final version - very helpful.

I agree with you about the Email labels and the lack of a *pure* custom code element. Maybe in a future release we'll see those back again.

Bob

Forums

Bootstrap Layout Options/Tighter Formatting