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">
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 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'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
Have a class for the page, a container class for rows of div-boxes, and box class to style all of the boxes..
The rows of div-boxes need to be centered on the page..
What combination of width + display + margin is required (cross-browser)?
The boxes are floating-left, which seems to be the origin of the question..
Current CSS:
.page {
width: 100%;
}
.container {
width: 100%;
display: block;
margin: 0 auto;
}
.box {
float: left;
margin: %;
}
You'd want to use display:inline-block in your boxes, effectively treating them like text and then set text-align:center in your container
.container {
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
background: grey;
}
Demo fiddle
I made a jsFiddle. Its fixed width. my question is how many .box elements will there be?
if its dynamic then use some javascript to work out the widths of '.box'
http://jsfiddle.net/james_nicholson/4P9s8/10/
.page {
width: 100%;
border:1px solid black;
height:auto;
}
.container {
width: 440px;
display: block;
margin: 0 auto;
background:blue;
min-height:500px;
}
.box {
float: left;
width: 100px;
background: red;
margin: 5px;
display: block;
height: 100px;
}
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;
}