No replies
rowan.bradley
rowan.bradley's picture
Offline
newbie
Last seen: 2 years 45 weeks ago
Timezone: GMT+1
Joined: 2017-09-26
Posts: 1
Points: 2

I am trying to design a web page where I need a text input (for a "from" date), then the word "to", then another text input (for the "to" date). It is currently rendering with the two inputs first on the left, touching each other, and the word "to" a long way to the right. How do I get this to render as I want it?

Here is my HTML:

<p>Please enter the range of dates that you wish to see below:</p>
<div class="center">
<div class="input-daterange input-group" id="datepicker" data-date-format='d-M-yy'>
<p><input type="text" class="input-sm form-control datepick" value="26-Sep-17" name="fromdate" placeholder="From date"/>
<span>to</span>
<input type="text" class="input-sm form-control datepick" value="26-Jan-18" name="todate" placeholder="To date"/></p>
</div>
</div>

And here is the associated CSS:

.center {
text-align: center;
}
.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn-group:not(:last-child) > .btn, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-daterange input:first-child {
border-radius: 3px 0 0 3px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.input-group .form-control, .input-group-addon, .input-group-btn {
display: table-cell;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
input[type="text"] {
text-align: center;
font-family: verdana;
font-size: 12px;
}
.input-daterange input {
text-align: center;
}
.datepick {
width: 100px !important;
}
.input-sm {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input {
line-height: normal;
}
button, input, optgroup, select, textarea {
margin: 0;
margin-bottom: 0px;
font: inherit;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}

This is how it is currently rendering:

How do I get the word "to" to appear between the two input fields?

Thanks - Rowan