I'm trying to let a label and an input field fill the whole width of a from. Here is my attempt. This is the HTML
<form>
<p>
<label>Username:</label>
<input/>
</p>
</form>
and CSS
form {
widht: 400px height: 500px;
background-color: lightgrey;
}
label {
float: left;
}
input {
width: 100%;
box-sizing: border-box;
}
When I put a with: 100% in the input field it moves below the label and without the width it is too small. Any suggestions ?
Use a wrapper element around your input and set overflow: hidden; (Make sure you use a block level element, if you are using span than declare display: block; in your CSS)
Demo
<label>Blah Blah</label>
<div><input type="text" /></div>
label {
float: left;
}
div {
overflow: hidden;
}
input[type=text] {
width: 100%;
}
you have to set width attribute properly.
Live Demo
label {
float: left;
width: 15%;
}
input {
width: 83%;
box-sizing: border-box;
}
If you firebug it, you will know that Your border is actually putting some padding to the container p. So, if you just put border to none then you will be good to do.
If you want to use border and dont want the input to go outside the form, then you need to either shorten the width of the input a little and apply border or you give some padding to your form.
Try This CSS
form {
background-color: #D3D3D3;
height: 500px;
width: 400px;
}
form p{
float: left;
position: relative;
width: 100%;
}
label {
float: left;
position: relative;
width: 100%;
}
input {
border:0;
float: left;
height: 20px;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
}
Here is the DEMO
Related
I am trying to create a button div and input to all be 80% the width of their container.
However the input is always bigger than 80%. Why is this? Do I need to use calc in some way to get it to 80%.
Even when setting the padding to 0px it is still bigger:
https://jsfiddle.net/0rcv1ypb/
<input/>
<button></button>
<div></div>
input{
display: block;
width: 80%;
}
button{
display: block;
width: 80%;
height: 20px;
}
div{
width: 80%;
height: 20px;
background: black;
}
As a side question: the default width for input appears to be 145px. Where does this value come from as it is not in the agent style sheet.
Because the default browser styling is box-sizing: content-box.
Reset it and all elements get the same width as expected, even with different paddings/borders.
* {
box-sizing: border-box;
}
input{
display: block;
width: 80%;
}
button{
display: block;
width: 80%;
height: 20px;
}
div{
width: 80%;
height: 20px;
background: black;
}
<input/>
<button></button>
<div></div>
Take a look at the box-model and here.
I am new to CSS. I want my textbox (input) to be center aligned, also, I want to set a specific height to it. I want it to be responsive, so I am using % instead of px. It (%) seems to be working for width, but not for the height. For height, only px values are working. Also, I assigned my input's display property to be inline-block and margin 0 auto, but it is not working. Where am I going wrong??
Here's the code:
input {
width: 70%;
margin: 0 auto;
display: inline-block;
height: 20%;
}
Here's a code sample.
input {
width: 70%;
margin: 0 auto;
display: inline-block;
height: 20%;
}
<input type="text">
If you want to use % for height you will have to add some helper CSS first. Like the following:
html,body{
height:100%;
}
and for making the <input> centre use
margin: 0 auto;
display: block;
A working sample for you:
input {
width: 70%;
margin: 0 auto;
display: block;
height: 20%;
}
html,
body {
height: 100%;
}
<input type="text">
There is an easy another way if you are Interested you can go with vh[Viewport-height],
for this method, there is no need to use any other helping CSS to use, so the choice is yours..
A working sample for this method:
input {
width: 70%;
margin: 0 auto;
display: block;
height: 20vh;
}
<input type="text">
Hope this was helpfull.
In CSS, some, if not most, properties of an element depends on its parent's properties.
So, to make height: 20% work, you need to set a height for the input's parent. In the example below, body is the parent of input.
To center-align an element using margin: 0 auto, the element must have display: block.
html, body {
height: 100%; /* Set a parent height */
}
input {
width: 70%;
margin: 0 auto;
display: block; /* Use display: block; */
height: 20%;
}
<input type="text">
Set this style to input tag.
input {
width: 70%;
margin: 0 auto;
display: block;
height: 20vh;
}
<input type="text">
You need to give display:block for aligned center to input and display:inline-block is already apply here and give height to body,html for applying height to input
html,body{
height:100%;
}
input {
width: 70%;
margin: 0 auto;
display: block;
height: 20%;
}
<input type="text">
If you will not work with flex then display:block; and width is important for centering elements.
div {
width: 100%;
display: block;
}
input{
display:block;
width: 70%;
padding: 5px;
font-size:18px;
margin:0 auto;
}
<div>
<input type="text">
</div>
Change display: inline-block; to display: block; and height: 20%; to height: 20vh;
input {
width: 70%;
margin: 0 auto;
display: block;
height: 20vh;
}
<input type="text">
UPDATE
Only change display: inline-block; to display: flex;
input {
width: 70%;
margin: 0 auto;
display: flex;
height: 20%;
}
<input type="text">
I have a div containing an input and an a element:
.wrapper {
width: 300px;
display: inline-block;
}
.custom-input {
display: block;
width: 100%;
}
.button {
width: 20px;
height: 20px;
background-color: #ccc;
display: block;
}
<div class="wrapper">
<input class="custom-input" type="text" />
<a class="button"></a>
</div>
Here's a jsfiddle.
I want my input and my button inline. The input with button always has 100% width of the wrapper. In some cases, I want to remove the button. The input then has 100% width of the wrapper div.
It is only inline when I use inline-flex for the wrapper. But I want it to be able to run on old browsers (IE 8-9), and I want my input and my element to always have 100% width of wrapper.
How can I do it?
Using width: 100% on your input will make it take all the horizontal space available, pushing the button to the line below.
This should work :
.wrapper{
width: 300px;
display: inline-block;
}
.custom-input{
display: inline-block;
}
.button{
width: 20px;
height: 20px;
background-color: #ccc;
display: inline-block;
}
Here's the updated jsfiddle : http://jsfiddle.net/k6yhtf92/3/
try to use display: inline-block instead display:block
updated css
.wrapper{
width: 300px;
display: block;
}
.custom-input{
display: inline-block;
}
.button{
width: 20px;
height: 20px;
background-color: #ccc;
display: inline-block;
}
I am trying to make the label and input field appear on the same line, with a variable width input field that will expand based on the space available
http://jsfiddle.net/chovy/WcQ6J/
<div class="clearfix">
<aside>foo</aside>
<span><input type="text" value="Enter text" /></span>
</div>
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
div {
border: 1px solid red;
}
aside {
display: block;
width: 100px;
background: #eee;
float: left;
}
span {
display: block;
width: 100%;
background: #ccc;
}
input {
width: 100%;
box-sizing: border-box;
border: 1px solid #000;
}
It works fine with a span, but when I add input it wraps to next line.
Here is some whacky solution. I honestly don't really understand why this works. I had it in an old codepen. Good luck!
http://jsfiddle.net/sheriffderek/DD73r/
HTML
<div class="container">
<div class="label-w">
<label for="your-input">your label</label>
</div>
<div class="input-w">
<input name="your-input" placeholder="your stuff" />
</div>
</div> <!-- .container -->
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
float: left;
height: 2em;
}
.label-w {
width: 8em;
height: 100%;
float: left;
border: 1px solid red;
line-height: 2em;
}
.input-w {
float: none; /* key */
width: auto; /* key */
height: 100%;
overflow: hidden; /* key */
border: 1px solid orange;
}
.input-w input {
width: 100%;
height: 100%;
}
You could use the CSS calc property to determine the width minus the borders and aside width:
input {
width: calc(100% - 102px); /* 100% minus (aside width (100px) + border width (2px)) */
box-sizing: border-box;
border: 1px solid #000;
}
FIDDLE
You could use display: table-*:
div {
display: table;
width: 100%;
background-color: #ccc;
}
aside {
display: table-cell;
width: 100px;
background: #eee;
}
span {
display: table-cell;
background: #bbb;
}
input {
display: block;
width: 100%;
background-color: #ddd;
}
http://jsfiddle.net/userdude/WcQ6J/5/
This is a little bit more compatible (and flexible) that display: inline-block, which is not supported in IE8.
You can set the width of the "aside" to pixels and the span to a percent, but, as you've seen, that will cause problems. It's easier to set both to a percent. Also, "inline-block" will put your elements in line. You can use this or "float: right;", but I prefer setting the display.
aside {
display: inline-block;
width: 9%;
}
span {
display: inline-block;
width: 90%;
}
See jsfiddle.
In case you want a truly variable width input field, so that you can manually adjust its width to fill the entire page, or to any other convenient width, why not make that input element fill 100 % of a resizable div?
CSS:
<style>
div.resize {
width: 300px; /*initial width*/
resize: horizontal;
overflow: auto;
}
HTML:
<div class="resize">
<input style="width: 100%" />
The little triangle to drag to resize the div will appear in the lower-right corner of the input element!
I would like to put a label and an input[type=text] on the same line, and I would like for the input's width to fill the remaining width of the containing element, regardless of the length of the label's text (see first image).
I tried to use width: auto; for the input, but it seems to have a static width. I also tried width: 100%;, but that moves the input to a new line (see second image).
How can I achieve this using CSS?
It's possible without JavaScript, see: http://jsfiddle.net/Khmhk/
This works in IE7+ and all modern browsers.
HTML:
<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>
CSS:
label {
float: left
}
span {
display: block;
overflow: hidden;
padding: 0 4px 0 6px
}
input {
width: 100%
}
The reason why overflow: hidden is so magically useful in this instance is explained here.
display: table-cell is another option, see: http://jsfiddle.net/Khmhk/1/
This works in IE8+ and all modern browsers:
HTML:
<div class="container">
<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>
</div>
CSS:
.container {
display: table;
width: 100%
}
label {
display: table-cell;
width: 1px;
white-space: nowrap
}
span {
display: table-cell;
padding: 0 0 0 5px
}
input {
width: 100%
}
That still works for me, but ftr this is how Bootstrap 3 does it (thanks to #morten.c's answer to "Bootstrap full-width text-input within inline-form"). Don't know if it's harder to break than #thirtydot's, or anything. But here it is, and here's a fiddle that also gives a basic example of how to deal with a narrow-screen break point.
HTML:
<form class="responsive">
<input type="text" placeholder="wide input..."/>
<span>
<input type="submit"/>
</span>
</form>
CSS:
form.responsive, form.responsive * {
box-sizing: border-box;
width: 100%;
height: 40px !important; /* specify a height */
}
form.responsive {
position: relative;
display: table;
border-collapse: separate;
/* just to be safe */
border: 0;
padding: 0;
margin: 0;
}
form.responsive > input {
position: relative;
width: 100%;
float:left;
margin-bottom: 0;
display: table-cell;
}
form.responsive span {
position: relative;
width: 1%;
vertical-align: middle;
display: table-cell;
}
form.responsive span input {
margin: 0;
margin-left: -1px;
display: inline-block;
vertical-align: middle;
overflow: visible;
}