Form layout in jquery jTable?

Rune Andersen picture Rune Andersen · Apr 20, 2013 · Viewed 9.5k times · Source

I am using the jquery jtable plugin to edit my data - and it is very good at it - but I can't control the layout of the generated form, I can only get a single column of controls with headers.

Has anyone found a way to layout as a table or something else?

Edit:

I found some sort of solution, if I set all controls to have widt 200 and set:

form.jtable-dialog-form {
  width:440px;
}

div.jtable-input-field-container {
  float: left;
  margin: 0px 5px 5px 0; 
  padding: 2px;
}

I get two columns which is better than before - has anyone found a better solution?

Answer

Praveen Kumar P picture Praveen Kumar P · Aug 25, 2014

CSS Changes

 .custom_horizontal_form_field .jtable-input-field-container{
  width: 400px !important;
 }
 .custom_horizontal_form_field .jtable-input-field-container .jtable-input-label{
   width : 150px !important;
   float: left !important;
 }

Using formCreated event of jTable add the custom class name to the form i.e.,

 formCreated : function(event, data){
        $(data.form).addClass("custom_horizontal_form_field");
    }