I need to resize a text field in google Chrome. I want to be able to drag the end of the textfield horizontally & vertically.
This is what I have tried so far. I'm able to see the resize icon at the corner of the text field, but not able to move it either ways. I have used style="resize:horizontal;" Could some tell me where I am going wrong...
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text Feilds</title>
<script type="text/javascript">
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="text" id="txt1" style="resize:horizontal;" />
<input type="text" id="txt2" style="resize:both;" />
<input type="text" id="txt3" style="resize:vertical;"/>
</td>
</tr>
</table>
</body>
</html>
By the specifications, you could make any element (including an <input type=text> element) resizeable by setting the overflow property to any value other than visible, in addition to setting the resize property.
In practice, even browsers that support the resize property at all may have restrictions in its applicability. Chrome does not make an <input type=text> element resizeable if you do the above. This is probably a bug, since it is clearly trying to do that: a resize handle appears. Safari, on the other hand, makes it resizeable even if you just set resize, without setting overflow.
There’s a workaround that seems to work on Chrome, though it’s kludgy and not robust-looking. Put the input element inside a div, and make the div resizeable and set the input width near 100%. Not quite 100%, since this would mess things up (no room for the resize handle). Something like this:
<div style="resize: horizontal; width: 15em;
overflow: auto; border: solid gray 1px">
<input style="width: 96%; border: none; resize: none">
</div>
Use a textarea element instead.
Example here
resize is a not style property of html input type text. So, that means you are trying to assign a wrong attibute to the text input tag.
Check this link for more details. From the link
Applies To
elements with 'overflow' other than visible
Use textarea as explaind in other answer.
Related
I have a React component that encapsulates the input html tag. The default behaviour for input tag is if the characters are more than what the input can display, we can scroll to left and right with invisible scroll (e.g. I type John Smitheens for size 11).
I want to make the display change to John Smith... if the input is unfocused (not clicked).
I don't know the size or number of characters I want to limit beforehand because the React component is used in a lot of places and the size differs based on parent component (width: 100%). Is there a way to get the input size or know when the characters exceed the input width? Thank you
<!DOCTYPE html>
<html>
<body>
<input placeholder="Search User" type="text" size="11">
</body>
</html>
Try this in your stylesheet :)
Add it to your input css.
text-overflow: ellipsis;
Similar case here:
how to add three dots to text when overflow in html?
More on the topic:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
Just add text-overflow: ellipsis; to the input
input {
text-overflow: ellipsis;
}
<!DOCTYPE html>
<html>
<body>
<input placeholder="Search User" type="text" size="11">
</body>
</html>
Has anyone seen this strange behaviour before?
When I have an input field in IE9, with a fixed width, some padding and rounded corners, for some reason the last character that I type when the textbox is full does not show up. It is there, but IE does not move the string enough to the left to show the rightmost character.
Here's a case to show what I mean.
The first field is ok, the second field shows the behaviour I explained when you continue to type when the field is already filled up:
<!DOCTYPE html>
<html>
<head>
<title>Text input field</title>
<style type="text/css">
.textItem {
padding: 2px 8px 2px 2px;
border-radius: 5px;
}
</style>
</head>
<body style="padding: 50px 200px">
<form method="post">
<input type="text" size="5"/>
<br/><br/>
<input class="textItem" style="width: 119px" type="TEXT"/>
</form>
</body>
</html>
Does anybody know how to fix this (hopefully without changing the css properties already defined)?
Problem solved by applying box-sizing: border-box to the input field.
I have adjusted the width accordingly.
I'm in the midst of the HTML5/CSS/JavaScript learning curve and have hit a wall.
My goal is to create a form. In the process of executing this seemingly simple task, I've created a confusing monstrosity that displays perfectly in Firefox and IE, but appears as a jumbled mess in Chrome and Safari. I've written some sample code that illustrates my problem. Consider this three line form that has two text fields for username and password, and a checkbox to indicate whether or not the theme from 'Sanford and Son' should play during the user's session.
<!DOCTYPE HTML>
<html>
<head>
<style>
form label{
float: left;
clear: left;
text-align: right;
margin-right: 10px;
width: 110px;
}
form input{
display: block;
margin-bottom: 5px;
padding: 0px .2em;
outline: none;
}
</style>
</head>
<body>
<form id="loginPopup">
<fieldset>
<label for="username">Username:</label>
<input type="text" id="username" name="username"/>
<label for="password">Password:</label>
<input type="password" id="password" name="password"/>
<label for="sanford">Sanford Theme:</label>
<input type="checkbox" id="sanford" name="sanford"/>
</fieldset>
</form>
</body>
</html>
Try viewing it in IE or Firefox and everything looks perfect. Now try viewing it in Chrome or Safari. The 'sanford' checkbox appears underneath its label. Not good. The checkbox is obviously supposed to appear to the right of the label. What's even more perplexing is that if I replace the checkbox with some other input (e.g. text, radio, etc.), everything appears properly in all browsers. This problem seems limited to the checkbox.
I can't wrap my head around what's going on here. The 'Sanford' label is floated to the left so presumably the checkbox should flow to the immediate right of that label -- and in fact that's exactly what happens in Firefox/IE… so why not in Chrome/Safari?
Any help would be greatly appreciated.
EDIT: I posted the code to the Fiddle site as requested: http://jsfiddle.net/ChadDecker/FyNZw/
Float is tricky. If one element is floated, the others have to be floated or it will be all screwed up. So you must float every element and adjust with padding/margin as necessary. What you may want to try also is using:
position: absolute;
and also using z-index which tells the page what items to display over top of the other:
z-index: 0;
EDIT
Your form on JSFiddle: It's all designed wrong in my opinion. You shouldn't be using form.input because since the checkbox field is considered a form of input, hence <input then it gets the properties from form.input style. I made a simple class to show you called box:
http://jsfiddle.net/FyNZw/2/
I have this simplified code:
<div class="container">
<input type="submit" name="submit" class="submit" value="Sign Up">
</div>
And the CSS for it:
input.submit{
padding-left: 40px;
padding-right: 40px;
float:right;
}
.container{
background-color: #AAA;
float:right;
padding: 50px;
}
I expect the div to wrap around the input button, float to the right, and its size is equal to the button's size + the padding (50px). In other browsers it works perfectly, but there are 2 strange things happen in IE7:
The width of the div stretches to the whole webpage. If I remove float:right from CSS of input.submit, then the size of the div is correct.
The input button's width is also much larger than when the button is displayed in other browsers.
This is the doc type I use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Anyone know why these problems happen and how to solve them?
I don't see why you need float: right on input.submit, so just remove it. If there is a reason you need it, you'll have to show me why - there might be a workaround.
To fix the second problem, add overflow: visible to input.submit.
After those two changes, it looks virtually the same in IE7 and IE9: http://jsfiddle.net/33vmm/
Is it possible to make IE7 and IE8 respect the text-indent css property on an input field?
Here's my code
<!DOCTYPE html>
<html>
<body>
<input type="text" style="text-indent:100px; display:block;" value="Test indent" />
</body>
</html>
When you first load the page in IE8, the text is NOT indented. You can "activate" the text-indent property by focussing in on the text field and typing into it (ie. trigger the onchange event).
How do I make IE7 and IE8 respect the text-indent of an input text element on page load instead of on input.onchange event?
in normal case input tag text-indent does not work in ie6 and ie7
If we add lineheight:1px it will work all browser
Text-indent will work all browser
<input type="text" style="text-indent:-100px; display:block; line-height:1px;" value="Test indent" />
Text-indent not will work ie7 and ie6 browser
<input type="text" style="text-indent:-100px; display:block;" value="Test indent" />
demo
http://jsfiddle.net/KczMR/1/
Are you sure that you want 'text-indent' instead of either the 'margin-left' or the 'padding-left' property? The 'text-indent' property is meant to affect only the first line of text in an element. You might have better luck with margin or padding.