CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
kfriede
kfriede

Reputation: 187

Bootstrap 3 Autosizing Inline Inputs with Small Column

I am attempting to create an inline form within a small container (.col-sm-4). Using a default inline form at this size automatically wraps into multiple lines, which I would like to avoid. The look I am aiming for is here: Desired Layout

At this point I have gotten the inputs to throw out their min-width and instead adhere to their bounding columns, but I cannot get the button in the spot I want it (and autosizing with the overarching container).

JSFiddle Here

HTML:

<div class="col-xs-4 well">
    <div class="col-xs-7 form-col" id="input-dynamic">
        <input type="text"></input>
    </div>
    <div class="col-xs-4 form-col" id="input-dynamic">
        <div class="input-group-addon">$</div>
        <input type="number"></input>
    </div>
    <div class="col-xs-1 form-col" id="input-dynamic">
        <button class="btn btn-danger">-</button>
    </div>
</div>

CSS:

#input-dynamic input[type=text] {
    width: 100%;
    box-sizing: border-box;
    height: 28px;
}
#input-dynamic input[type=number] {
    width: 100%;
    box-sizing: border-box;
    height: 28px;
}
#input-dynamic button {
    width: 100%;
    box-sizing: border-box;
    height: 28px;
}
.form-col {
    padding-right: 2px;
    padding-left: 2px;
}

Upvotes: 2

Views: 2161

Answers (2)

fred1234
fred1234

Reputation: 429

I forked your JSFiddle.

I Implemented the inline-form techniques discussed here.

And built some of the elements using this Bootstrap form builder. If you google Bootstrap form builder you will see many similar ones.

I also noticed you didn't add all the external resources to the JSFiddle so I did that as well.

If you have a really really small screen it gets scrunched but you could use a media query as discussed HERE to change the layout for a small width.

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4">
            <form class="form-inline">
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-6">
                            <input id="textinput" name="textinput" type="text" class="form-control input-md"></div>
                            <div class="col-xs-6"><div class="input-group"> <span class="input-group-addon">$</span>

                                <input id="prependedtext" name="prependedtext" class="form-control" placeholder="Amount" type="text"> <span class="input-group-btn">
        <button class="btn btn-danger" type="button">-</button>
      </span>

                            </div>
                        </div>
                    </div>
            </form>
            </div>
        </div>
    </div>

Upvotes: 1

AngularJR
AngularJR

Reputation: 2762

Kfriede, Hi there. You said you want to avoid the form items from stacking.
Here is a Fiddle that will do that for the form.
But just because of the still having it to be used properly on a very small screen.
I added a media breakpoint at 320px to drop the button down below and expand the two inputs to take up 50% width each.
Hope this can help you get started here with this form. 

<form class="row-fluid">

        <input type="text" class="input-style col-xxs-6 col-xs-4 " id="exampleInputName2" placeholder="Name">  
        <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>

        <div class="col-xxs-6 col-xs-5 input-block">
            <div class="input-addon input-height col-xs-2">$</div>
            <input type="text" class="input-style col-xs-8" id="exampleInputAmount" placeholder="Amount">
        </div>

        <div class=" col-xxs-12 col-xs-3">  
            <button type="submit" class="btn btn-success">Submit</button>
        </div>
</form>

inline form

Upvotes: 2

Related Questions