Form Date & Time fields
Permalink Browser Info Environment
I'm having some formatting issues with the Date and Time field in my Form. I have edited main.css to increase width parameter under /* Forms, but this only increased width on text fields. See attached screenshot - I would just like to have the time running on one line.
Also, can I force the date format to dd/mm rather than mm/dd?
Many thanks
Kevin
Also, can I force the date format to dd/mm rather than mm/dd?
Many thanks
Kevin
Type: | Discussion |
---|---|
Status: | New |
Add this CSS to get it all on 1 line:
Also add these two declarations to the existing form css you mentioned
.ccm-input-time-wrapper input
.ccm-input-time-wrapper select
.ccm-input-time-wrapper input, .ccm-input-time-wrapper select { display:inline; }
Also add these two declarations to the existing form css you mentioned
.ccm-input-time-wrapper input
.ccm-input-time-wrapper select
thanks for your reply. Quick clarification: i'm adding
.ccm-input-time-wrapper input, .ccm-input-time-wrapper select {
display:inline;
}
to the Block Design CSS section, and then the two declarations like this on the main.css file:
/* Forms
================================================== */
#container form {
margin-bottom: 20px;
}
#container fieldset {
margin-bottom: 20px;
}
#container input[type="text"],
#container input[type="password"],
#container input[type="email"],
#container input[type="tel"],
#container textarea,
#container select {
border: 1px solid #ccc;
padding: 6px 4px;
outline: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
width: 310px;
max-width: 100%;
display: block;
margin-bottom: 20px;
background: #fff;
.ccm-input-time-wrapper input;
.ccm-input-time-wrapper select;
}
?
.ccm-input-time-wrapper input, .ccm-input-time-wrapper select {
display:inline;
}
to the Block Design CSS section, and then the two declarations like this on the main.css file:
/* Forms
================================================== */
#container form {
margin-bottom: 20px;
}
#container fieldset {
margin-bottom: 20px;
}
#container input[type="text"],
#container input[type="password"],
#container input[type="email"],
#container input[type="tel"],
#container textarea,
#container select {
border: 1px solid #ccc;
padding: 6px 4px;
outline: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
width: 310px;
max-width: 100%;
display: block;
margin-bottom: 20px;
background: #fff;
.ccm-input-time-wrapper input;
.ccm-input-time-wrapper select;
}
?
1. Yes
2. No, should be like this:
2. No, should be like this:
#container input[type="text"], #container input[type="password"], #container input[type="email"], #container input[type="tel"], #container textarea, #container select, .ccm-input-time-wrapper input, .ccm-input-time-wrapper select { border: 1px solid #ccc; padding: 6px 4px; outline: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
Viewing 15 lines of 23 lines. View entire code block.
And take a look at this thread for changing date formatting:http://www.concrete5.org/community/forums/chat/change-to-european-d...