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>
Related
I have a very simple input form. I want to align the labels with the input controls so they are at the same level.
I've decided to use align-items: baseline because no matter what the padding, height, etc, it will always align correctly. But, for some reason, when using it with an input of type textarea it does NOT align to the baseline, it aligns at the bottom. Why?
Sure, I can fix it using self-align and padding-top for the textarea, but that defeats the purpose of having something flexible without the need of fixing the padding in some inputs.
I just need to understand to logic, or is this is a bug/known issue?
* {
margin: 0;
padding: 0;
}
form {
width: 500px;
margin: 0 auto;
background-color: #e4e4e4;
}
form .control ~ .control {
margin-top: 20px;
}
.control {
display: flex;
align-items: baseline;
}
.control>div:nth-child(1) {
flex: 0 1 150px;
text-align: right;
padding-right: 20px;
}
.control>div:nth-child(2) {
flex: 1;
}
.control input,
.control textarea {
width: 100%;
padding: 20px;
}
.control textarea {
height: 100px;
}
<form>
<div class="control">
<div>
<label>Label goes here</label>
</div>
<div>
<input type="text" name="pretitle" value="">
</div>
</div>
<div class="control">
<div>
<label>Article</label>
</div>
<div>
<textarea name="article"></textarea>
<p class="explain sub">HTML allowed</p>
</div>
</div>
<div class="control">
<div>
<label>Label</label>
</div>
<div>
<input type="text" name="pretitle" value="">
</div>
</div>
</form>
https://jsfiddle.net/bnaL94u6/13/
The problem is not the textarea but the padding you are adding to both input and textarea, in textarea, you won't notice the it grows because 20pxx2 (40px) is not higher than 100px, but the input itself without the padding has only 19px, and when you add 40px of padding it will have a total height of 59px. and the the label will align in the middle of those 59px
I have two forms that I want to align. I was able to figure out how to align the height, but I can't get the width to work the way I want.
In my situation, I want the left box to fill in the remaining space. Using 'auto' just fills in the space to fit the contents. So instead of an expanding form, there is a gap between the two forms.
The reason I require this is I also have PHP around this form. There is a flag that dictates whether or not the second form shows up. So if there is only one form, I want it to expand the entire space. If there is two forms, I want them to share the space.
The way I thought of doing this would be to set the right form to a specific width and have the left form mold to whether or not anything else exists. I just can't figure out how to get the left form to expand itself without specifying an exact width.
I've included the HTML and CSS below as well as a JSFiddle reference.
HTML
<div class="section">
<div class="container">
<form>
<fieldset class="left">
<legend>PC Management</legend>
<div>
<input type='submit' value='Backup' />
<input type='submit' value='Backup' />
<input type='submit' value='Backup' />
</div>
</fieldset>
</form>
<form>
<fieldset class="right">
<legend>PC Management</legend>
<div>
</div>
</fieldset>
</form>
</div>
</div>
CSS
.section {
margin: 0 auto;
text-align: center
}
.container {
height: 100px;
width: 500px;
}
.container form, .container fieldset, .container input {
height: 100%;
display: inline;
}
.left {
width: auto;
float: left;
}
.right {
width: 40%;
float: right;
}
display: flex will get you the dynamic resizing that you want without needing any JavaScript:
.section {
margin: 0 auto;
text-align: center
}
.container {
height: 100px;
width: 500px;
display: flex;
}
.container form {
flex: 1 1 auto;
}
.container form, .container fieldset, .container input {
height: 100%;
}
<div class="section">
<div class="container">
<form class="left">
<fieldset>
<legend>PC Management</legend>
<div>
<input type='submit' value='Backup' />
<input type='submit' value='Backup' />
<input type='submit' value='Backup' />
</div>
</fieldset>
</form>
<form class="right">
<fieldset>
<legend>PC Management</legend>
<div>
</div>
</fieldset>
</form>
</div>
</div>
http://jsfiddle.net/eeLfx9d6/1/
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;
}
How do you do it so that the select tag and text input will be side by side regardless of the div's width, while also making text input responsive (occupy 100% of the width of the container div)
CSS:
input[type="text"] { width: 100%; }
HTML:
<div style="width:500px; background:red; padding:10px;">
<input type="text" name="test" style="float:left;">
<select style="float:left;"><option>test</option></select>
</div>
Example: http://jsfiddle.net/F6Jtj/
Do you want to align both on the same line with a width of 100% than you can do it this way
Demo
<div class="wrap">
<select>
<option>Hello</option>
<option>World</option>
</select>
<span><input type="text" /></span>
</div>
.wrap span {
display: block;
padding-right: 5px;
overflow: hidden;
}
.wrap input[type=text] {
width: 100%
}
.wrap select {
float: right
}
Task: Make text box 100% width but allow enough room for button.
Problem: Button appears on next line and text box exceeds width of its container.
<div class="field">
<input type="text" name="my-field" />
<input type="button" id="my-button" value="Add +" />
</div>
.field {
margin-right: -70px;
width: 100%;
}
.field input[type=text] {
display: block;
float: left;
margin-right: 70px;
}
.field input[type=button] {
display: block;
float: right;
}
My primary layout uses the following trick to achieve flexible width with fixed sidebar, but for some reason this is not working on the above.
<div class="outer-wrap">
<div class="content">
...
</div>
<div class="sidebar">
...
</div>
</div>
.outer-wrap {
margin-right: -300px;
width: 100%;
}
.content {
float: left;
margin-right: 300px;
}
.sidebar {
float: right;
}
What mistake am I making here?
You have to screw with the HTML a bit, but otherwise this works perfectly in IE7+ and all modern browsers.
See: http://jsfiddle.net/thirtydot/25bZC/
CSS:
.field > span {
display: block;
overflow: hidden;
padding-right: 10px
}
.field input[type=text] {
width: 100%
}
.field input[type=button] {
float: right
}
HTML:
<div class="field">
<input type="button" id="my-button" value="Add +" />
<span><input type="text" name="my-field" /></span>
</div>
To pull this off you must ensure that the element which you are floating right comes before the one floating left. Like this
<div class="field">
<input type="button" id="my-button" value="Add +" />
<input type="text" name="my-field" />
</div>
try giving fixed width to
field input[type=text]
and
.field input[type=button]