I have a textarea that i'd like to shrink in width: but no matter what I set the cols= parameter to, the textarea keeps its width. Why is this?
The code looks like
<textarea id="edit-submitted-question-request" name="submitted[question_request]" cols="10" rows="5" class="form-textarea required"></textarea>
and it can be found here:
http://quaaoutlodge.com/content/dinner-theatre-rock-romance
EDIT A
I commented out width: 100%; in .form-textarea-wrapper textarea in my css and now the textarea renders to the right size but the "resize bar" to extend the text area is still at 100%, why is this?
Found a class in your css that makes problems for your textarea size:
.form-textarea-wrapper textarea {
display: block;
margin: 0;
width: 100%; // <----- Thats the problem
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
width from that class is affecting on textareas. check your css file /system.base.css?nipcyw
you are using one div for the textarea in which you have set width as 100%, Please remove that width part then your cols=parameter will start working.
.form-textarea-wrapper textarea {
display: block;
margin: 0;
/* -------- width: 100%; ------- */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Related
Why is it that <input> and <select> fields are displayed in different sizes, even if formatted in the same way?
.classname fieldset input,select {
float: right;
width: 50%;
}
The <select> ends up a little smaller than <input>. - Here's a fiddle.
Try specifying box-sizing and reseting border values:
.classname fieldset input,select
{
float: right;
width: 50%;
-ms-box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #AAA; /* Set your color here. */
}
As noted, you likely want to set box-sizing, however it should be set to border-box and not content-box, meaning you should also not need to change anything else:
.classname fieldset input,select {
float: right;
width: 50%;
box-sizing:border-box;
}
Box-Sizing:
The box-sizing CSS property is used to alter the default CSS box model
used to calculate widths and heights of elements.
border-box
The width and height properties include the padding and border, but
not the margin.
I'm using bootstrap input-append add-on to add a icon to the end of the input field. This all works nicely. The issue is setting a width of 100% on the input pushes the add-on span tag outside the parents "input-wrapper" div viewable area.
I'm using box-sizing: border-box; on all input fields.
the only way I can seem to make this work is setting the parent div "input-wrapper" to display: flex; Unfortunately this is not an option as it's not supported in IE8 or 9. What other options do I have.
http://jsfiddle.net/chapster11/zjx2zc6e/
Example code.
<div id="form-elements">
<div class="input-wrapper input-append">
<input id="paymentDate" class='paymentDate' type="text" />
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
CSS CODE
#form-elements{
margin: 20px;
}
input[type]{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-height: 30px;
}
#paymentDate{
height: 30px;
width: 100%;
}
.input-wrapper{
width: 600px;
border: 1px dashed red;
}
Edit: My bad, on Bootstrap2 there was an issue with the "input-block-level" feature working with addons (it works for all other inputs). A few people came up with some workarounds, mainly using a table display. You can see here:
https://jsfiddle.net/BMironov/BVmUL/
Here is the CSS that handles it - you may want to play around with the way the add-on span works.
.input-append.input-block-level {
display: table;
}
.input-append.input-block-level .add-on {
display: table-cell;
width: 16px;
}
.input-append.input-block-level > input {
box-sizing: border-box;
display: table;
min-height: inherit;
width: 100%;
}
.input-append.input-block-level > input {
border-right: 0;
}
Instead of setting the input to 100% width, add the class input-block-level to the text input. You shouldn't need any additional CSS, that functionality is built into Bootstrap 2.
It's obvious that if one of your nested element input is set with 100% width, your other nested element span will get outside the wrapper, which total width is being occupied by input.
I have a problem where setting width: 100% to inputs inside a container extends more than the container capacity. This problem doesn't seems to happen with buttons though:
<form>
<input type="text" class="input"></input>
<button>Button</button>
</form>
CSS:
form {
max-width: 200px;
border: 1px solid #eee;
}
.input, button {
width: 100%;
}
In this example, the button correctly fills the container, however the input extends a bit further:
How can I fix this?
I've created a codepen: http://codepen.io/jviotti/pen/qfFmH
You can fix this adding
.input, button {
width: 100%;
box-sizing: border-box; /* add this */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
box-sizing - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
It's been a while since I really dealt with percentages in web design. I have a nested DIV which sits inside a container but the padding of the container pushes it beyond the 100% width. Without wishing to embark on a process of trial and error to see what makes it as close to 100% of the width as possible, how do I go about achieving a snug fit? I also noticed that when I resized the window and made the space smaller, the right hand padding simply got smaller.
<div id="block">
<div class="inside">ssdfsdfdfsfdf</div>
</div>
#block {
width: 100%;
background-color: #CCC;
padding: 20px;
}
.inside {
height: 200px;
background-color: #333;
}
http://jsfiddle.net/AndyMP/cs2U9/4/
Use box-sizing css property for #block element.
#block {
width: 100%;
background-color: #CCC;
padding: 20px;
-o-box-sizing: border-box; /* Opera */
-ms-box-sizing: border-box; /* IE */
-moz-box-sizing: border-box; /* Mozilla */
-webkit-box-sizing: border-box; /* Chrome, Safari */
box-sizing: border-box;
}
About CSS box-sizing property: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
I needed an
overflow: hidden
on the container DIV in order to get it to sit perfectly.
http://jsfiddle.net/AndyMP/cs2U9/6/
I am displaying the html content in a table. For printing the tags i am using textArea in the <td> of the table. So i want to adjust the height and width of textArea so that it is equal to the <td>. How can i do this
dabblet.demo
the problem is that textarea behave not normal box-model, that's why we need this trick with box-sizing
this CSS will help you:
textarea {
border: none;
width: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
if you have no access to css file, you can use inline css
like this:
<textarea style="border: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"> </textarea>
Try using this CSS:
td textarea {
width: 100%;
height: 100%
}
Or inline:
<td>
<textarea style="width: 100%; height: 100%; border: none">
</textarea>
</td>
give the textarea a 100% width and height style
td textarea {
width:100%;
height: 100%;
}
but also take into account the paddings and borders or the textarea so that it would not overflow from the td.
hope this helps.