I'm trying to implement a custom design for an input element, which requires me to use the font Akko Pro Light. However, when I do so, the text strangely aligns vertically to the top of the line. This is true for the placeholder text as well as any text I actually write into the element.
While testing, other fonts do not produce the same problem.
try using justify-content: center; in css along with text-align: center; unfortunately without seeing the code it is hard to know what you are doing to find what is happening
Make a padding to create a space arround and line-height. Awoid non-standard fonts, it reduces the permonance of your site.
#field1 {
line-height: 30px;
padding: 10px;
}
field: <input type="text" value="field1" id="field1" /><br />
Related
I'm trying to understand what makes <button> tag to position text right in the center of the element by default. Horizontal alignment is controlled by the text-align: center. What controls the vertical alignment?
Here is the fiddle to play with: http://jsfiddle.net/GW9KL/
Here is Chrome default stylesheets for <button>. Can't see what makes it vertically aligned.
This question intrigued me so I began to investigate. To cut a long story short, in chrome at least, display: -webkit-box; is applied to button elements. I had to install a developer plugin to see it. i have copy and pasted the styling and applied it to a div. A JSfiddle shows the results
Example http://jsfiddle.net/GW9KL/2/
div {
text-align: center;
color: buttontext;
border: 2px outset buttonface;
background-color: buttonface;
font: -webkit-small-control;
-webkit-appearance: button;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
Unfortunately, there is no CSS property that defines the vertical alignment of <button> text and it is handled differently depending on the browser it's viewed in. Most solutions involve line-height or padding fixes for quick and dirty, but ultimately it seems best to go with alternatives such as using styled <div> elements.
This post was helpful for me about button text: Position of text in a submit button
Here is the W3C spec on the vertial-align property, which points out that it applies to "inline-level and 'table-cell' elements": http://www.w3.org/TR/CSS2/visudet.html
If you're looking for how browsers decide where the text lies, then the comments on this are correct. It's up to the browser and it's going to be hidden in the code and unmanipulable.
Lately i've been through a lot of times on a single situation problem:
I have a text input element in a web formulary, inside a bigger div with defined width.
Inside that bigger div, i'll put a span text like "Name: " and then i'll put the input.
I want the input to auto become as much as wider the space of the div that the span is not using.
The code would be something like this:
<div>
<span>Name:</span>
<input type="text" name="name" />
</div>
And the CSS:
div {
width: 200px;
display: block;
}
span {
display: inline-block;
font: 11px 'Lucida Sans', Verdana, Arial;
}
input {
height: 20px;
width: auto;
display: block;
}
I've been doing some research, but i seem unable to find a precise solution for this problem.
So far i've been skipping this problem by putting a inline style defining a different width for each element. But if i change the font, size, or whatever, it'll explode.
I don't like to build a fortress wall and leave it full of holes for snipers. That's why i'm looking for help :)
If you guys have any suggestion, solution or workaround way, I'd be glad to know. =D Thanks.
Semantically it's better to use label tags for this purpose:
<label>Name:</label>
Concerning your question, take a look at the CSS3 flexible box model: http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
Or if you prefer a video: http://www.youtube.com/watch?v=-OubGOxKa5I
At the time of writing, Mozilla and Webkit support this and there is a fallback for other browsers: https://github.com/doctyper/flexie
Sorry, but it's not possible with that markup. Actually the only way to do it is to shudder use tables (or display: table-cell, etc but that doesn't work in IE7 or earlier). It also generally looks better to have all the inputs aligned, don't you think?
Change display: block to display: inline for input and I think it should work.
Here is an example
http://jsfiddle.net/KYvzM/
I have an HTML tag with a short maxlength but a long value attribute. I'd like the displayed text to show the end (right side) of the text, rather than the start (left side).
<input maxlength=10 value="A really really really long entry goes in here"/>
currently shows:
"A really r"
instead I'd like it to show:
"es in here"
Cheers,
Ian
Do you want the visible area to start from the right? you can use css and the following rule input {direction:rtl;}
rtl means from right to left
example: http://jsbin.com/ilejo4
PS: the value of maxlength in your html must be wrapped with quotes, also you have to set the type of the input
Add style="text-align:right" to the input tag.
If you only want to display information, what you can do is place a span inside a div, in the div write overflow:hidden, display flex, justify-content: flex-end;
.contenedor{
width: 100px;
background-color: black;
color: white;
border-radius: 5px;
display: flex;
justify-content: flex-end;
overflow:hidden;
padding: 5px;
}
<div class="contenedor"><span>12345555555566final</span></div>
I have an input field:
<input type="text" placeholder="whatever">
with styles:
input {
margin: 0;
padding: 0 6px;
font-size: 19px;
line-height: 19px;
height: 36px;
width: 255px;
}
Problem is the line-height is not taking effect for the placeholder in webkit CHROME. so the text in the input field is aligned in an ugly way. Anyone else seen this and now how to fix it?
Thanks
Input placeholders don't seem to like pixel line-height values, but this will vertically centre it in the input:
::-webkit-input-placeholder { line-height: normal; }
Looking at your tags, I'm assuming you are writing something like...
<input type="text" placeholder="whatever">
Unfortunately, Chrome ties your hands when it comes to styling the placeholder, the selector looks like this...
input::-webkit-input-placeholder {}
You can find the styling options, gotchas and supported browsers in Styling the HTML Placeholder
It appears that removing your line-height declaration entirely works. It's worked for me in FF7, Chrome15 and Safari 5.1. Also looked good in IE9 and FF3.6 but does NOT look good in IE8.
I don't think I can fully replicate your problem, but perhaps you can fix it using padding: 7px 6px;.
Doing this should hopefully set your top and bottom padding to 7px which pretty much does a similar job as line-height. With different sizes (width/font-size) you should be able to choose the appropriate padding by calculating (height - fontsize) / 2 perhaps give or take a pixel or two for perfection.
I am currently trying to justify text in a textarea, unfortunately the CSS:
text-align: justify;
Doesn't work on the text like center, left and right do. I've tried this in both Firefox 3 and IE 7 with no luck.
Is there any way around this?
I dealt with same issue and found out very stupid solution. Make sure that the text to be displayed falls within the start and end tag elements in the same line and not in the next line
<textarea name="description" readonly="readonly" rows="4" cols="66">Text aligned toward left</textarea>
and not like
<textarea name="description" readonly="readonly" rows="4" cols="66">
Text aligned toward left
</textarea>
Depending on your target browser... this solution works in Chrome. It does not work work in Firefox however... but I'll post it anyway.
In addition to setting text-align: justify, you must also set white-space: normal.
textarea {
text-align: justify;
white-space: normal;
}
JSFIDDLE: http://jsfiddle.net/cb5JN/
I believe that common practice is to use the TEXTAREA for input without worying about justification; and then, once the input is processed (i.e. the FORM is submitted, or an event of the TEXTAREA is captured), the contents are displayed in a non-editable text element (such as P, SPAN, TD) where the text-align: justify; style attribute will be honored.
For me (in Firefox), this code works perfectly:
textarea{
resize: none;
text-align: justify;
white-space: pre-line;
-moz-text-align-last: left;
text-align-last: left;
}
Using a common div with contenteditable="true" worked in my case. Doesn't work for most mobile browsers though.
<div contenteditable="true">Some content</div>
i dont think this is possible in the html textarea element. you might be able to use some sort of wysiwyg editor (editable div). ie. fckeditor
It works fine on Chrome, but not on IE.
text-align: justify;
white-space: normal;