Code Monkey home page Code Monkey logo

Comments (10)

tomByrer avatar tomByrer commented on July 18, 2024

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?

from bootstrap-form-builder.

huchister avatar huchister commented on July 18, 2024

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.

from bootstrap-form-builder.

tomByrer avatar tomByrer commented on July 18, 2024

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>

from bootstrap-form-builder.

huchister avatar huchister commented on July 18, 2024

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.

from bootstrap-form-builder.

tomByrer avatar tomByrer commented on July 18, 2024

I do like the idea of having sub-sections.

from bootstrap-form-builder.

ihabsoliman avatar ihabsoliman commented on July 18, 2024

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

from bootstrap-form-builder.

tomByrer avatar tomByrer commented on July 18, 2024

@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

from bootstrap-form-builder.

tomByrer avatar tomByrer commented on July 18, 2024

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.

from bootstrap-form-builder.

huchister avatar huchister commented on July 18, 2024

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.

from bootstrap-form-builder.

tomByrer avatar tomByrer commented on July 18, 2024

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.

from bootstrap-form-builder.

Related Issues (10)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.