0

I don't know the name for the functionality I'm trying to look for and it's driving me crazy.

I am using the following razor code to display my form inputs:

<div class="col-sm">
  @Html.LabelFor(m => m.Capacity)
  @Html.EditorFor(m => m.Capacity, new { htmlAttributes = new { @class = "form-control" } })
</div>

I want to remove the control that shows the 'up and down' arrows and instead have some text there, like as follows:

enter image description here

I want to have one that looks like the green arrow image, the red arrow image is what I currently have, thanks in advance. The text should not disappear when the user types in the box either.

GeorgeB
  • 808
  • 1
  • 8
  • 26

1 Answers1

1

You can use Bootstrap Input Group to achieve that:

<form>
    <div class="form-group">
        @Html.LabelFor(x => x.Capacity)
        <div class="input-group">
            @Html.EditorFor(x => x.Capacity, new { @class = "form-control" })
            <div class="input-group-append">
                <span class="input-group-text">/20</span>
            </div>
        </div>
    </div>
</form>

enter image description here

demo: https://jsfiddle.net/davidliang2008/36mapuft/7/


To get rid of the arrows inside the input, there are 2 ways:

  • Apply styles mentioned in Can I hide the HTML5 number input’s spin box?

  • Override the type attribute to just "text", e.g., @Html.EditorFor(x => x.Capacity, new { @type = "text", @class = "form-control" })

    • Don't need to worry if this will break the client-side validation. If you have that on, it will still catch it when you type something that's not a number.

    • Your server side validation would catch it as well

David Liang
  • 20,385
  • 6
  • 44
  • 70
  • Hey David, thanks for the answer, so getting the input like that works well, is there anyway to get rid of the arrows on the right side of the input box? or is this a browser thing? – GeorgeB Aug 11 '20 at 18:01
  • 1
    @GeorgeB: it's a browser thing. The reason why it's showing up like that is probably you declared the `Capacity` as either double or integer, and when you use `EditorFor()` or even `TextBoxFor()`, MVC will translate that smartly to browser's one of the supported input types. In this case, it's `type="number"`. To hide the arrows, you might have to apply CSS like this: https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box. Or maybe you override the input with `type="text"`? – David Liang Aug 11 '20 at 18:10