angular-dynamic-forms icon indicating copy to clipboard operation
angular-dynamic-forms copied to clipboard

Multi Column Form

Open abku opened this issue 9 years ago • 3 comments

Is there anyway/easy way of converting this to a multi column form?
Currently I have a long page of fields and instead would like the form to spread over the width of the page in columns format?

abku avatar Jan 27 '16 08:01 abku

That's a layout concern, which means you'll want to adjust your stylesheets accordingly. This library (and, indeed, Angular itself) only handles the HTML; you're responsible for your own CSS.

The simplest adjustment is likely something similar to label { display: inline-block; }, but that's probably overly simplified for what you're looking for.

danhunsaker avatar Jan 27 '16 21:01 danhunsaker

@danhunsaker

Yes. :) That is a bit over simplified. I am looking for a nested structure. Here is a sample:

        <fieldset>
                <legend>Residential address</legend>
                <div data-row-span="2">
                    <div data-field-span="1">
                        <label>Flat no. and bldg. name</label>
                        <input type="text">
                    </div>
                    <div data-field-span="1">
                        <label>Road no./name</label>
                        <input type="text">
                    </div>
                </div>
                <div data-row-span="4">
                    <div data-field-span="3">
                        <label>Area and landmark</label>
                        <input type="text">
                    </div>
                    <div data-field-span="1">
                        <label>City</label>
                        <input type="text">
                    </div>
                </div>
                <div data-row-span="4">
                    <div data-field-span="1">
                        <label>Telephone Residence</label>
                        <input type="text">
                    </div>
                    <div data-field-span="1">
                        <label>Office</label>
                        <input type="text">
                    </div>
                    <div data-field-span="1">
                        <label>Fax</label>
                        <input type="text">
                    </div>
                    <div data-field-span="1">
                        <label>Pin code</label>
                        <input type="text">
                    </div>
                </div>
            </fieldset>

Is this even possible?

abku avatar Mar 12 '16 04:03 abku

HTML templates aren't supported, no, though that feature is on the roadmap. For now you may wish to investigate one of the alternative projects listed in the README... :-\

danhunsaker avatar Mar 13 '16 15:03 danhunsaker