How to make date picker shorter?

Question

So my date picker is very long. It shouldn't be that long, but i dont know how to shorten it. This is the codes I used to get the date picker.

[BindProperty, DataType(DataType.Date)]
        public DateTime Date { get; set; }


    <br />public void OnPostTestClick()
        {
            String testparam = Request.Form["navn"];
            String testDate = Request.Form["Date"];
            Debug.WriteLine("Testclick verdi = " + testparam);
            Debug.WriteLine("Testclick verdi2 = " + testDate);
            filterdato = testDate;
            ListData();
        }

from a cshtml.cs file

<form method="post" asp-page-handler="TestClick">
    <input name="name" id="name" />
    <button>seacrh</button>

    <br />
    <br />
    <input class="form-control" type="date" data-val="true" data-val-required="The Date field is required." id="Date" name="Date" value="åååå-mm-dd" />
    <br />
</form>
    

from a cshtml file.

This is a picture of what it looks like:

https://i.sstatic.net/pVcyZ.jpg

As you see, it has a lot spaces after the text. I was wondering how I can fix this.

Answer 1

The form-control class that you are using is a Bootstrap class. One of the styles that form-control class adds is width: 100%;. Check Bootstrap documentation for how to create form layouts.

Or remove form-control class from your input element.