Trying to get 3 "smaller" text boxes to be next to each other

[mletheren]

Hi, I have a horizontal form, and I there is one section where I would like to have 3 text boxes align to the right of each other so that someone can "box dimensions" I have tried the size but cannot make the textboxes small.

My code looks like this: @using (var f = Html.Bootstrap().Begin(new Form().Type(FormType.Horizontal))) { @Html.AntiForgeryToken() @Html.ValidationSummary(true, "", new { @class = "text-danger" })

@f.FormGroup().TextBoxFor(m => m.BatchNumber).Disabled()
@f.FormGroup().TextBoxFor(m => m.PrintNumber)
@f.FormGroup().TextBoxFor(m => m.WeightInLbs)
<div class="form-group">
    <label class="col-sm-2 control-label">Dimensions</label>
    <div class="col-sm-9">
        @Html.Bootstrap().TextBoxFor(m => m.HeightInInches).Size(InputSize.Small)
        x
        @Html.Bootstrap().TextBoxFor(m => m.LengthInInches).Size(InputSize.Small)
        x
        @Html.Bootstrap().TextBoxFor(m => m.WidthInInches).Size(InputSize.Small)
    </div>
</div>

}

The following code kind of works, but looks terrible:

@using (var f = Html.Bootstrap().Begin(new Form().Type(FormType.Horizontal))) { @Html.AntiForgeryToken() @Html.ValidationSummary(true, "", new { @class = "text-danger" })

@f.FormGroup().TextBoxFor(m => m.BatchNumber).Disabled()
@f.FormGroup().TextBoxFor(m => m.PrintNumber)
@f.FormGroup().TextBoxFor(m => m.WeightInLbs)
<div class="form-group">
    <label class="col-sm-2 control-label">Dimensions</label>
    <div class="col-sm-1">
        @Html.Bootstrap().TextBoxFor(m => m.HeightInInches).Size(InputSize.Small)
    </div>
    <div class="col-sm-1">
        x
    </div>
    <div class="col-sm-1">
        @Html.Bootstrap().TextBoxFor(m => m.LengthInInches).Size(InputSize.Small)
    </div>
    <div class="col-sm-1">
        x
    </div>
    <div class="col-sm-1">
        @Html.Bootstrap().TextBoxFor(m => m.WidthInInches).Size(InputSize.Small)
    </div>
</div>

} Do you have any recommendations as to how I can get the Textboxes to be smaller, and then have the "X" much closer to the text box?

Thanks in advance?

[DmitryEfimenko]

This is not really a BMVC question. It's more of a Bootstrap/css question. Nevertheless, what you want is the "x" container to just float left and have a width of the x rather than width dictated by the col-sm-1 class. Bootstrap has a class for making things float left: pull-left. So you could just do the following:

<div class="form-group">
    <label class="col-sm-2 control-label">Dimensions</label>
    <div class="col-sm-1">
        @Html.Bootstrap().TextBoxFor(m => m.HeightInInches).Size(InputSize.Small)
    </div>
    <div class="pull-left">
        x
    </div>
    <div class="col-sm-1">
        @Html.Bootstrap().TextBoxFor(m => m.LengthInInches).Size(InputSize.Small)
    </div>
    <div class="pull-left">
        x
    </div>
    <div class="col-sm-1">
        @Html.Bootstrap().TextBoxFor(m => m.WidthInInches).Size(InputSize.Small)
    </div>
</div>

That potentially would be enough, but there is also one improvement you could do right away to make code look a bit pritier. BMVC has a method .Div() that you could utilize here:

<div class="form-group">
    @Html.Bootstrap().Label("Dimensions").Class("col-sm-2 control-label")
    @Html.Bootstrap().Div(Html.Bootstrap().TextBox("HeightInInches").Size(InputSize.Small)).Sm(1)
    <div class="pull-left">x</div>
    @Html.Bootstrap().Div(Html.Bootstrap().TextBox("LengthInInches").Size(InputSize.Small)).Sm(1)
    <div class="pull-left">x</div>
    @Html.Bootstrap().Div(Html.Bootstrap().TextBox("WidthInInches").Size(InputSize.Small)).Sm(1)
</div>

I also just published an update that lets .Div() method to accept a string as a parameter. Now, if you get latest, you can write this:

<div class="form-group">
    @Html.Bootstrap().Label("Dimensions").Class("col-sm-2 control-label")
    @Html.Bootstrap().Div(Html.Bootstrap().TextBox("HeightInInches").Size(InputSize.Small)).Sm(1)
    @Html.Bootstrap().Div("x").Class("pull-left")
    @Html.Bootstrap().Div(Html.Bootstrap().TextBox("LengthInInches").Size(InputSize.Small)).Sm(1)
    @Html.Bootstrap().Div("x").Class("pull-left")
    @Html.Bootstrap().Div(Html.Bootstrap().TextBox("WidthInInches").Size(InputSize.Small)).Sm(1)
</div>

You might want to tweak padding css on the inputs to decrease the space between the inputs and the x, but that's up to you.

Hope this helps.

[mletheren]

I realized afterwards that it wasn't a BMVC question, so I really appreciate your response!

[mletheren]

That last piece code code with the update worked like a dream! Perfect !!!!!!!

[DmitryEfimenko]

Glad I could help. Good luck. Closing the issue