Closed mletheren closed 8 years ago
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.
I realized afterwards that it wasn't a BMVC question, so I really appreciate your response!
That last piece code code with the update worked like a dream! Perfect !!!!!!!
Glad I could help. Good luck. Closing the issue
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" })
}
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" })
} 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?