0

I have a div with some inputs, one of type date and I want to remove the whitespace from the element

here is the code

<div class="form-group form-inline">
        <input id="jumbotronSearch" type="text" class="form-control input-lg" placeholder="Location" min="5" max="50" required/> 
        <input id="jumbotronDate" type="date" class="form-control input-lg" value="@DateTime.Now.Date.ToShortDateString()" readonly/>
        <button id="jumbotronSearch" type="submit" class="btn btn-default btn-lg">Search</button>
    </div>

and here is what it looks like. I want to remvove all the extra space after the date.

I tried setting the css width to 100% and white-space: nowrap but that didn't do it.

enter image description here

chuckd
  • 13,460
  • 29
  • 152
  • 331
  • Set the width to a lower amount: `width: 150px;` – Tyler Roper Oct 22 '16 at 22:15
  • I don't want a hard coded value, I want it to be responsive! Also the date string might change length. – chuckd Oct 22 '16 at 22:16
  • You'll probably have to use !important because you're dealing with Bootstrap Like so: white-space:nowrap !important; (or whatever property lets you fix what you want) – ii7scw Oct 22 '16 at 22:17
  • I don't believe this can be done with CSS, however perhaps someone else can correct me on that if I'm mistaken. Otherwise, have a look at this question: [Adjust Width of Input Field to its Input](http://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input) – Tyler Roper Oct 22 '16 at 22:18

1 Answers1

0

For a responsive solution have you tried changing this: 

<input id="jumbotronDate" type="date" class="form-control input-lg" value="@DateTime.Now.Date.ToShortDateString()" readonly/>

to

<input id="jumbotronDate" type="date" class="form-control form-date input-lg" value="@DateTime.Now.Date.ToShortDateString()" readonly/>

Then in the css

.form-date{max-width:60%}

or if there is only one date on your page

#jumbotronDate{max-width:60%}

As there is a bootstrap value set for the width of the date, so use max-width to override it, or add !important to override any bootstrap constraints.