Two-column edit/create form

[zjakin]

What is the most elegant way to create jtable edit/create form in two or more column layout. For example i have 20 fields to input, in one form it won't fit the screen, so i want to split it into two two columns. Any help appreciated!

[zjakin]

I've struggled to achieve this using formCreated event. Maby i did something wrong, How and where should I inject the appropriatestyles?

[phila42]

Try this in formCreated:

data.form.children(':lt(11)').wrapAll('<div class="col1"/>'); data.form.children(':gt(0)').wrapAll('<div class="col2"/>');

Then define styles for col1 and col2 - all you really need is float:left and float:right.

[zjakin]

Great ADVICE!!!! Thank you so MUCH!!!!

[zjakin]

//HERE IS COMPLETE STRUCTURE, WORKS 100%

css: .col1 { float:left; padding: 5px 10px 5px 5px; width: 45%; } .col2 { float:right; padding: 5px 5px 5px 10px; width: 45%; }

[ahmadnchami]

Great enhancement to the layout ! On a side note, is it doable for more than 2 columns, tried a couple of things with no luck, the third column is being contained inside 'col2'.

Thanks, appreciate the help.

[absdirect]

To get 4 columns working in the dialog box, I used this syntax instead:

formCreated: function(event, data) { $(".jtable-input-field-container").slice(0,5).wrapAll("<div class='col-left'/>"); $(".jtable-input-field-container").slice(5,10).wrapAll("<div class='col-middle1'/>"); $(".jtable-input-field-container").slice(10,15).wrapAll("<div class='col-middle2'/>"); $(".jtable-input-field-container").slice(15,20).wrapAll("<div class='col-right'/>"); },

Then adjusted the css accordingly.

[ghost]

Hey guys,

I posted this question on Stack Overflow and got this simple response:

#jtable-create-form {
    display: block;
    width: 450px;
    -moz-column-gap:40px;
    -webkit-column-gap:40px;
    column-gap:40px;
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count:2;
}

[zjakin]

The solution with formCreated event doesnt work perfectly because when you open edit/create form then close it and open again(withou page reload) - all the styling jquery doesnt work, and you get one long column. Maratlevit answer is good but I suppose it only for css3 so older browsers and IE won't deal with it. Any advice?

[i-e-java]

Maratlevit answer is good but i have a form that designed. how can use this form as new form or edit form in jtable?

[SnrDidcot]

Thanks for this posting. to get the following form

For this I :

1, Resized the parent form using data.form.parent().css('width','980px').css('height','600px'); etc

2, Then added a css called row and overrode the standard jtable-input-field-container, as

div.row { float: left; width: 970px; }

    div.jtable-input-field-container
    {
        float: left;
        margin-right: 20px;
    }

And Finally, Sliced it up in formCreated

$(".jtable-input-field-container").slice(0,3).wrapAll("

"); // Slice Parameters are Start Stop $(".jtable-input-field-container").slice(3,7).wrapAll("

"); $(".jtable-input-field-container").slice(7,10).wrapAll("

"); $(".jtable-input-field-container").slice(10,15).wrapAll("

"); $(".jtable-input-field-container").slice(15,20).wrapAll("

"); $(".jtable-input-field-container").slice(20,25).wrapAll("

"); $(".jtable-input-field-container").slice(25,29).wrapAll("

"); $(".jtable-input-field-container").slice(29,31).wrapAll("

"); $(".jtable-input-field-container").slice(31,34).wrapAll("

"); $(".jtable-input-field-container").slice(34,38).wrapAll("

");

Hope this save someone some effort.

• © Githubissues.
• Githubissues is a development platform for aggregating issues.