So I have an input tag in HTML, and I need to decrease its width to (let's just say) 80% of its normal width. I've tried setting width:80% but that didn't work. I would prefer solutions using only HTML/CSS, but I'm open to anything. My Google searches came up with results to change the width to a fixed amount like 50 pixels, not relative to its normal width. Thanks!
<input id="myInput" type="text">
First, get the current input width (myInputWidth). Multiply it by some factor (0.8). Then modify the width.
var myInputWidth = (document.getElementById("myInput").offsetWidth);
document.getElementById("myInput").style.width = myInputWidth * 0.8 + "px";
You can check out an example of this here.
Pretty simple with CSS. Check this out!
.input-box{
width:100px
}
<input id="myInput" class="input-box" type="text">
This is what you want hope this helps you.
Regards.
You can place your input element in a container, set a width of said container and then modify the width of the input in percentages.
#input {
width: calc(0.8 * 500px); /* 80% = 0.8 && 500px is the input element's initial width. Just for example I took 500px */
}
<input type="text" id="input">
If you are going to do this for one input box only then you can add Inline Css
<input type="text" id="input" style="width:100px">
You need a block element around.
For example:
<div class="myBox">
<input class="myInput" type="text">
</div>
.myBox {
display: block;
width: 100px;
}
.myInput {
width: 80%;
}
This method your input take 80% width of your parent item (div, myBox).
Related
I have inherited a website that has many inputs on various pages, such as:
<input name="name" type="text" id="name" size="40" maxlength="64">
and
<textarea name="descr" cols="40" rows="2" id="descr">
I have been improving the CSS of the site to make it flexible layout for mobile devices, etc. But the size/cols rules of the HTML persists in setting the fixed size, regardless of outside factors.
I have tried using CSS such as:
CSS:
input, textarea, select {
max-width:100%;
}
(And with also appending !important) but this doesn't effect the elements.
It's been converted into an HTML5 template, and the inputs are in a table (but the table is flexible and is not the issue).
Is there a way that CSS can overwrite the HTML size/cols declaration in the inputs?
The large number of inputs over multiple pages wanted me to find a CSS simple way of overwriting them all in one fell swoop. As far as I can see this doesn't seem directly possible and I will have to go through and edit the size values for each input elements :-/.
EDIT
Full Code:
HTML:
<table id='centralTable'>
<tr>
<td colspan="2">Update Category</td>
</tr>
<tr>
<td width="28%"><strong><label for='name'>Category Name</label></strong></td>
<td width="70%"><input name="name" type="text" id="name" value="catname" size="40" maxlength="40" required></td>
</tr>
<tr>
<td><input name="id" type="hidden" id="id" value="12" >
</td>
<td><input type="submit" value="Update" ></td>
</tr>
</table>
CSS:
#centralTable {
width:90%;
max-width:780px;
min-width:300px;
margin:1rem auto;
}
input, textarea, select {
max-width:100%;
}
If I adjust the sizing of the size value, the other elements on the page fit the screen as intended, but the size value offsets this. Firebug shows that max-width is applied to the element but the element size does not accord to this.
EDIT TWO:
Setting the td element max-width to a px value rather than a percentage works, but obviously doesn't adapt to viewport size.
td {
max-width:200px; /* This works in containing the input size */
}
CSS can override the size attribute using width. There's a good explanation about it here.
Here, we have a typical input, size 10:
<input type="text" size="10">
And here is that same input, adjusted with CSS
input {
width: 20px;
}
<input type="text" size="10">
max-width is also a viable option, depending on the circumstance
div {
width: 20px;
}
input {
max-width: 100%;
}
<div>
<input type="text" size="10">
</div>
OK, I think I've got it:
The table elements are set to take a percentage size but the nature of tables is that they expand to fit their contents, and the contents is set to take a maximum of 100% of the table size, so:
Size sets input elements size:
Table cell expands to encase input element
CSS input sets the input to fill table cell
So; Using a Viewport Width as a value gives a more absolute container for the size to sit into.
#centralTable input, #centralTable textarea, #centralTable select {
max-width:65vw;
}
This limiter, rather than a percentage limiter, then correctly resizes the child input size value.
Viewport width units should be used in preference to percentage sizes.
Let's say I have an input field and I make its height:25px. If I increase the font-size inside that text field, although the box size is constant, it appears as it I added a whole lot of padding. When the font size is normal, it looks something like this:
BEFORE
But now when I increase the size of the font, it looks something like extra padding added something this:
AFTER
However, the padding is unchanged when I debug. I tried adding the box-sizing:border-box, but still it is unchanged. I would really appreciate if someone can help me. Thanks.
A simple demonstration can be achieved by just changing the size of the font-size.
<body>
<div>
<input type="text" value="HI"/>
<input type="text" value="HELLO" style="font-size: 900px; height: 30px; width: 100%;"/>
<input type="text" value="HI"/>
</div>
</body>
You can reset the vertical-align propertie .
Defaut is baseline , line- height is equal to font-size if not reset.
example with vertical-align: (added text and reduced some value from your funny example ;) )
input {
vertical-align:middle;
}
/* see div middle center. Notice: the tallest input gives the line-height on the line it stands */
div {
background:linear-gradient(to top,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%) ,linear-gradient(to left,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%);
<div>
<input type="text" value="HI"/> text
<input type="text" value="HELLO" style="font-size: 90px; height: 30px; width:50px;"/> text
<input type="text" value="HI"/>
</div>
I have:
<div>
<input id="input" type="text" />
<button id="submit">submit</button>
</div>
which gives me this
If I expand the main panel by dragging it with the mouse cursor the width the new space is empty:
I want that the <input type="text" /> fills the whole horizontal new space but that the submit button remains in the same row.
I tired to use <input style="width:100%" type="text"/> but then it fills the whole row and the submit button appears in the next row:
I also tried a table as mentioned in that thread:
Liquid textfield width
The result was that it works "a little bit" the submit button overlaps the input text and a certain space on the right always remains empty:
Can somebody help me with an code idea for fill the whole space except the (static) size of the submit button.
Thanks!
The "table" method you linked to will work, but you're missing one crucial property on your input elements: box-sizing.
http://cssdeck.com/labs/sbffl3l2
<div class="foo">
<div class="bar"><input type="text"></div>
<div class="bar"><input type="submit"></div>
</div>
.foo {
display: table;
width: 100%;
}
.bar {
display: table-cell;
}
.bar:first-child, input[type="text"] {
width: 100%;
}
input {
box-sizing: border-box; /* this is the key */
}
Prefixes may be required: http://caniuse.com/#feat=css3-boxsizing
I believe you can do this:
<input type="text" style="width:calc(100%- widthofbuttoninpixels);" />
It's not advisable to do inline styles though.
Edit: Make sure you also define a fixed width for the button
Why not give width of 70% to input and 20% to button?
Currently I have the following HTML code.
<div class="field">
<label>E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip"></div>
</div>
However, I want the text in the div element (class = 'tip') to be aligned with the start of the form's text field.
How should I do this using HTML and CSS?
Here's what is looks like now:
http://jsfiddle.net/pEJMD/embedded/result/
This would be a quick workaround. You should put both the .tip div and the input into a wrapping div.
You can set a fixed size to the label. Than push the div to the right with the size of the label:
<div class="field">
<label style="width:100px;">E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip" style="margin-left:100px;">
The quick brown fox jumps over the lazy dog
</div>
</div>
And the result.
Well, either you use a <table>, putting in one cell the <label> and in the other the <input>, or you use fixed widths/margins or paddings.
Solution 1: Table
Table solution
In this solution you use a table to hold the form. On column is for labels, the other column is for inputs. In this case you will have the tip in the input column, and it will align automatically with the input.
This has the pro to be working for flexible dimensions of your label/inputs. And tables are not always evil. Just remember that, if you want to keep your label aligned with the input, add a vertical-align:top to your CSS.
Solution 2: Fixed width
Fixed-width solution
In this solution you give a fixed width to your label, and move the .tip div using either margin, padding or left.
This will hold your layout in place, so be careful of extremely long labels!
You don't need an explicit width at all, nor tables; just use CSS tables (see my answer to this related question):
CSS
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }
HTML
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>
Here's a JSFiddle: http://jsfiddle.net/DaS39/1/
And if you need the labels right-aligned, just add text-align: right to the labels: http://jsfiddle.net/DaS39/
Use margin-left:
Change:
<div class="tip" id="emailTip">
To:
<div class="tip" id="emailTip" style="margin-left:95px;">
DEMO
Learn more about the CSS margin property here.
You can give a height to the label, give a width to the parent div and float your tip. See the demo: http://jsfiddle.net/pEJMD/4/
Here you go: http://jsfiddle.net/4sJ2t/
You just need to give your label a fixed width, and then your tip a left margin
label {width:100px; text-align:right; margin-right:5px;}
.tip {margin-left:105px; padding: 5px 0;}
How do you increase the height of an textbox? (along with its font size)
I'm assuming from the way you worded the question that you want to change the size after the page has rendered?
In Javascript, you can manipulate DOM CSS properties, for example:
document.getElementById('textboxid').style.height="200px";
document.getElementById('textboxid').style.fontSize="14pt";
If you simply want to specify the height and font size, use CSS or style attributes, e.g.
//in your CSS file or <style> tag
#textboxid
{
height:200px;
font-size:14pt;
}
<!--in your HTML-->
<input id="textboxid" ...>
Or
<input style="height:200px;font-size:14pt;" .....>
Note that if you want a multi line text box you have to use a <textarea> instead of an <input type="text">.
Increasing the font size on a text box will usually expand its size automatically.
<input type="text" style="font-size:16pt;">
If you want to set a height that is not proportional to the font size, I would recommend using something like the following. This prevents browsers like IE from rendering the text inside at the top rather than vertically centered.
.form-text{
padding:15px 0;
}
<input type="text" style="font-size:xxpt;height:xxpx">
Just replace "xx" with whatever values you wish.
With inline style:
<input type="text" style="font-size: 18pt; height: 40px; width:280px; ">
or with apart CSS:
HTML:
<input type="text" id="txtbox">
CSS:
#txtbox {
font-size: 18pt;
height: 42px;
width : 300px;
}
If you want multiple lines consider this:
<textarea rows="2"></textarea>
Specify rows as needed.
Don't the height and font-size CSS properties work for you ?
Use CSS:
<html>
<head>
<style>
.Large
{
font-size: 16pt;
height: 50px;
}
</style>
<body>
<input type="text" class="Large">
</body>
</html>