I want to design a fluid two-column form with BootStrap. What is the best way to tackle this? Do I start with a fluid container and two columns, and then fit a vertical form in each of them? Or is there a better alternative?
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
mmcdonald 28 Posting Pro
A fluid container with two columns is the way I would proceed.
If you want to play around with BS3 forms before you begin check these out:
A form builder:
http://bootsnipp.com/forms?version=3
Some useful example code (All credit to 'pppeater'):
http://www.bootply.com/pppeater/jrNvaahcOh
Write some code and then post it here and we can all take a look and shuffle bits around :)
Regards,
Michael
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
Thanks, the three-column example is useful. I had the form already, just problems with scaling it correctly (due to lack of bootstrap knowledge).
Here's the form (for now). The addon icons (font awesome) are not alinging with the inputs.
<h1><asp:Literal runat="server" Text="<%$ Localize:LoginRequest %>"/></h1>
<fieldset>
<legend><asp:Literal runat="server" Text="<%$ Localize:RequiredFields %>"></asp:Literal></legend>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-lg-6">
<div class="form-group">
<h3><asp:Literal runat="server" Text="<%$ Localize:ContactInformation %>"/></h3>
<div class="input-group">
<input runat="server" class="form-control" placeholder="E-mail" type="text" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input runat="server" class="form-control" placeholder="Password" type="password" value="" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<select runat="server" class="form-control">
<option>Mr.</option>
<option>Mrs.</option>
</select>
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input runat="server" class="form-control" placeholder="FirstName" type="text" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input runat="server" class="form-control" placeholder="Infix" type="text" />
<span class="input-group-addon"><i class="fa"></i></span>
</div>
<div class="input-group">
<input runat="server" class="form-control" placeholder="LastName" type="text" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-6">
<div class="form-group">
<h3><asp:Literal runat="server" Text="<%$ Localize:CompanyInformation %>"/></h3>
<div class="input-group">
<input runat="server" class="form-control" placeholder="Name" type="text" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input runat="server" class="form-control" placeholder="Phone" type="text" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input runat="server" class="form-control" placeholder="E-mail" type="text" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input runat="server" class="form-control" placeholder="Vat number" type="text" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input runat="server" class="form-control" placeholder="CoC number" type="text" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
</div>
<div class="form-group">
<h3><asp:Literal runat="server" Text="<%$ Localize:InvoiceAddress %>"/></h3>
<div class="input-group">
<input runat="server" class="form-control" placeholder="Address" type="text" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input runat="server" class="form-control" placeholder="Postal code" type="text" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input runat="server" class="form-control" placeholder="City" type="text" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input runat="server" class="form-control" placeholder="E-mail" type="text" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
</div>
<div class="form-group">
<h3><asp:Literal runat="server" Text="<%$ Localize:DeliveryAddress %>"/></h3>
<div class="checkbox">
<label>
<input type="checkbox" checked="checked" /> <asp:Literal runat="server" Text="<%$ Localize:DeliveryAsInvoice %>"/>
</label>
</div>
<div class="input-group">
<input runat="server" class="form-control" readonly="readonly" placeholder="Address" type="text" />
<span class="input-group-addon"><i class="fa"></i></span>
</div>
<div class="input-group">
<input runat="server" class="form-control" readonly="readonly" placeholder="Postal code" type="text" />
<span class="input-group-addon"><i class="fa"></i></span>
</div>
<div class="input-group">
<input runat="server" class="form-control" readonly="readonly" placeholder="City" type="text" />
<span class="input-group-addon"><i class="fa"></i></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-6">
<div class="form-group">
<button runat="server" type="submit" class="btn btn-default"><asp:Literal runat="server" Text="<%$ Localize:Submit %>"/></button>
</div>
</div>
</div>
</div>
</fieldset>
The example uses a horizontal form, but that's not what I want. The first column are personal details, the second company details. They can't flow like the example.
mmcdonald 28 Posting Pro
The example uses a horizontal form, but that's not what I want. The first column are personal details, the second company details. They can't flow like the example.
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">@</span>
<input runat="server" class="form-control" ... />
</div>
<div class="input-group">
<span class="input-group-addon">@</span>
<input runat="server" class="form-control" ... />
</div>
<!-- more personal fields... -->
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">@</span>
<input runat="server" class="form-control" ... />
</div>
<div class="input-group">
<span class="input-group-addon">@</span>
<input runat="server" class="form-control" ... />
</div>
<!-- more company fields... -->
</div>
</div>
</div>
</form>
I've litterally slapped that together on the DW editor so excuse any blatent mistakes, I'm currently stuck on a corporate citrix farm :P I believe the layout above would do the trick? Can you get it displayed and show me a picture to help visualise? Sorry if I'm actually making this experience more painful haha :D
Michael
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
Thanks. Basically that's what I want, but the problem is the input-group-addon (I think). It's not connecting both parts, see attached (both Opera and IE). It works if I put them before, but not after. Any css class missing?
mmcdonald 28 Posting Pro
Oooooo funky - can you change the tag from a div to a span please? And in the good spirit of not stealing content on the web, I'm currently reading through this: https://github.com/plataformatec/simple_form/wiki/How-to-use-Bootstrap-3-input-group-in-Simple-Form and this http://www.tutorialspoint.com/bootstrap/bootstrap_input_groups.htm
Take a look. I'll post back if I spot something important!
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
can you change the tag from a div to a span please?
Which one? I don't see a difference.
mmcdonald 28 Posting Pro
Sorry for the lack of clarity.
Change this:
<div class="input-group-addon">@</div>
to this:
<span class="input-group-addon">@</span>
I'm wondering if it's a style on the division tag that's causing the issue.
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
I have span ...
mmcdonald 28 Posting Pro
So you do, it was me that didn't, sorry!! :D Still reading but what you have looks fine. Have you tried using the style editor in your browser, unchecking certain styles applied on the form, fields and appended icons? I'm struggling simply because everything looks fine with the mark-up above.
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
I'm struggling simply because everything looks fine with the mark-up above.
Same here. What I had was close to your example, cept that it looks crap. Quick "solution" is to prepend, but not what I want. I'll see if I can find some time to debug this.
mmcdonald 28 Posting Pro
Okay chap, I'm sorry I couldn't help at all - good luck!
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
It works online with bootply. The difference is that it's a later version of Bootstrap. I've tried updating my project, but got an exception in the process... Looks like it's the cause though.
Hmz. Just updated to 3.2.0, same problem still... And another thing I only just noticed is that even though I specified col-md-6 the input aren't as wide as expected (on bootply they are wider). What is interfering in Visual Studio? Could it be one of the other scripts?
This is the generated HTML:
<fieldset>
<legend>Fields marked <i class="fa fa-star-o"></i> are required.</legend>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<h3>Contact details</h3>
<div class="input-group">
<input type="text" class="form-control" placeholder="E-mail" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input type="password" class="form-control" placeholder="Password" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<select class="form-control">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
</select>
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="FirstName" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Infix" />
<span class="input-group-addon"><i class="fa"></i></span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="LastName" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<h3>Company details</h3>
<div class="input-group">
<input type="text" class="form-control" placeholder="Name" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Phone" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="E-mail" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Vat number" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="CoC number" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
</div>
<div class="form-group">
<h3>Invoice address</h3>
<div class="input-group">
<input type="text" class="form-control" placeholder="Address" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Postal code" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="City" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="E-mail" />
<span class="input-group-addon"><i class="fa fa-star-o"></i></span>
</div>
</div>
<div class="form-group">
<h3>Delivery address</h3>
<div class="checkbox">
<label>
<input type="checkbox" checked="checked" /> Delivery address is invoice address
</label>
</div>
<div class="input-group">
<input type="text" class="form-control" readonly="readonly" placeholder="Address" />
<span class="input-group-addon"><i class="fa"></i></span>
</div>
<div class="input-group">
<input type="text" class="form-control" readonly="readonly" placeholder="Postal code" />
<span class="input-group-addon"><i class="fa"></i></span>
</div>
<div class="input-group">
<input type="text" class="form-control" readonly="readonly" placeholder="City" />
<span class="input-group-addon"><i class="fa"></i></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
</div>
</fieldset>
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
Sigh... Ok. Visual Studio it was. While doing tests tring to fix this, the original Site.css VS creates was restored which contains a max-width for inputs... To quote Homer: "DOH!"
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.