Comments (10)
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.
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.
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.
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.
I do like the idea of having sub-sections.
from bootstrap-form-builder.
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.
@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.
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.
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.
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)
- You read my mind HOT 3
- Save to database & re-edit - were you sucessful? HOT 7
- Bootstrap 4 HOT 1
- align elements side by side in horizontal way HOT 1
- Add possiblity to copy created input text element HOT 1
- Syntax errors in the yaml files --> ../assets/js/data/yaml HOT 1
- update libs or Browserify? HOT 4
- Ensure `id` attribute is CSS-friendly HOT 2
- add BootstrapValidator? HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap-form-builder.