I have a simple form with a textarea input inside of it. When I scale the textarea it pushed the fieldset boundary with it. How can I untie the textarea scale from the fieldset scale. I want this only to apply to the horizontal scale.
HTML
<form>
<fieldset>
<legend>Description</legend>
<label>Name</label>
<input type="text">
<p></p>
<label>Describe the object</label>
<textarea></textarea>
</fieldset>
</form>
CSS
textarea {
display: block;
max-height: 200px;
max-width: 350px;
}
jsfiddle
Add max-height to the fieldset, it will take care of the height.
It won't work with the width so you will have to work around it and wrap your text area wit a div and set it's max-witdh to the value of your fieldset.
<h1>Form Demo</h1>
<p>
<form>
<fieldset>
<legend>User Information</legend>
<label>Sex</label>
<input type="radio"
name="sex"
id="male"
value="male"/>
<label for="male">Male</label>
<input type="radio"
name="sex"
id="female"
value="female"/>
<label for="female">Female</label>
</fieldset>
<fieldset class="DontGrow">
<legend>Description</legend>
<label>Name</label>
<input type="text">
<p></p>
<label>Describe the object</label>
<div class="DontGrowWidth">
<textarea></textarea>
<div>
</fieldset>
</form>
css:
body {
width: 400px;
margin-left: auto;
margin-right: auto;
font-family: sans-serif;
}
label:nth-child(2) {
font-weight:bold;
}
.DontGrow{
height:160px;
max-height:160px;
}
.DontGrowWidth{
max-width: 300px;
}
}
fieldset {
margin-top: 30px;
}
input {
display: block;
}
textarea {
display: block;
max-height: 200px;
max-width: 400px;
}
input[type=radio] {
display: inline
}
This question is keep on repeating
textarea {
resize: none;
}
How to disable resizable property of textarea?
Learn to explore and search first before asking question. Google it!
I solved my own problem by wrapping the textarea in a div container and restraining this container in size.
HTML
<div class="textareas">
<textarea></textarea>
</div>
CSS
.textareas {
width: 300px;
}
Related
I'm implementing a form which has multiple sections with different numbers of input fields. When using display: flex on the parent div and 100% width on the input fields, I get different widths calculated, depending on the number of input fields inside the form.
When using display: block, everything works as intended.
<section>
One input field.
<div>
<form action="">
<input type="text">
</form>
</div>
</section>
<section>
Two input fields.
<div>
<form action="">
<input type="text"> <!-- each input field is double as wide as in the first section! -->
<input type="text">
</form>
</div>
</section>
section {
background: lightgrey;
width: 1100px;
}
div {
background: red;
display: flex;
}
form {
background: blue;
box-sizing: border-box;
}
input {
box-sizing: border-box;
width: 100%;
margin: 0.3125em 0 0.625em;
}
Codepen link with example
Is this supposed to be normal flexbox behavior? Am I missing something?
Thanks for any help!
Simply remove width:100% and you will better understand:
section {
background: lightgrey;
width: 1000px;
}
div {
background: red;
display: flex;
}
form {
background: blue;
box-sizing: border-box;
}
input {
box-sizing: border-box;
margin: 0.3125em 0 0.625em;
}
<section>
One input field.
<div>
<form action="">
<input type="text">
</form>
</div>
</section>
<section>
Two input fields.
<div>
<form action="">
<input type="text">
<input type="text">
</form>
</div>
</section>
<section>
Three input fields.
<div>
<form action="">
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
</section>
<section>
Four input fields.
<div>
<form action="">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
</section>
The inputs are defining the width of the blue box and then this width will be the reference of the width: 100%; making all the input to be full width of it.
Basically, a percentage value need a reference so the width of the blue box is first calculated considering the content and then the input will use that width as reference.
This can also happen with simple inline-block elements
section {
background: lightgrey;
width: 1000px;
}
div {
background: red;
display: inline-block;
}
form {
background: blue;
box-sizing: border-box;
}
input {
box-sizing: border-box;
width:100%;
margin: 0.3125em 0 0.625em;
}
<section>
<div>
<form action="">
<input type="text">
</form>
</div>
</section>
<section>
<div>
<form action="">
<input type="text">
<input type="text">
</form>
</div>
</section>
<section>
<div>
<form action="">
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
</section>
<section>
<div>
<form action="">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
</section>
More details about percentage sizing here: https://www.w3.org/TR/css-sizing-3/#percentage-sizing
You can find an explicit example of such behavior:
For example, in the following markup:
<article style="width: min-content">
<aside style="width: 50%;">
LOOOOOOOOOOOOOOOOOOOONG
</aside>
</article>
When calculating the width of the outer <article>, the inner <aside> behaves as width: auto, so the <article> sets itself to the width of the long word. Since the <article>’s width didn’t depend on "real" layout, though, it’s treated as definite for resolving the <aside>, whose width resolves to half that of the <article>.
When using display: block, everything works as intended.
Simply because the width calculation of block element is different and doesn't depend on the content unlike for inline-block elements or flex items where the content define the width
You are setting display: flex CSS property on wrong element, You need to set it on form instead of div,
When you set display: flex on div them form become the flex item not the inputs, Therefore none of the flex-item behaviour comes to input fields.
With following CSS it will work fine
section {
background: lightgrey;
width: 1000px;
}
div {
background: red;
display: flex;
}
form {
background: blue;
display:flex;
box-sizing: border-box;
}
input {
box-sizing: border-box;
width: 100%;
margin: 0.3125em 0 0.625em;
}
For more details refer to Flex tutorial
With display: block on the main containers (div), the form element – the child of the div – automatically occupies 100% width of its parent.
With display: flex on the main containers, the form element defaults to flex-basis: auto, which is the width of its content.
So if you want the same behavior with display: flex, add flex: 1 0 0 (aka flex: 1) to the form elements. This tells them to take full width of their parents, like display: block.
section {
background: lightgrey;
width: 1000px;
}
div {
background: red;
display: flex;
}
form {
flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
background: blue;
box-sizing: border-box;
}
input {
box-sizing: border-box;
width: 100%;
margin: 0.3125em 0 0.625em;
}
<section>
One input field.
<div>
<form action="">
<input type="text">
</form>
</div>
</section>
<section>
Two input fields.
<div>
<form action="">
<input type="text">
<input type="text">
</form>
</div>
</section>
<section>
Three input fields.
<div>
<form action="">
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
</section>
<section>
Four input fields.
<div>
<form action="">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
</section>
I recently stumble over the problem where I had to align to inputs next to each other which had slightly different font-size parameter. It turns out that is breaks the alignment of the input elements.
Here an exaggerated example to show the problem:
div input {
display: inline-block;
width: 100px;
height: 34px;
}
.field1 {
font-size: 50px;
}
<div>
<input class="field1" type="text" value="test">
<input class="field2" type="text" value="test">
</div>
What is the best way to fix that? How do I align the two input elements in one line next to each other?
vertical-align: top; seems to help solve this problem. I added only that rule which will align the input elements to the top of its parent container (the div in this case).
div input {
display: inline-block;
width: 100px;
height: 34px;
vertical-align: top; /* added */
}
.field1 {
font-size: 50px;
}
<div>
<input class="field1" type="text" value="test">
<input class="field2" type="text" value="test">
</div>
I have a div with two inputs inside. One text box and one button. I would like to set the div to be a certain width (say 30em) and have the text box fill 80% of it and the button the other 20%. The inputs should be side by side. The div is centered in the page.
<div class="container">
<input class="input" type="text" placeholder="Some text">
<input class="button" type="submit">
</div>
I have this scss so far
.container {
margin-left: auto;
margin-right: auto;
width: 30em;
.input {
width: 80%;
}
.button {
width: 20%;
}
}
So far the text box takes up 80% but floats in the middle and the button under it. How can I line them up side by side to fill the div?
Those elements are inline by default, so the white space between them is preserved, which makes their overall width 20% + 80% + [a space], which is > 100%.
You can...
remove the white space between them
use display: flex on the parent
float the inputs.
* {margin:0;padding:0;box-sizing:border-box;}
.container {
margin-left: auto;
margin-right: auto;
width: 30em;
}
.flex {
display: flex;
}
.input {
width: 80%;
}
.button {
width: 20%;
}
.float {
overflow: auto;
}
.float input {
float: left;
}
<div class="container">
<input class="input" type="text" placeholder="Some text"><input class="button" type="submit">
</div>
<div class="container flex">
<input class="input" type="text" placeholder="Some text">
<input class="button" type="submit">
</div>
<div class="container float">
<input class="input" type="text" placeholder="Some text">
<input class="button" type="submit">
</div>
I have a form input with a label next to it, like this:
<div id="loginbox">
<form>
<div>
<span>Username</span>
<input type="text">
</div>
<div>
<span>Password</span>
<input type="password">
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
</div>
Then I have some CSS that sets up the width of the login box and the span fields, like so:
#loginbox {
border: 1px solid black;
width: 300px;
}
#loginbox span {
display: inline-block;
width: 80px;
text-align: right;
}
Here is the jsfiddle for this code:
http://jsfiddle.net/7TNNq/
Notice how the input boxes do not span the entire length of the div. How do I get it to expand fully?
You could put
#loginbox div input {
width: 70%;
}
it will expand to the edge of the div, but I'm sure there's a better way to go about it.
Hope this helps
See: http://jsfiddle.net/thirtydot/tgGLv/
CSS:
#loginbox {
border: 1px solid black;
width: 300px;
}
#loginbox label {
float: left;
width: 80px;
}
#loginbox span {
display: block;
overflow: hidden;
padding: 0 4px 0 0;
}
#loginbox span input {
width: 100%;
}
HTML:
<div id="loginbox">
<form>
<div>
<label>Username</label>
<span><input type="text"></span>
</div>
<div>
<label>Password</label>
<span><input type="password"></span>
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
</div>
Here it is.
http://jsfiddle.net/7TNNq/35/
Or you can set fixed width as #spike suggested.
I want to have one label that is associated with the input field. Some of the labels need to go on more than one line. However, I am not able to view the text. What I am trying to achieve is shown below:
Label 1 <input />
sub text for label 1
The code I currently have is as follows:
<div class="row">
<label for="height">Height (help text here)</label>
<input name="height" id="height" ... />
</div>
CSS:
form { width: 100%; overflow: hidden; margin-top: -20px;}
form .row { height: 100%; overflow: hidden; padding-left: 140px; width: 295px; line-height: 30px; position: relative; margin-bottom: 6px; }
form label { position: absolute; top: 0; left: 0; line-height: 32px; text-align: left; width: 110px; font-size: 14px; display: inline-block}
There are a few rows that need to be formatted like this. Thank you for any help you can provide.
<div class="row">
<label for="height">Height <br /><span>(help text here)</span></label>
<input name="height" id="height" ... />
</div>
label {
display: block;
float: left;
}
make the label a block element so you can put a br. not a good solution also but it works :P
Try this :
<div class="row">
<label for="height">Height (help text here)</label><input name="height" id="height" ... /><br/>
<label for="height">Sub text</label>
</div>
It may be a workaround to your issue, but not a perfect solution
How about:
<div class="row">
<label for="height">Height</label>
<input name="height" id="height" ... />
<label for="height" class="help">help text here</label>
</div>
And CSS:
.row label {
display: inline-block;
width: 40%;
}
.row input {
display: inline-block;
width: 50%;
margin: 0 0 0 5%;
}
.row label.help {
display: block;
}
JS Fiddle demo.