ihabsoliman / Bootstrap-Form-Builder

Web app for drag drop building bootstrap forms.
MIT License
41 stars 22 forks source link

Support for sub-fieldsets (subitems) #6

Closed huchister closed 10 years ago

huchister commented 10 years ago

Would this be possible?

image

I would like to see support for sub categories fieldsets where you can sort, add subitems within a box.

Thanks.

tomByrer commented 10 years ago

Is there a Bootstrap-standard way to do this? Or common one?

Might be tricky to add it to the builder, but how about an <hr> or <h#> tag instead?

huchister commented 10 years ago

Not sure there is a standard way to put from bootstrap. I hoped this top-down structure rendered with ul and li tag, however it's all 'div'. I am deeply stuck where I have to render popover and drag-drop support for sub category items.

tomByrer commented 10 years ago

I'm also wondering if <ul><li> or <dl><dd><dt> could best.

You can use cascading <div> to get about what you want; check this out without CSS:

<form class="form-horizontal">
<fieldset>
<legend>Main Form</legend><!-- Form Name -->

    <!-- Text input-->
    <div class="form-group">
        <label class="col-md-4 control-label" for="Outside">Outside Input</label>  
        <div class="col-md-8">
        <input id="Outside" name="Outside" placeholder="placeholder" class="form-control input-md" type="text">
        <span class="help-block">help</span>  
        </div>
    </div>

    <fieldset>
    <legend>Sub-Form</legend><!-- Form Name -->  
        <div id="subForm" class="col-md-8">
            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-4 control-label" for="inside">Inside Input</label>  
                <div class="col-md-4">
                <input id="inside" name="inside" placeholder="placeholder" class="form-control input-md" type="text">
                <span class="help-block">help</span>  
                </div>
            </div>
        </div>
    </fieldset>

</fieldset>
</form>
huchister commented 10 years ago

yea, subset within another fieldset may also do the trick.

So the concept is, whenever I drag over the box, I should create another seperate my-form collection.

Given above method, I also need to deactivate the popover model while hover on the box.

When subset is given, i would need to figure out how to render or save subsets in JSON model.

Rendering wouldn't be a problem, but sorting out subsets giving me such a headache.

I was actually thinking whether I could turn all of this into 'ul' 'li' object and use jquery custom sortable.

http://johnny.github.io/jquery-sortable/

However, I shall see if I can come up with another fieldset, see if that does the tricks. Thanks.

tomByrer commented 10 years ago

I do like the idea of having sub-sections.

ihabsoliman commented 10 years ago

Hey guys, I actually tried to drop a fieldset and to drop controls inside it, and wasn't that successful. I am not currently working on this project, but it cloned inside my company and we had a lot of extra development on it for many clients and it has a lot of possibilities but the only thing we didn't do is the fieldset and multi column

tomByrer commented 10 years ago

@huchister Do you have an HTML (& CSS, but preferably using default Boostrap) example of the output please? I tried this, but didn't work too good in full-screen: http://jsbin.com/waloh/1/edit

tomByrer commented 10 years ago

I got 2 forms of Headings running: http://jsbin.com/qepux/1/edit Not quite what you wanted, but it is an easier way to implement a sub-division. Working inside BFB well, though I don't feel like making a new tab for them.

huchister commented 10 years ago

Example is really messy and still running under Bootstrap 2 with custom CSS that company written. I'd rather be working with bootstrap 3 and come up with new template.

tomByrer commented 10 years ago

I'll need a live HTML example to implement it please. This branch uses BS3; I've successfully upgraded to latest. The default CSS is wonky & hard to deal with, but we have to keep with it to be compatible.

Don't worry about the implementation; I've figured a workaround.