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;
Related
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 />
A simple CSS issue that I can never seem to fix quickly -
I have a line of text followed by a form which consists of some invisible inputs and a submit button. I've removed the border and the background from the submit so just the text -
My html -
<p>Posted about 21 hours ago.</p>
<form class="button_to" data-remote="true" action="/comments/8/likes/114" method="post">
<input type="hidden" ...... > <!--not actual markup -->
<input type="submit" value="unlike" html_options="classlike_button_form">
</form>
my css -
p {
color: #595959;
float: left;
font: 85% "Arial",Verdana,sans-serif;
line-height: 131%;
padding-bottom: 0;
}
input {
background-color: transparent;
border: 0 none;
color: #3B5998;
font: 85% "Arial",Verdana,sans-serif;
float:left
}
The problem is that the text in the p tag and the text from the button are not aligned horizontally.
I'm using the reset css and Yahoo text sizing included in the HTML5 boilerplate.
I really don't want to fix it with margins or positioning, so any help would be great.
Thanks
EDIT - I'm unable to change the HTML structure
This seems to work: http://jsfiddle.net/8BHtz/6/
I removed the floats and added display: inline-block; vertical-align: middle; to p and form. It works in Chrome, Firefox, Safari and IE8. However, because of inline-block it does not work properly in IE7 or lower. Since p and form are now displayed inline you may want to wrap them in a div (http://jsfiddle.net/8BHtz/7/).
Looks ok when I plug your html and CSS into jsFiddle: http://jsfiddle.net/LAzUf/. Do you have Firebug? Does it look like the input tag is inheriting styles from another setting?
Usually <legend> text is pretty short so I had no idea this was a problem until I ran into it yesterday. I was trying and failing to set a 50% width on a <fieldset>, but it wouldn't work due to long legend text. Either the fieldset won't be smaller than the legend, or the legend's width exceeds that of the fieldset.
This doesn't seem to be an issue in IE8, Chrome, Safari, Opera, and maybe others. It is an issue in Firefox, IE6, and IE7.
Goal: Get text to wrap in a <legend> cross-browser
Without setting any fixed widths
Hopefully without extra markup
Without javascript
Any way we can if the above are impossible
Without giving up and using a different tag
I've seen this post: Getting LEGEND tags to wrap text properly
...But there is only a single answer that uses a <div> with a fixed width inside the legend tag, I can't actually get it to work (see fiddle), and OP closed with the comment "in the end we gave up". Googling this subject turns up a whole lot of "not much" as well.
I put up a jsfiddle demo with some CSS I've tried. As I said, I've never run into this before so I'm baffled that this is so difficult, and I can't seem to get anything to work. Is it really just impossible?
Adding white-space: normal; to the legend works fine except in IE7 and IE6. Please see this jsfiddle demo
After playing around a bit with the CSS, I got it work on IE7, IE8, IE9, FF3-4, and Chrome11 by adding a <span> inside the <legend> with the below CSS:
legend {
white-space: normal;
width: 100%;
*margin-left: -7px;
}
legend span {
display:block;
width: 100%;
}
Please have a look at this jsfiddle
It's been a while since the question was posted, but now IE10 is here for some time and still sux while beeing so 'modern'. additionally one has no ability to use conditional comment. Here's what does the trick:
legend {
white-space: normal;
display: table; /* IE10 */
}
Add white-space:normal to your legend to force the text to wrap.
legend{
color:green;
white-space:normal;
}
For more read this article: http://beckism.com/2008/12/display_block_legend/
Try this simpler approach:
legend{
color:green;
white-space: normal;
}
That should sort your legend out. Your next problem becomes the background color of your fieldset, but that's easily solved by wrapping the whole thing in a div and styling that.
In case somebody needs a fix that works for Microsoft Internet Explorer 11 and Edge while not interfering with Chrome/Firefox/Safari:
legend {
display: table;
max-width: 100%;
}
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've seen this post already and tried everything I could to change the padding for my placeholder but alas, it seems it just doesn't want to cooperate.
Anyway, here is the code for the css. (EDIT: This is the generated css from sass)
#search {
margin-top: 1px;
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
#search form {
position: relative;
}
#search input {
padding: 0 10px 0 29px;
color: #555555;
border: none;
background: url('/images/bg_searchbar.png?1296191141') no-repeat;
width: 180px;
height: 29px;
overflow: hidden;
}
#search input:hover {
color: #00ccff;
background-position: 0px -32px;
}
And here's the simple html:
<div id="search">
<form>
<input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
</form>
<div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
<ul id="search-results" class="dropdown">
</ul>
</div>
</div>
Pretty simple? the placeholder is off for some reason but when you try to type in the input field, the text is the aligned. It seems that you can only change the color(for webkit) of the placeholder, but if I try to edit the padding of the containing input, it wrecks the design of the input! pulls out hair
Here are screenies of the placeholder and the input field with text input:
EDIT:
For now I have resorted to this jquery plugin.
It works right out of the box and it fixes my chrome's problem. I would still like to uncover what the problem is (if it has something to do with MY chrome or something)
I'm pretty sure it's not the styles since John Catterfeld reproduced it with no problems, so I'm hoping someone out there could still point me to the right direction as to why this is happening to me(my client's chrome as well. So this is probably native to Chrome/OSX if John is using windows)
I got the same issue.
I fixed it by removing line-height from my input. Check if there is some lineheight which is causing the problem
I had similar issue, my problem was with the side padding, and the solution was with, text-indent, I wasn't realize that text indent effect the placeholder side position.
input{
text-indent: 10px;
}
If you want to keep your line-height and force the placeholder to have the same, you can directly edit the placeholder CSS since the newer browser versions. That did the trick for me:
input::-webkit-input-placeholder { /* WebKit browsers */
line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
line-height: 1.5em;
}
line-height: normal;
worked for me ;)
Angular Material
add in the placeholder if padding did not work - but not a recommended way
<input matInput type="text" placeholder=" Email">
Non Angular Material
Add padding to your input field, like below. Click Run Code Snippet to see demo
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container m-3 d-flex flex-column align-items-center justify-content-around" style="height:100px;">
<input type="text" class="pl-0" placeholder="Email with no Padding" style="width:240px;">
<input type="text" class="pl-3" placeholder="Email with 1 rem padding" style="width:240px;">
</div>
I had a problem, which appears just in internet explorer. Input field was styled
height:38px;
line-height:38px;
Unfortunately in IE the initial placeholder appears not at the correct position. But when I have clicked into the field and then left this field, the placeholder appeared on the right position.
My solution was to set:
line-height:normal;
Setting line-height: 0px; fixed it for me in Chrome
If you want move placeholder text right and leave the cursor on the blank space you need to add space(s) at the start of the placeholder attribute:
<input type="email" placeholder=" Your email" />
Removing the line-height indeed makes your text align with your placeholder-text, but it doesn't properly solve your problem since you need to adapt your design to this flaw (it's not a bug). Adding vertical-align won't do the deal either. I haven't tried in all browsers, but it doesn't work in Safari 5.1.4 for sure.
I have heard of a jQuery fix for this, that is not cross-browser placeholder support (jQuery.placeholder), but for styling placeholders, but I haven't found it yet.
In the meantime, you can resolve to the table on this page which shows different browser support for different styles.
Edit: Found the plugin! jquery.placeholder.min.js provides you with both full styling capabilities and cross-browser support into the bargain.
Remove line-height or set using padding...it's working in all browser
I've created a fiddle using your screenshot as a background image and stripping out the extra mark-up, and it seems to work fine
http://jsfiddle.net/fLdQG/2/ (webkit browser required)
Does this work for you? If not, can you update the fiddle with your exact mark-up and CSS?
I noticed the issue the moment I updated Chrome on os x to the latest stable release (9.0.597.94) so this is a Chrome bug and hopefully will be fixed.
I'm tempted not to even attempt to work around this and just wait for the fix. It'll just mean more work taking it out.
The placeholder is not affected by line-height and padding is inconsistent on browsers.
I have found another solution though.
VERTICAL-ALIGN. This is probably the only time it works but try that instead and cave many lines of CSS code.
I found the answer that remedied my frustrations regarding this on John Catterfeld's blog.
... Chrome (v20-30) implements almost all styles but with a major caveat – the placeholder styles do no resize the input box, so stay clear of things like line-height and padding top or bottom.
If you are using line-height or padding you are going to be frustrated with the resulting placeholder. I haven't found a way around that up to this point.