so Iv'e made an input that it's height is "300px" what means that its pretty big, and when I type a text the input it's starts from the middle of the input and not from the left top. How do I do it?
text-align: left;
height: 300px;
You could use padding instead of height.
Something along the lines of this would suffice:
input{
padding-bottom: 280px; /* change this depending on your requirements */
}
Although I don't recommended this. It's very tacky and un-user friendly. As the comments suggested, you should have a look into HTML's native textarea element.
This may not be what you were looking for but consider it.
var textarea = document.getElementById("demo");
function getValue() {
alert(textarea.value); // Works just like a text input!!!
}
#demo {
height: 300px;
resize: horizontal;
/* Considering you have defined a height */
}
<!DOCTYPE html>
<html>
<head>
<!--
<link rel="stylesheet" href="path/to-your/css-file.css">
-->
</head>
<body>
<textarea id="demo">And yes you can get the value of a textarea just like a text input!</textarea>
<button onclick="getValue()">Get Value</button>
</body>
</html>
Related
See image for reference
I want to know if it is possible to fix a text in the end of an input field.
I'm doing a money converter and the user have to type the value in Euro(for an example) and the other input is supposed to return the value in USD, and in the end of the input has to have the name of the currency.
I'm only interested in know the HTML part of the fixed text in the input.
I'm using React and Chakra UI.
The way I would do it is add the text after the input, add a position: relative; on the Text you want to include inside the input and then adjust how further to the left or right the text is, using left or right. In this case I used left: -50px;. Run the snippet and see if it's how you want it to be.
div{
display: flex;
}
p{
position: relative;
left:-50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<input placeholder="Placeholder"><p>Text</p>
</div>
</body>
</html>
If you wrap the input in another element, a label seems appropriate, then you can add a pseudo element to that and position the content using a translate.
In this snippet a small extra amount is added to the translate to give the effect of a bit of padding, so the USD isn't right up against the end of the input.
label::after {
content: 'USD';
display: inline-block;
transform: translateX(calc(-100% - 5px));
}
<label><input/></label>
I have a <embed> element inside a div that contains a .txt file and I want to set it to automatically fit the size of the txt files contents.
However none of the tips I found here seem to work.
height: 100% or auto does absolutely nothing.
<!DOCTYPE html>
<html>
<head>
<title>Testpage</title>
<style>
body {
background: #aaa;
}
div {
width: 800px;
background: white;
}
embed {
padding: 25px;
width: 750px;
height: 100%;
}
</style>
</head>
<body>
<div>
<embed src="file.txt">
</div>
</body>
</html>
Also using <object> instead of <embed> as suggested in many questions here doesn't change the behavior at all.
It can't be that hard to do something this basic in CSS?
You maybe can try to use the font-size property of CSS.
An example of usage with it:
embed {
font-size: *what you need here*;
width: 100%;
}
Otherwise you may wanna look into CSS properties in JavaScript, and read lines, length etc. of content and base of it and take the users screen width into fact for the best result!
EDIT:
You could use XMLHttpRequest, AJAX, jQuery aswell in JavaScript.
And then change font size based on length of content.
I have a quick question, I'm making a simple html document, with an image that I want to fill the entire page.
For some reason, it wants to create a border around the image. I've tried border="0"; and padding 0px 0px 0px 0px;
Here is the code in which I have: (You can also check it out live if you prefer www.kidbomb.com/chefwannabe)
<!DOCTYPE html>
<html>
<head>
<title>Pre-Order Now!</title>
</head>
<body>
<img style="width: 100%; overflow:hidden;" src="http://www.kidbomb.com/chefwannabe/chefwannabepreview.png" />
</body>
</html>
Add the following CSS in your code. Default body will give some margin and padding. So better whenever you start new work, add this style in your css for getting the proper result.
body
{
padding:0;
margin:0;
}
Instead of using the img tag, set the background-image property of the body tag so it encompasses the entirety of the page.
body {
background-image: url("path/to/image.jpg");
height: 100%;
width: 100%;
}
I need to use a textarea to show some text. The problem is that if I place 4-5 rows of text a scrollbar will appear. How can I use CSS/HTML so that the textarea will be as large as it's content (no scrollbar).
the textarea doesn't need to change it's size dynamicaly, I use it only to show a text (I could also use a disabled textarea)
I want the textarea to stretch only verticaly.
If you want to know:
I use the textarea to show some text from a database, so when the textarea (with the text in it) is created, it should show the whole text at once with no scrollbars.
<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
border: 0 none white;
overflow-y: auto;
padding: 0;
outline: none;
background-color: #D0D0D0;
resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init (maxH) {
var text = document.getElementById('text');
var maxHeight=maxH;
var oldHeight= text.scrollHeight;
var newHeight;
function resize () {
text.style.height = 'auto';
newHeight= text.scrollHeight;
if(newHeight>oldHeight && newHeight>maxHeight )
{
text.style.height=oldHeight+'px';
}
else{
text.style.height = newHeight+'px';
oldHeight= text.scrollHeight;
}
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
</script>
</head>
<body onload="init(200);">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
</html>
http://jsfiddle.net/TDAcr/
I´m afraid you´ll have to resort to javascript to set the height of your textarea. You can use the scrollHeight property to determine the total height.
Alternatively you could just use a div and style the div to look like a textarea. The div will grow automatically and as it´s a disabled textarea anyway, you don´t really need it to be a textarea.
Alright, I just found this and it works very nicely:
<html>
<head>
<script>
function textAreaAdjust(o) {
o.style.height = "1px";
o.style.height = (25+o.scrollHeight)+"px";
}
</script>
</head>
<body>
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
</body>
</html>
Now, I shouldn't assume that you know Javascript (but you might).
Just run
textAreaAdjust(document.getElementById("id of your text area"))
Something like that should work. I'm not the best with Javascript (not even close, I just started using it the other day)
That seems to do something similar to what you want. The first code example is for a textarea that dynamically changes based on what is in it (while typing). It will take a couple of changes to get it how you want.
You could use the CSS height: and width: attributes, e. g. something like
<textarea style="width:400px;height:300px">...</textarea>, just use the sizes you want to.
In addition, if you want to suppress the scrollbar, use overflow:hidden.
you can use div like textarea. It is possible like this:
<div contenteditable="true" style="width:250px; border:1px solid #777" ></div
Find the height of the font you will most likely be displaying it in. I'm not sure about CSS/HTML but you could use Javascript/PHP/ASP.net to use map to determine how big the text will be based on the number of characters. If you do it in a monospaced font, this will be even easier. Why use a text area when you could just use a label which will do the same thing all by itself?
If you don't mind using JavaScript you can use approach from one of following articles:
http://james.padolsey.com/javascript/jquery-plugin-autoresize/
http://scvinodkumar.wordpress.com/2009/05/28/auto-grow-textarea-doing-it-the-easy-way-in-javascript/
But from your questing I assume you want pure CSS solution.
Then you can just mimic appereance of textarea using simple div and following css (if you just want to display text):
div {
cursor: text;
background: lightGray;
border: 1px solid gray;
font-family: monospace;
padding: 2px 0px 0px 2px;
}
I assume name attribute is not used. You can use this alternative (HTML5):
http://jsfiddle.net/JeaffreyGilbert/T3eke/
Using the resize property works these days:
resize: none;
Wondering if this is possible:
Let's say if I have a text input element that I want to use to input currencies. Probably I'd want a prefix before the text input to indicate what currency the user is performing his input in.
Hence, the HTML'd look something like:
US$ <input type="text" />
But let's say I want the "US$" above to appear as a prefix inside the text input itself, without the "US$" being part of the input string. Something like where "US$" is the background text of the text input. Of course, the text input would be indented to avoid clashing with the background text.
Any way of accomplishing this without the use of images or Javascript?
Thanks!
I didn't have time to try my solution in IE (leaving work now) but you can play around with this if you want: http://pastie.org/581472
Update: Took a quick look in IE6-8 and it didn't work in any of them. Not sure if it's cause of the minimal HTML5 document or something else, I'll take another look at it later today or tomorrow.
Update 2: Updated the code to work with FF 3.5, Opera 9, Safari 4, IE6-8 (and probably more and earlier versions, but that is not tested). Grab the updated code.
<!doctype html>
<title>Background text inside text input control</title>
<style>
form { position: relative; }
input { background: transparent; position: relative; text-indent: 28px; z-index: 2; }
span { color: #999; font-size: 14px; left: 5px; position: absolute; top: 3px; z-index: 1; }
</style>
<form action="" method="post">
<input type="text">
<span>US$</span>
</form>
Updated code:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Background text inside text input control</title>
<style>
form { position: relative; }
input { padding-left: 28px; }
span { color: #999; font-size: 14px; left: 5px; position: absolute; top: 3px; }
</style>
</head>
<body>
<form action="" method="post">
<input type="text">
<span>US$</span>
</form>
</body>
</html>
If you really wanted to, you could do the following:
1.) Start with a field being defined as follows:
<div class="moneyFieldHolder">
<input type="text" class="moneyField" />
</div>
2.) Create a background image of a textbox with US$ inside it:
----------------
|US$ |
----------------
3.) set up the CSS:
.moneyFieldHolder {
background: url(image.png) top left;
}
.moneyField {
border: 0px solid #FFFFFF;
margin-left: 4em;
}
And that's it...this is definitely a hacky solution and should only really be used if absolutely necessary. Also, this does -- of course -- require an image.
i would think you could do this with an absolutely positioned div that has a transparent bg. alternatively, you might have some success intercepting every keystroke and updating what is displayed yourself.