display label between two dates picker ??
Hi,
I am using jquery date picker, when I tried to insert the word"to" between the two dates, it displayed after the last date, here is an image :
Thanks, your help is appreciated.
Can you show the CSS for the form?
At a guess the inputs are probably floated so you would also need to float the label.
Add a class to the label and set it to float:left and test.
Here is my css, all the inputs are not floated :
h1, h2, h3, h4, h5, h6, caption { font-weight: normal; }
article, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
table { border-spacing: 0; border-collapse: collapse; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select, button { vertical-align: middle; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: text-top; }
input[type="button"], input[type="submit"], input[type="image"], input[type="reset"], input[type="radio"], input[type="checkbox"], select, button { cursor: pointer; }
legend { cursor: help; }
textarea { overflow: auto; }
button, input, select, textarea { margin: 0; }
body { font:13px/1.615 sans-serif; }
select, input, textarea, button { font:99% sans-serif; }
body, select, input, textarea { font-family: "Lucida Sans Unicode", LucidaSansUnicode, "Lucida Sans", LucidaSans, "Lucida Grande", LucidaGrande, Helvetica, Arial, sans-serif; }
small { font-size: 85%; }
em, i { font-style: italic; }
strong, th, b { font-weight: bold; }
td { vertical-align: top; }
sub, sup { font-size: 75%; line-height: 0; position: relative; } /* Set sub, sup without affecting line-height: gist.github.com/413930 */
sup { top: -.5em; }
sub { bottom: -.25em; }
div { position: relative; } /* Easier to be able to place absolute elements inside divs with relative already set */
.right {float: right; }
/* Anchor tag definition */
a, img { display: inline-block; }
a, a:active, a:visited { text-decoration: underline; }
a:hover { text-decoration: none; }
a:hover, a:active { outline: none; }
a img, a:hover img { border: none; }
/* Header tag definition */
h1, h2, h3, #header h5, caption, #main-menu a { font-family: "Trebuchet MS", Trebuchet,Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6, h7, h8, caption { letter-spacing: .0625em; }
h1 { font-size: 167%; padding-bottom: 10px; }
h1 + p { padding-top: .5em; }
.center { text-align: center; }
h2, caption { font-size: 138.5%; font-weight: bold; }
h2 + p { padding-top: .5em; }
h3 { font-size: 123.1%; font-weight: bold; }
h4 { font-size: 108%; text-transform: uppercase; }
h5 { font: normal 108% Georgia, serif; }
h5 + p { padding-top: .5em; }
h6, h7, h8 { font: bold 100% Georgia, serif; }
p, ul, ol, dl, blockquote, address, form { padding-bottom: 2px; }
/* Form tag definition */
form { }
fieldset { padding: 10px; margin-bottom: 10px; }
legend { font: bold 123.1% Georgia, serif; }
label { font-weight: bold; font-size: 100%; text-transform: uppercase; letter-spacing: .125em; }
.formLabel { display: block; line-height: 1.8; vertical-align: top; font-weight: bold; padding-top: 10px; color: #245393; }
.plainLabel { display: list-item; line-height: 1.8; vertical-align: baseline; font-weight: bold; padding-top: 10px; color: #245393; }
input[type="text"], input[type="password"], input[type="file"], textarea { color: #999; border: 1px solid #7b8; -moz-border-radius:5px; -webkit-border-radius:5px; }
input[type="file"] { color: #999; border: 1px solid #999; padding: 3px; }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus { color: #444; background-color: #eee; border: 1px solid #333; }
input[type="submit"], input[type="reset"], button { font-weight: bold; font-size: 108%; cursor: pointer; -moz-border-radius:5px; -webkit-border-radius:5px; }
input[type="submit"], input[type="reset"] { padding: .2em .4em .17em; }
input.submitbutton { padding-top: 5px; margin: 1.5em 0; }
button { padding: .32em .4em .1em; }
body { margin: 20px 0; }
.container { width: 1405px; margin: 0 auto; }
p { text-align: justify; padding: inherit; }
p.error { font-weight: bold; margin: 10px;}
/* Header section */
#header { background: top left no-repeat url('../images/monitor_header.png') transparent; height: 100px; margin: 0 0 10px; padding: 0 10px 0 0; border-top-width: 10px; -moz-border-radius:5px; -webkit-border-radius:5px; }
#header a.button { float: right; margin: 5px 0; -moz-border-radius:5px; -webkit-border-radius:5px; }
/* Main wrapper */
#main-wrapper { background-color: #fff; border: solid 1px #7ab; -moz-border-radius:5px; -webkit-border-radius:5px; }
.sample-columns { margin-bottom: 20px; }
/* Main content section */
#content { padding: 0 0 50px 50px; min-height: 532px; float: inherit; width: 1305px; }
div.error { font-weight: bold; color: #F30; margin: 0 0 20px 30px; }
div.error h3 { color: #F30; }
div.message { font-weight: bold; color: #30C; }
div.column { float: left; }
span.column { display: inline-block; vertical-align: top; }
.column.single { float: none; margin-right: 20px; }
.half, .onethird, .twothird, .third, .quarter { min-height: 1em; }
.half { width: 420px; margin-right: 20px; }
.onethird { width: 280px; margin-right: 20px; border: solid 1px #7ab; -moz-border-radius:5px; -webkit-border-radius:5px; }
.thirdone { width: 560px; border: solid 1px #7ab; -moz-border-radius:5px; -webkit-border-radius:5px; }
.twothird { width: 560px; margin-right: 20px; border: solid 1px #7ab; -moz-border-radius:5px; -webkit-border-radius:5px; }
.thirdtwo { width: 280px; border: solid 1px #7ab; -moz-border-radius:5px; -webkit-border-radius:5px; }
.last { margin-right: 0; }
.dashboardfirsthalf { width: 990px; margin-right: 20px; }
.dashboardsecondhalf { width: 250px; min-height: 405px; margin-left: 35px; border: solid 1px #7ab; border-radius:5px; -webkit-border-radius:5px; }
div.dashboardsecondhalf label { font-weight: bold; }
div.info { margin-left: 5px; }
.transactionfirsthalf { width: 180px; margin-right: 20px; }
.transactionsecondhalf { width: 555px; }
div.time { text-align: right; }
.tableCaption { text-align: center; font-size: 138.5%; font-weight: bold; }
#center-body { padding: 50px; min-height: 555px; float: inherit; }
div.error { font-weight: bold; color: red; }
div.error h3 { color: red; }
div.message { font-weight: bold; color: #30C; }
div.formMessage { font-weight: bold; color: #333; }
/* Main menu section */
#main-menu { padding: 0; color: #7ab; }
#main-menu ul { text-align: left; }
#main-menu li { list-style-type: none; float: left; position: relative; }
#main-menu li:hover a, #main-menu li.over a { color: #222; }
li.selected { font-weight: bold; color: #333; }
#main-menu a { font-size: 116%; letter-spacing: .125em; padding: .25em .5em .22em; color: #666; border-right: 1px solid #DDEEED; text-decoration: none; white-space: nowrap; }
#main-menu a:hover, #main-menu a:focus { color: #136; background-color: #CFD2B6; }
/* Sub menu section */
#sub-menu { padding: 0 1em; background-color: #F2F3FF; margin: 0em 1em }
#sub-menu li { display: inline; }
#sub-menu li a { padding-left: .5em; color: #333; }
#sub-menu li a:hover, #sub-menu li a:focus { color: #ccc; }
#footer { float: left; position: relative; padding: 5px 0 0 0; width: 500px; height: 20px; }
#footer p { text-align: left; }
#version{ width: 70px; display: inline; }
#event { text-align: justify; }
#range { padding-bottom: 1em; }
/* Colors */
body { background: #e2e0d3; color: #222; }
h1, h1 a { color: #548492; }
h1 a, h2 a, h3 a { text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover { color: #666; text-decoration: underline; }
h2, h2 a, .tableCaption { color: #053E58; } /* dark blue */
h3, h3 a { color: #548492; } /* light blue */
h4 { color: #666; }
h5 { color: #444; }
h6 { color: #444; }
h7 { color: #333; }
h8 { color: #333; }
label { color: #333; }
label.error { color: #F30}
input[type="submit"], input[type="reset"], button { color: #333; background-color: #CFD2B6; border: 1px solid #666; }
input[type="submit"]:hover, input[type="reset"]:hover, button:hover, input[type="submit"]:focus, input[type="reset"]:focus, button:focus { color: #eee; background-color: #548492; }
.value {
float: left;
padding:3px;
margin-right: 10px;
}
The label has for=“to” but I don’t see an input with that name.
That was a cut and paste, I tried label without for=“to”, and a span, but always the same result.
Can you show another screenshot but where you have the input styles highlighted rather than the label. Or do you have a have a live demo we can see?
I can’t think of a reason why the label would be displaced other than that the inputs or label were floated. Otherwise the label should be where you put it.
Thank you PaulOB, it was the float
.value {
//float: left;
padding:3px;
margin-right: 10px;
}
as soon as I commented it it worked fine.
thanks lot.
You can’t comment in CSS like that. That comment is not for CSS. That’s invalid.
You need to comment like this:
/*Comment*/