0

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?

2
Contributors
13
Replies
37
Views
3 Years
Discussion Span
Last Post by pritaeas
Featured Replies
  • 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 … Read More

  • 2

    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!" Read More

0

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.

Edited by pritaeas

0

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

Edited by mmcdonald

0

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?

Edited by pritaeas

Attachments Untitled.jpg 69.08 KB
0

can you change the tag from a div to a span please?

Which one? I don't see a difference.

Edited by pritaeas

0

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.

0

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.

0

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.

0

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>

Edited by pritaeas

2

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!"

Edited by pritaeas

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.