I would to make a readonly input appear like a pre or div tag with CSS.
I would have thought that it would have been easy to do with a textarea but it seems to be quite the task. I'm able to hide the border and the resizing but, for whatever reason, I can't make the textarea's height be determined by it's content.
I've seen a lot of stuff on using javascript to auto-resize textareas but is there anything I can do if it's static text that doesn't require javascript?
UPDATE
I just wanted to clarify the purpose of this: I'm looking to write, re-write with javascript, and submit a single readonly element with forms and, at the same time, not have it constrained to a single inline area which forces, at best, scrolling and, at worse, loss of data.
UPDATE 2
Per the request, I've created a fiddle to show an example of what I'm trying to do: http://jsfiddle.net/BUwdE/1/ .
textarea[readonly] {
width: 100%;
border: 0;
resize: none;
overflow: hidden;
}
You'll see that the content is cutoff at the bottom because the textarea's height isn't determined by its content.
I actually tried to do what you have been doing. But since it is going to be a read-only input, I actually ended up applying a CSS to a div element. This will be a hack which releases our headache.
HTML
<div class="faketextarea"> some long long text </div>
CSS
.faketextarea {
// css of a text area
}
You can specify the height of a textarea in HTML using the rows attribute, but that doesn't automatically resize. You might have to appeal to the W3C CSS Working Group to get what you want.
<textarea name="whatWillBeSentToServer" rows="4" readonly="readonly">
Modified from here:
function auto_grow(){
var ts = document.getElementsByTagName('textarea')
for (i in Object.keys(ts)){
ts[i].style.height = "5px";
ts[i].style.height = (ts[i].scrollHeight+49)+"px";
}
}
textarea {
resize: none;
overflow: hidden;
min-height: 50px;
max-height: 100px;
...
(properties for your needs)
}
<body onload='auto_grow()'>
<textarea>anytexts</textarea>
<textarea>texts 2</textarea>
</body>
The differences being I have assigned the auto_grow() function on the html <body> tag instead of the <textarea> tag
fiddle: https://jsfiddle.net/btq7m3a6/
More: https://jsfiddle.net/8o67huq2/
Related
I have a textarea that gets processed into an image. I need to force the user to type in a specific area including formatting and returns. The box should limit users from overflowing the box How can this be done?
I'm using cakephp as a framework and can therefore use html, css, php or js to accomplish this.
This is the textarea element I'm working with:
<textarea name="ch_text" id="ch_text" rows="8" tabindex="20"></textarea>
I tried adding a cols property, which didn't work. I tried setting wrap="true", which didn't work either. Is there a way to specify a height/width property that can't be exceeded?
The way I have usually seen this done is by enforcing a character or word limit. This can be done by using variables in the HTML code!
A combination of setting the maxlength on the element and then in CSS make sure to give a height and width and set resize to none.
textarea {
resize: none;
height: 100px;
width: 200px;
}
<textarea maxlength="10"></textarea>
Take the code here:
<p>Lorem ipsum <input type="text" value="algo" /> dolor sit ...</p>
Sample: http://codepen.io/dbugger/pen/KrAmPx
How can I make the input look like totally normal text, inside the paragraph? I set it to display: inline but the width seems still fixed.
Elements inherit certain default values from browsers. You need to "reset" all of them in order to make the input element appear as the surrounding text:
p input {
border: none;
display: inline;
font-family: inherit;
font-size: inherit;
padding: none;
width: auto;
}
This is as close as you can get with CSS alone. If you want a variable width, you will have to resort to JS instead of CSS, as adjusting an element to it's value is way beyond the scope of CSS. Modifying elements after the fact, based on user input or changes due to just-in-time effects, is what JS/jQuery are used for.
Note that depending on the browser you're using (and due to the possibility that future browsers might do things radically different that nowadays' practices), this list is not necessarily exhaustive.
The only way you can "fake" this effect in a clean manner without JS is to use an element with a contenteditable attribute, which (unlike an input element) will store user input in the content of the element instead of its value. For an example of this technique, see this answer
Though while you won't need JS to get the effect, you would need it to retrieve the content of the element. The only use past that I can imagine is if you're providing a printable document that never needs to programmatically handle the input or store it.
It looks like this is possible now. I found a post describing how to style the input so the HTML form styles are stripped.
Styling HTML forms
They used the following CSS, and for what I was trying to do, it worked perfectly:
input, textarea {
font : .9em/1.5em "handwriting", sans-serif;
border : none;
padding : 0 10px;
margin : 0;
width : 240px;
background: none;
}
Obviously this is too late for the original author, but I'm hoping other people will benefit from it.
Yes it is possible to do this by mimicing the styling with CSS and by using javascript to automatically adjust the length of the text.
Resize an input to the size of its content.
$(function(){
$('#hide').text($('#txt').val());
$('#txt').width($('#hide').width());
}).on('input', function () {
$('#hide').text($('#txt').val());
$('#txt').width($('#hide').width());
});
body,
#txt,
#hide{
font:inherit;
margin:0;
padding:0;
}
#txt{
border:none;
color:inherit;
min-width:10px;
}
#hide{
display:none;
white-space:pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum
<span id="hide"></span><input id="txt" type="text" value="type here ...">
egestas arcu.
</p>
Probably the best way to hack this is just to make your text field into an edit text field but make it uneditable, that way your text field and edit text fields will look the same.
2020 update. Partially you can make it look like normal text with appearance property, setting it to none. Unfortunately, there is nothing much you can do to make the lines wrap, except use js to replace it with the value. https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
I hope this is the answer you're looking for, but if you want to make an input field look like a normal paragraph (assumably so you can edit some of the text of the paragraph), the best way to do so is to:
Disable the input's border
.maskedinput {
border-style: none;
}
And then give it the same styles as the parent element, i.e. text color and bacground color etc etc, and then add a :focus to your CSS that changes the background color such that when the field is clicked, it will be highlighted.
Instead of using the <input> tags, you can use the <textarea> tags. They work almost exactly like <input> tags.
<textarea name="variable" rows="4" cols="50">
Placeholder
</textarea>
Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}
I have a form with 3 elements
<form>
<input type="search" value="long text" />
<select>
<option>Google</option>
<option>Bing</option>
</select>
<button>Search</button>
</form>
I would like to have the select and the button to have their own width, and the input to fill all the remaining space.
I found different solutions but they seems to not work properly.
Following how-to-make-element-fill-remaining-width-when-sibling-has-variable-width I get the desired effect (having to add markup and to change the order of the elements) but the input is overridden from the other elements, loosing its nice rounded borders.
button, select {
float: right;
}
input {
width: 100%;
}
.input_wrapper {
overflow: hidden
}
How can I do instead?
I need a cross-browser solution (>=IE7)
I would avoid (if possible) to use additional markup
I want to avoid that the the input could be overflown and hidden (as explained above).
PS - I usually try to avoid floats and stay with display-block. But all the suggestions are welcome
Ok, I think this can be done by setting the form to "display: table" and then the input, select and button to display: table-cell.
Then set widths on the first 2 elements and make the third element width: 100% and display: block.
Let me know how you get on.
I am unable to get the width and heigh properties to work for my custom tags please see code below:
CSS
x-slider
{
width: 1000px;
height: 300px;
border: 1px black solid;
background-color: #0000ff;
}
HTML
<body><x-slider id="CoolPics" page="home"></x-slider></body>
Javascript
var x = document.registerElement('x-slider', {
prototype: Object.create(HTMLDivElement.prototype), extends: 'div'
});
I added the Extension of the DIV object to see if that would allow me to specify heigh since some tags do not allow for height. Is it only certain css properties that work with custom tags? Both the border and background color show up, I have tried changing over to both min and max height as well. Please limit response to the question and not the subjective argument of whether you should use custom tags, It made it significantly harder to search for answer for this with every post about custom tags overloaded with those kinda of responses.
Add display: block or display: inline-block to x-slider.