How to center the content of month input field?
I'm having trouble centering the text inside a HTML month-input field. Here's a simplified version of my HTML/CSS to demonstrate the issue:
If you run it, you'll see that it is not centered - and if you try "text-align: right", it doesn't move all the way right either. It does move with both alternatives, which is strange.
Any idea why this happens?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>This is how it looks to me: As you can see the text is not centered inside the input box.
html css
asked Jan 3 at 14:44
Daniel SlättDaniel Slätt
3461313
add a comment |
I'm having trouble centering the text inside a HTML month-input field. Here's a simplified version of my HTML/CSS to demonstrate the issue:
If you run it, you'll see that it is not centered - and if you try "text-align: right", it doesn't move all the way right either. It does move with both alternatives, which is strange.
Any idea why this happens?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>This is how it looks to me: As you can see the text is not centered inside the input box.
html css
asked Jan 3 at 14:44
Daniel SlättDaniel Slätt
3461313
1
jsfiddle.net/8aqLzg4x works fine here? I just copy pasted your code.
– Denisx
Jan 3 at 14:46
1
It is working fine with center right? any screenshot for expected output.
– Anji
Jan 3 at 14:49
I'm using Opera and originally it's an electron app (same problem on both platforms). I have print screened what I see when I view the link you provided. I'm suspecting the problem might be related to me displaying the month input in Swedish? If you look closely at the picture it isn't centered.
– Daniel Slätt
Jan 3 at 14:50
1
@DanielSlätt, do you want to align input box text vertically center?
– Anji
Jan 3 at 14:52
That's what I want :) (P.S - just realized I forgot to specify that it's the text I'm having trouble with - sorry!)
– Daniel Slätt
Jan 3 at 14:52
add a comment |
I'm having trouble centering the text inside a HTML month-input field. Here's a simplified version of my HTML/CSS to demonstrate the issue:
If you run it, you'll see that it is not centered - and if you try "text-align: right", it doesn't move all the way right either. It does move with both alternatives, which is strange.
Any idea why this happens?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>This is how it looks to me: As you can see the text is not centered inside the input box.
html css
asked Jan 3 at 14:44
Daniel SlättDaniel Slätt
3461313
I'm having trouble centering the text inside a HTML month-input field. Here's a simplified version of my HTML/CSS to demonstrate the issue:
If you run it, you'll see that it is not centered - and if you try "text-align: right", it doesn't move all the way right either. It does move with both alternatives, which is strange.
Any idea why this happens?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>This is how it looks to me: As you can see the text is not centered inside the input box.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html> <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>html css
html css
asked Jan 3 at 14:44
Daniel SlättDaniel Slätt
3461313
asked Jan 3 at 14:44
Daniel SlättDaniel Slätt
3461313
edited Jan 3 at 14:53
Daniel Slätt
asked Jan 3 at 14:44
Daniel SlättDaniel Slätt
3461313
asked Jan 3 at 14:44
Daniel SlättDaniel Slätt
3461313
asked Jan 3 at 14:44
Daniel SlättDaniel Slätt
3461313
3461313
1
jsfiddle.net/8aqLzg4x works fine here? I just copy pasted your code.
– Denisx
Jan 3 at 14:46
1
It is working fine with center right? any screenshot for expected output.
– Anji
Jan 3 at 14:49
I'm using Opera and originally it's an electron app (same problem on both platforms). I have print screened what I see when I view the link you provided. I'm suspecting the problem might be related to me displaying the month input in Swedish? If you look closely at the picture it isn't centered.
– Daniel Slätt
Jan 3 at 14:50
1
@DanielSlätt, do you want to align input box text vertically center?
– Anji
Jan 3 at 14:52
That's what I want :) (P.S - just realized I forgot to specify that it's the text I'm having trouble with - sorry!)
– Daniel Slätt
Jan 3 at 14:52
add a comment |
1
jsfiddle.net/8aqLzg4x works fine here? I just copy pasted your code.
– Denisx
Jan 3 at 14:46
1
It is working fine with center right? any screenshot for expected output.
– Anji
Jan 3 at 14:49
I'm using Opera and originally it's an electron app (same problem on both platforms). I have print screened what I see when I view the link you provided. I'm suspecting the problem might be related to me displaying the month input in Swedish? If you look closely at the picture it isn't centered.
– Daniel Slätt
Jan 3 at 14:50
1
@DanielSlätt, do you want to align input box text vertically center?
– Anji
Jan 3 at 14:52
That's what I want :) (P.S - just realized I forgot to specify that it's the text I'm having trouble with - sorry!)
– Daniel Slätt
Jan 3 at 14:52
1
1
jsfiddle.net/8aqLzg4x works fine here? I just copy pasted your code.
– Denisx
Jan 3 at 14:46
jsfiddle.net/8aqLzg4x works fine here? I just copy pasted your code.
– Denisx
Jan 3 at 14:46
1
1
It is working fine with center right? any screenshot for expected output.
– Anji
Jan 3 at 14:49
It is working fine with center right? any screenshot for expected output.
– Anji
Jan 3 at 14:49
I'm using Opera and originally it's an electron app (same problem on both platforms). I have print screened what I see when I view the link you provided. I'm suspecting the problem might be related to me displaying the month input in Swedish? If you look closely at the picture it isn't centered.
– Daniel Slätt
Jan 3 at 14:50
I'm using Opera and originally it's an electron app (same problem on both platforms). I have print screened what I see when I view the link you provided. I'm suspecting the problem might be related to me displaying the month input in Swedish? If you look closely at the picture it isn't centered.
– Daniel Slätt
Jan 3 at 14:50
1
1
@DanielSlätt, do you want to align input box text vertically center?
– Anji
Jan 3 at 14:52
@DanielSlätt, do you want to align input box text vertically center?
– Anji
Jan 3 at 14:52
That's what I want :) (P.S - just realized I forgot to specify that it's the text I'm having trouble with - sorry!)
– Daniel Slätt
Jan 3 at 14:52
That's what I want :) (P.S - just realized I forgot to specify that it's the text I'm having trouble with - sorry!)
– Daniel Slätt
Jan 3 at 14:52
add a comment |
3 Answers
3
active
oldest
votes
This doesn't work as expected because of the way input type="month" is rendered.
If you remove the disabled attribute you will see that (depending on the browser) you have some arrows and carets on the right. Taking them into account your text is in dead center.
You need to add this CSS
input[type=month]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-inner-spin-button {
display: none;
-webkit-appearance: none;
}
et voila
EDIT:
You can use :disabled CSS selector so it doesn't affect your other inputs
input[type=date]:disabled::-webkit-calendar-picker-indicator,
input[type=date]:disabled::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
answered Jan 3 at 14:58
DautDaut
1,1481924
Ah, wonderful!! Thank you :)
– Daniel Slätt
Jan 3 at 15:00
1
@DanielSlätt See the edit if you would like to use this only on disabled inputs
– Daut
Jan 3 at 15:17
add a comment |
It is caused by default input controls being present (but invisible due to the input being disabled) when you give it month type. The inputs text is centered relatively to the inputs width minus the width of the controls. One way around it is giving them a manually selected margin to visually center the text.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
box-sizing:border-box;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: -15px; /* <-- Apparently some margin are still there even though it's hidden */
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>answered Jan 3 at 15:00
aMJayaMJay
1,58041323
add a comment |
@Daut has given a good explanation about the rendering of hidden elements in the month input.
You could go with the solution but it adds another challenge. Now, you are forced to make sure that the CSS has enough properties to render correctly in all browsers. Then you usually go for polyfills or you could just mark the input type as text.
answered Jan 3 at 15:02
Aditya GuptaAditya Gupta
8811922
If I were to have to concern about browsers then yes, I probably wouldn't keep it this way. But it's for an electron app so it's fine :)
– Daniel Slätt
Jan 3 at 15:03
Oh, yeah. Missed that.
– Aditya Gupta
Jan 3 at 15:03
The reason I have a disabled month selector is I have programmed two buttons to slide it right or left
– Daniel Slätt
Jan 3 at 15:03
Haha, that's no worries, I never clarified :) Your input could still be relevant for other people with similar issues.
– Daniel Slätt
Jan 3 at 15:04
Cool. I deleted my comment after getting it. Makes sense now.
– Aditya Gupta
Jan 3 at 15:05
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024542%2fhow-to-center-the-content-of-month-input-field%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
This doesn't work as expected because of the way input type="month" is rendered.
If you remove the disabled attribute you will see that (depending on the browser) you have some arrows and carets on the right. Taking them into account your text is in dead center.
You need to add this CSS
input[type=month]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-inner-spin-button {
display: none;
-webkit-appearance: none;
}
et voila
EDIT:
You can use :disabled CSS selector so it doesn't affect your other inputs
input[type=date]:disabled::-webkit-calendar-picker-indicator,
input[type=date]:disabled::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
answered Jan 3 at 14:58
DautDaut
1,1481924
Ah, wonderful!! Thank you :)
– Daniel Slätt
Jan 3 at 15:00
1
@DanielSlätt See the edit if you would like to use this only on disabled inputs
– Daut
Jan 3 at 15:17
add a comment |
This doesn't work as expected because of the way input type="month" is rendered.
If you remove the disabled attribute you will see that (depending on the browser) you have some arrows and carets on the right. Taking them into account your text is in dead center.
You need to add this CSS
input[type=month]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-inner-spin-button {
display: none;
-webkit-appearance: none;
}
et voila
EDIT:
You can use :disabled CSS selector so it doesn't affect your other inputs
input[type=date]:disabled::-webkit-calendar-picker-indicator,
input[type=date]:disabled::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
answered Jan 3 at 14:58
DautDaut
1,1481924
Ah, wonderful!! Thank you :)
– Daniel Slätt
Jan 3 at 15:00
1
@DanielSlätt See the edit if you would like to use this only on disabled inputs
– Daut
Jan 3 at 15:17
add a comment |
This doesn't work as expected because of the way input type="month" is rendered.
If you remove the disabled attribute you will see that (depending on the browser) you have some arrows and carets on the right. Taking them into account your text is in dead center.
You need to add this CSS
input[type=month]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-inner-spin-button {
display: none;
-webkit-appearance: none;
}
et voila
EDIT:
You can use :disabled CSS selector so it doesn't affect your other inputs
input[type=date]:disabled::-webkit-calendar-picker-indicator,
input[type=date]:disabled::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
answered Jan 3 at 14:58
DautDaut
1,1481924
This doesn't work as expected because of the way input type="month" is rendered.
If you remove the disabled attribute you will see that (depending on the browser) you have some arrows and carets on the right. Taking them into account your text is in dead center.
You need to add this CSS
input[type=month]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-inner-spin-button {
display: none;
-webkit-appearance: none;
}
et voila
EDIT:
You can use :disabled CSS selector so it doesn't affect your other inputs
input[type=date]:disabled::-webkit-calendar-picker-indicator,
input[type=date]:disabled::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
answered Jan 3 at 14:58
DautDaut
1,1481924
edited Jan 3 at 15:16
answered Jan 3 at 14:58
DautDaut
1,1481924
answered Jan 3 at 14:58
DautDaut
1,1481924
answered Jan 3 at 14:58
DautDaut
1,1481924
1,1481924
Ah, wonderful!! Thank you :)
– Daniel Slätt
Jan 3 at 15:00
1
@DanielSlätt See the edit if you would like to use this only on disabled inputs
– Daut
Jan 3 at 15:17
add a comment |
Ah, wonderful!! Thank you :)
– Daniel Slätt
Jan 3 at 15:00
1
@DanielSlätt See the edit if you would like to use this only on disabled inputs
– Daut
Jan 3 at 15:17
Ah, wonderful!! Thank you :)
– Daniel Slätt
Jan 3 at 15:00
Ah, wonderful!! Thank you :)
– Daniel Slätt
Jan 3 at 15:00
1
1
@DanielSlätt See the edit if you would like to use this only on disabled inputs
– Daut
Jan 3 at 15:17
@DanielSlätt See the edit if you would like to use this only on disabled inputs
– Daut
Jan 3 at 15:17
add a comment |
It is caused by default input controls being present (but invisible due to the input being disabled) when you give it month type. The inputs text is centered relatively to the inputs width minus the width of the controls. One way around it is giving them a manually selected margin to visually center the text.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
box-sizing:border-box;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: -15px; /* <-- Apparently some margin are still there even though it's hidden */
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>answered Jan 3 at 15:00
aMJayaMJay
1,58041323
add a comment |
It is caused by default input controls being present (but invisible due to the input being disabled) when you give it month type. The inputs text is centered relatively to the inputs width minus the width of the controls. One way around it is giving them a manually selected margin to visually center the text.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
box-sizing:border-box;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: -15px; /* <-- Apparently some margin are still there even though it's hidden */
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>answered Jan 3 at 15:00
aMJayaMJay
1,58041323
add a comment |
It is caused by default input controls being present (but invisible due to the input being disabled) when you give it month type. The inputs text is centered relatively to the inputs width minus the width of the controls. One way around it is giving them a manually selected margin to visually center the text.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
box-sizing:border-box;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: -15px; /* <-- Apparently some margin are still there even though it's hidden */
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>answered Jan 3 at 15:00
aMJayaMJay
1,58041323
It is caused by default input controls being present (but invisible due to the input being disabled) when you give it month type. The inputs text is centered relatively to the inputs width minus the width of the controls. One way around it is giving them a manually selected margin to visually center the text.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
box-sizing:border-box;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: -15px; /* <-- Apparently some margin are still there even though it's hidden */
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html> <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
box-sizing:border-box;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: -15px; /* <-- Apparently some margin are still there even though it's hidden */
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html> <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
box-sizing:border-box;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: -15px; /* <-- Apparently some margin are still there even though it's hidden */
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>answered Jan 3 at 15:00
aMJayaMJay
1,58041323
answered Jan 3 at 15:00
aMJayaMJay
1,58041323
answered Jan 3 at 15:00
aMJayaMJay
1,58041323
answered Jan 3 at 15:00
aMJayaMJay
1,58041323
1,58041323
add a comment |
add a comment |
@Daut has given a good explanation about the rendering of hidden elements in the month input.
You could go with the solution but it adds another challenge. Now, you are forced to make sure that the CSS has enough properties to render correctly in all browsers. Then you usually go for polyfills or you could just mark the input type as text.
answered Jan 3 at 15:02
Aditya GuptaAditya Gupta
8811922
If I were to have to concern about browsers then yes, I probably wouldn't keep it this way. But it's for an electron app so it's fine :)
– Daniel Slätt
Jan 3 at 15:03
Oh, yeah. Missed that.
– Aditya Gupta
Jan 3 at 15:03
The reason I have a disabled month selector is I have programmed two buttons to slide it right or left
– Daniel Slätt
Jan 3 at 15:03
Haha, that's no worries, I never clarified :) Your input could still be relevant for other people with similar issues.
– Daniel Slätt
Jan 3 at 15:04
Cool. I deleted my comment after getting it. Makes sense now.
– Aditya Gupta
Jan 3 at 15:05
add a comment |
@Daut has given a good explanation about the rendering of hidden elements in the month input.
You could go with the solution but it adds another challenge. Now, you are forced to make sure that the CSS has enough properties to render correctly in all browsers. Then you usually go for polyfills or you could just mark the input type as text.
answered Jan 3 at 15:02
Aditya GuptaAditya Gupta
8811922
If I were to have to concern about browsers then yes, I probably wouldn't keep it this way. But it's for an electron app so it's fine :)
– Daniel Slätt
Jan 3 at 15:03
Oh, yeah. Missed that.
– Aditya Gupta
Jan 3 at 15:03
The reason I have a disabled month selector is I have programmed two buttons to slide it right or left
– Daniel Slätt
Jan 3 at 15:03
Haha, that's no worries, I never clarified :) Your input could still be relevant for other people with similar issues.
– Daniel Slätt
Jan 3 at 15:04
Cool. I deleted my comment after getting it. Makes sense now.
– Aditya Gupta
Jan 3 at 15:05
add a comment |
@Daut has given a good explanation about the rendering of hidden elements in the month input.
You could go with the solution but it adds another challenge. Now, you are forced to make sure that the CSS has enough properties to render correctly in all browsers. Then you usually go for polyfills or you could just mark the input type as text.
answered Jan 3 at 15:02
Aditya GuptaAditya Gupta
8811922
@Daut has given a good explanation about the rendering of hidden elements in the month input.
You could go with the solution but it adds another challenge. Now, you are forced to make sure that the CSS has enough properties to render correctly in all browsers. Then you usually go for polyfills or you could just mark the input type as text.
answered Jan 3 at 15:02
Aditya GuptaAditya Gupta
8811922
answered Jan 3 at 15:02
Aditya GuptaAditya Gupta
8811922
answered Jan 3 at 15:02
Aditya GuptaAditya Gupta
8811922
answered Jan 3 at 15:02
Aditya GuptaAditya Gupta
8811922
8811922
If I were to have to concern about browsers then yes, I probably wouldn't keep it this way. But it's for an electron app so it's fine :)
– Daniel Slätt
Jan 3 at 15:03
Oh, yeah. Missed that.
– Aditya Gupta
Jan 3 at 15:03
The reason I have a disabled month selector is I have programmed two buttons to slide it right or left
– Daniel Slätt
Jan 3 at 15:03
Haha, that's no worries, I never clarified :) Your input could still be relevant for other people with similar issues.
– Daniel Slätt
Jan 3 at 15:04
Cool. I deleted my comment after getting it. Makes sense now.
– Aditya Gupta
Jan 3 at 15:05
add a comment |
If I were to have to concern about browsers then yes, I probably wouldn't keep it this way. But it's for an electron app so it's fine :)
– Daniel Slätt
Jan 3 at 15:03
Oh, yeah. Missed that.
– Aditya Gupta
Jan 3 at 15:03
The reason I have a disabled month selector is I have programmed two buttons to slide it right or left
– Daniel Slätt
Jan 3 at 15:03
Haha, that's no worries, I never clarified :) Your input could still be relevant for other people with similar issues.
– Daniel Slätt
Jan 3 at 15:04
Cool. I deleted my comment after getting it. Makes sense now.
– Aditya Gupta
Jan 3 at 15:05
If I were to have to concern about browsers then yes, I probably wouldn't keep it this way. But it's for an electron app so it's fine :)
– Daniel Slätt
Jan 3 at 15:03
If I were to have to concern about browsers then yes, I probably wouldn't keep it this way. But it's for an electron app so it's fine :)
– Daniel Slätt
Jan 3 at 15:03
Oh, yeah. Missed that.
– Aditya Gupta
Jan 3 at 15:03
Oh, yeah. Missed that.
– Aditya Gupta
Jan 3 at 15:03
The reason I have a disabled month selector is I have programmed two buttons to slide it right or left
– Daniel Slätt
Jan 3 at 15:03
The reason I have a disabled month selector is I have programmed two buttons to slide it right or left
– Daniel Slätt
Jan 3 at 15:03
Haha, that's no worries, I never clarified :) Your input could still be relevant for other people with similar issues.
– Daniel Slätt
Jan 3 at 15:04
Haha, that's no worries, I never clarified :) Your input could still be relevant for other people with similar issues.
– Daniel Slätt
Jan 3 at 15:04
Cool. I deleted my comment after getting it. Makes sense now.
– Aditya Gupta
Jan 3 at 15:05
Cool. I deleted my comment after getting it. Makes sense now.
– Aditya Gupta
Jan 3 at 15:05
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024542%2fhow-to-center-the-content-of-month-input-field%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
jsfiddle.net/8aqLzg4x works fine here? I just copy pasted your code.
– Denisx
Jan 3 at 14:46
1
It is working fine with center right? any screenshot for expected output.
– Anji
Jan 3 at 14:49
I'm using Opera and originally it's an electron app (same problem on both platforms). I have print screened what I see when I view the link you provided. I'm suspecting the problem might be related to me displaying the month input in Swedish? If you look closely at the picture it isn't centered.
– Daniel Slätt
Jan 3 at 14:50
1
@DanielSlätt, do you want to align input box text vertically center?
– Anji
Jan 3 at 14:52
That's what I want :) (P.S - just realized I forgot to specify that it's the text I'm having trouble with - sorry!)
– Daniel Slätt
Jan 3 at 14:52