For a readonly view, I want to swap textboxes for plain text (because it looks nicer than disabled textboxes.
However, plain text doesn't have the same margin/border/padding values, so the text no longer aligns with labels, where the textbox did.
What's an appropriate technique for making the plain text still line up with the existing label?
Put it in an display:inline-block div. vertical-align:baseline might help as well. Depending on the markup of the label you would need to change the label to an inline-block as well.
(If you could provide some markup it might be easier to assist. jsfiddle maybe?)
Related
I'm having an issue getting the text in one of my input boxes to begin at the top of the input box. Instead, it is vertically centered. None of the other solutions on stackoverflow seemed to help.
I've recreated the issue here (ignore how bad the rest of the form looks ;): http://codepen.io/tim1017/pen/ofuhx
And here's the actual page it's located on: http://dev.longviewsources.com/contact/
Thanks!
For multi-line text, which it looks like you're going for, you probably want to use a <textarea>, not a text input tag.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
Also see: Multiple lines of input in <input type="text" />
You're using an input where you should use a textarea. Input elements only support one line of input, thus it is centering that one line vertically. Here's a working fork: http://codepen.io/anon/pen/LBvsd
corrected and forked you can check the css and example;
here
I've got a <textarea>, but I need to color specific lines different colors. Apparently, I can't do this.
I could perhaps use a <div>, but I like the look and scrollbar of a <textarea>.
Is there any sort of database of HTML elements somewhere that I can check? It's rather annoying having to burden the posters of StackOverflow whenever I can't place the name of an element.
Textareas can only contain plain text. No possibility to format via CSS. You need something like a WYSIWYG Editor (CKEditor or TinyMCE)
Or if readonly, filled by javascript:
Use a simple div which can contain HTML markup inside for your line colors. Then style it with CSS to look like a textarea (scrollbar maybe)
I've got a simple textarea in a form and for some reason when I click in the textarea to begin to type, it centers the first line. I can hit backspace until it lines up at the start of textarea but I don't know why it's doing that. I've Googled and can't seem to find a reason why it would do this. Here is my jsfiddle for it:
http://jsfiddle.net/4cVkn/
I've tried text-align:left in numerous places (inline HTML and CSS) and it doesn't seem to change anything. It seems like it should be a simple fix, thanks for the help.
It isn't centred, it just has a default value of a series of space characters.
Put </textarea> immediately after the start tag instead of filling it with whitespace.
The default content of a text area is the content between its tags. Your source has something like:
<textarea name="bio">
</textarea>
so the initial value of the text area is the newline and the spaces used for indentation – the characters you can backspace over.
To get rid of them, close the tag immediately:
<textarea name="bio"></textarea>
Aside: the kind of form layout you're going for should probably be done using tables – at least until the various shiny new CSS3 layouts are better supported. Your avoiding them actually made the code less readable what with all the <br/>s.
Is it possible to get a textbox ("input" with "type=text") to act like a textarea through CSS alone?
I can set the height and width, obviously, but I can't get it to wrap like a text area nor vertically align the contents like one.
I have a situation where I can't change the HTML of the page, but I can alter the CSS. My users want textareas where they just have textboxes, and I'm hoping I can pull it off with CSS alone.
I've tried about every combination of "white-space" and "vertical-align."
No. You would need some JavaScript as well to change the browser functions. For instance when you hit the enter key in a textbox it submits the form, where as in a text area it will add a new line.
Things like that can't be controlled by CSS to my knowledge.
I'm working with an <input> field and I'd like to style part of the field as the user's typing in a different color. For example, let's say the <input> has a style declaration of color: red; and I want to change part of it to color: blue;. Is there any way this is possible?
If there isn't (as I suspect), any creative ideas on how I can simulate this effect while still preserving semantic mark-up?
Your suspicions are correct: styles will apply to the whole input only.
As styles can apply to the entirety of an element only, a solution will require at least one element per required colour.
Consider the division of the input field with respect to the point at which the user is making changes. There are three sections of the input:
that before the point at which changes are being applied
that after the point at which changes are being applied
that at the point the changes are being applied
You cannot achieve this with a single input element. And as the point at which the changes are being applied can change, the portions of the 'input' wrapped by the three elements will also change. JavaScript is required for a solution.
You should initially include a regular input element and forgo any of the required colouring. Use JavaScript to replace the input with a suitable container element. This can be styled to mimic an input element.
As changes occur, use JavaScript to identify the above-mentioned three divisions. Wrap them in suitable elements (spans would be ideal) and colour as needed.
Consider the following starting point for the generated replacement markup:
<div class="input">
<span class="nonEdited before">foo</span>
<span class="edited">fizz</span>
<span class="nonEdited after">bar</span>
</div>
Use click, keydown and keyup events to figure out the three divisions for the input and to apply wrap the three portions of the faked input as required.
As others have said, you can't do this with styles and static markup.
You could probably do it with a Flash-based form.
But, if I had to this, I'd use jQuery to overlay divs, with the colorized text, atop the <input>.
Algorithm:
Use a normal <input> with whatever default styles are desired. The contents of this input will never change except by user action.
jQuery monitors that <input>. When it detects trigger word(s), it adds a <div> after the input and fills it with the trigger word(s) -- styled as desired. Probably one <div> per word or phrase is best.
jQuery then positions the new <div>, absolutely, directly over the trigger word(s).
Getting the trigger word(s) offset within the <input> might not even be necessary, because the previous words could also be in the overlay <div> -- either styled defaultly or with visibility: hidden.
But, if only the trigger word(s) are desired in the overlay, then using a fixed-width font, like Courier, will help with the sub-positioning.
Take care that the overlay does not interfere with the user trying to mouse or key to certain parts of the <input>. IE, probably don't want to cover any more of the <input> than necessary, and set a click() handler to relay focus.
Alternate, user friendly and simpler approach:
Rather than try to do funky, non-user-expected things to the input, take a page from Jakob Nielsen and from sites like StackOverflow.
Just have a plain ol' <input>, but underneath it, show the formatted text as it comes in.
You can achieve this with (a lot of effort and) a div with the contentEditable attribute present. This is how most web-based WYSIWYG editors achieve rich formatting of inputs. See here for more info: http://ajaxian.com/archives/on-browser-wysiwyg
You can keep differently styled divs side by side in a container overlapped by a transparent input. Modify the widths of the styled divs on the basis of your input entry.
For example, to color input background for leading and trailing spaces:
<div class="bckg-container">
<div id="bckg-leading" class="bckg spaces">
</div>
<div id="bckg-middle" class="bckg">
</div>
<div id="bckg-trailing" class="bckg spaces">
</div>
<br style="clear: left;" />
</div>
<input id="inpt" type="text" placeholder="Add leading/trailing spaces" maxlength="20" />
The three divs inside the container will change their width with input change.
Check the working example in jsfiddle http://jsfiddle.net/TalhaAwan/ywyw4qq5/
You might be able to do it with some edit in place javascript (if it's not possible in pure html/css):
http://www.appelsiini.net/projects/jeditable/default.html
That jQuery plugin doesn't use html input fields so it could be possible to style different parts of the input. It has a couple of hooks for callbacks which you could use to style the input. Hope that helps as an idea.
You can have a label mocking that input and the real input to be hidden, then you can do a lot of things beteen label tags (e.g. colored spans).