Same source, no difference, but Vertical Align only works on jsfiddle. Please help me to answer.
This is HTML Source, it doesn't work on Chrome:
<html>
<head>
<title>Demo</title>
<style>
.checkboxOfField
{
display: inline-block;
width: 100%;
background-color: red;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<span class="checkboxOfField">
<input style="text-align: center; vertical-align: middle" type="checkbox" />
</span>
</body>
</html>
And this is jsfiddle link: http://jsfiddle.net/UghzT/
It works on Chrome. Thanks.
Probably because of Quirksmode?
Add a Doctype!
Why adding the style to the input? It isn't doing anything.
The input has a type="checkbox" attribute. Thus text-align:center; is a bit strange because there will never be text inside. Even the vertical-align property does not belong there. There isn't anything inside the checkbox to align...
The CSS code you have will do in order to align everything in the span in the middle.
Check this jsFiddle. I deleted the ´style` attribute and it still works great.
Related
I have this Japanese text segmented into <span>s. In the images below I added red borders to the spans to illustrate the problem. The vertical text is achieved using the writing-mode: vertical-rl; CSS property on the surrounding div.
Browser: Chromium
Browser: Firefox
Browser: Android
As you can see the text inside centred inside each span either having a gap left or at the top. Or in the case of Android it doesn't even seem to put each character inside of a square. Is there a way to ensure each character is perfectly centred inside of the <span>s?
Example HTML file:
<!DOCTYPE html>
<html lang="ja">
<style>
span {
border: 1px solid red;
text-align: center;
}
</style>
<body>
<div>
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
<br>
<div style="writing-mode: vertical-rl">
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
</body>
</html>
Result seems to depend on the browser!
It would be more helpful if I could see the CSS code, but try using the text-align CSS property if you haven't yet.
You can use it like this: text-align: center;
span {
border: 1px solid red;
text-align: center;
font-size: 30px;
}
<!DOCTYPE html>
<html lang="ja">
<body>
<div>
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
<br>
<div style="writing-mode: vertical-rl">
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
</body>
</html>
You should look at this post. Try padding-right or text-align: center on the CSS. I could probably tell you what is is if I saw the code.
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.
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;
}
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>
#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.
I am facing a strange problem. I prepared an html page in jsfiddle and putting same code in one html in below method.
<html>
<style>
jsfiddle css
</style>
jsfiddle html code
</html>
my jsfiddle: jsfiddle
having this as test.html and opening in chrome. It shows perfect in jsfiddle but shows an extra tab (or maybe some whitespaces) before the second item ("Comments:") in div. I am not able to figure out the reason. Please help.
I would suggest you to enhance your code a little to get fields show up they way you desire.
<div class="dtl">
<div>
<b> Name:</b><span class="input"><input class="inputtxt" type="text"></span>
</div>
<div style="clear:both;"></div>
<div>
<b> Comments:</b><span class="input"><input class="inputtxt" type="text"></span>
</div>
</div>
JSFiddle: JSFiddle
Just use this small reset to remove any built-in styles from the browser. This removed any and all built-in spacing in your fiddle.
* { margin: 0; padding: 0; box-sizing: border-box }
Make this changes to your CSS and see if it solves the problem:
/* add these lines */
label {
display:block;
float: left;
}
span.input {
display: block;
float:right; /* ADD THIS LINE */
overflow: hidden;
padding-right: 1px;
padding-left: 1px;
}
and then:
span > input.inputtxt{ /* CHANGE THIS AS WELL */ width: 290px; height:12px; border:none;}
And apply a <label></label> for each input.
<div class="dtl">
<b><label>Name:</label></b>
<span class="input"><input class="inputtxt" type="text" /></span>
<b><label>Comments:</label></b>
<span class="input"><input class="inputtxt" type="text" /></span>
</div>
It seems to get better in the JSFiddle. Try it out.
Check the results: JSFiddle Result
It looks like the jsfiddle has line-height:normal as default and the local html has line-height:1.
The tab comes from the different heights of the input elements, and since you are floating, the second label floats after the first horizontally because there is still vertical space before a new line is needed.
add span.input { line:height:1 } to see consistent results.
I have created a scrollbar and it works perfectly fine in google chrome and firefox but not in IE. I have a feeling it has to do with the line-height property.
My Code:
Html:
<div id="scrollbar"><br /></div>
Css:
#scrollbar {
margin-top: 10px;
height: 220px;
float: right;
overflow-y: scroll;
line-height: 403px;
}
Here is my jsfiddle.
Anyway to get this to work in IE?
Change the <br/> to a . IE picks up the non-breaking space a bit better than just a <br> tag.
http://jsfiddle.net/s9sycey1/3/
I figured it out. Instead of <br /> I used <span class="hidden">/</span> and I set my css to .hidden { visibility: hidden }. Here is my updated jsfiddle.
Anyone see a reason why this isn't working? (works with width, just not min-width)
input[type="button"] {
min-width: 100px;
}
EDIT: clarification
"button" selector works with width,
just not min-width
min-width works with other elements, just not
"button" selector
This is on
chrome/safari. Not an IE issue.
I just ran into this problem too. min-width does work, but might not give you the results you expect or might appear not to work due to buttons having a default box-sizing of border-box. Try setting box-sizing: content-box on the button.
While investigating this answer, I found that altering the border-color property of a button also enables the min-width CSS property in Chrome. (It also disables several built-in properties, like the default button background color, so use with caution.)
min-width should work perfectly, you just can't see effects maybe because you make min-width less than width.. anyway example for fine html code:
<input type="button" style="width:50px;height:5em;min-width:40px;"
Yes... it does work provided you style it this way:
input[type="submit"], button, .button, a.actionlink {
cursor: pointer;
display: inline-block;
font-family: "Arial","Verdana","Helvetica","sans-serif";
font-size: 12px;
font-weight: bold;
min-width: 85px;
-moz-outline: 0 none;
outline: 0 none;
padding-bottom: 7px;
padding-top: 7px;
text-align: center;
}
I found a simple answer here:
.button-class {
box-sizing: unset;
width: 100%;
/* additional style properties */
}
This will set the width to be 100% of the parent. Basically you just need to unset the box-sizing property that prevents you from setting the width property. This solution works with <input type="button"> <input type="submit"> and <button> HTML tags.
min-width isn't supported and/or is buggy in older versions Internet Explorer.
You can see a compatibility table here.
Here is an example of min-width being used on a form element, it is always wise to set a width property to it too.
<html>
<head>
<title>TAG index</title>
<style type="text/css">
.example {
width: 100%;
max-width: 600px;
min-width: 500px;
}
textarea {
height: 10em;
}
</style>
</head>
<body>
<p>minimum width:500px - maximum width:600px</p>
<form method="POST" action="example.cgi">
<p><input type="text" name="item1" class="example"></p>
<p><select name="item2" class="example">
<option value="select1">Select1</option>
<option value="select2">Select2</option>
<option value="select3">Select3</option>
</select></p>
<p><textarea name="item3" cols="50" rows="10" class="example"></textarea></p>
</form>
</body>
</html>
I just encountered like this issue and find the way to fix.
But using button tag, not input.
input[type="button"] {
min-width:100px;
}
--[change to]-->
button {
width:auto;
min-width:100px;
}