I have created a dynamic height input as follow which scales when browser resize. The second step that I would like to achieve is to vertically center the input text. I use vertical-align: middle but it seems that nothing changes.
What could I do to vertically align the input text
input{
background: lightgray;
vertical-align: middle;
width: 100%;
height: 30%;
padding-top: 30%;
}
<input type="text">
Since your input has a padding-top: 30%; you can just say padding: 15% 0; instead so your text will be dynamically centered within your <input>.
input{
background: lightgray;
width: 100%;
padding: 15% 0;
}
<input type="text">
You need to remove padding-top and by default text in input will be centered.
body, html {
height: 100%;
}
input {
background: lightgray;
width: 100%;
height: 30%;
}
<input type="text" placeholder="Text">
Related
Why does display: inline-block not work properly for <input type="file">?
I would like the width of the element to be as wide as the content it's made of (button + text). But there's always some free space at the end of the text.
Why? And can this be fixed?
input[type="file"] {
display: inline-block;
min-width: auto;
width: auto;
background-color: lightgray;
}
<input type="file">
Screenshot: https://ibb.co/pWWdQ0y
I do not know whether it is eligible for you, however it is possible to set width through CSS:
input[type='file'] {
width: 180px;
background-color: lightgreen;
}
<input type="file">
Try giving the width in percentage, it will work.
input[type='file'] {
width: 36%;
background-color: lightgray;
}
After trying to get it right for hours I've finally found a way to align two divs perfectly on one line, but now I'm trying to get a button and an input box aligned and they're just slightly off. Note: I'm using Bootstrap with this!
Here's my code:
html:
<input id="col1" type="text" class="form-control" placeholder="Enter activity" /><button id="col2" class="btn btn-outline-success my-2 my-sm-0" type = "button">Add</button>
css:
body {
margin: 10px;
}
#col1 {
display: inline-block;
width: 70%;
height: 100px;
}
#col2 {
display: inline-block;
width: 30%;
height: 100px;
}
button, input {
height: 100%;
width: 100%;
line-height: 0;
border: 0;
}
http://jsfiddle.net/x1hphsvb/335/
Any help is appreciated!
Just add vertical-align: baseline; to the button's CSS. (The default vertical alignment for buttons in bootstrap is "middle"):
http://jsfiddle.net/q3aarre2/1/
You have a few more properties to zero out:
button, input {
...
border: 0;
line-height: 0;
vertical-align: top; /* or 'middle'; for Bootstrap */
}
Demo
My dear friend, you just do it
input, button {
vertical-align:middle;
}
I would like to create a dropdown that drops down a custom panel (div) instead of a list of options. That panel is irrelevant because it is not tied to the layout I am asking about. For the basic drop-down look I have the following:
<style>
.folder-selection {
width: 100%;
}
.dropdown-button {
float: right;
}
</style>
<div id=container>
<input type="text" class="folder-selection" />
<button type="button" class="dropdown-button">...</button>
</div>
Now I know the float and width 100% are not right, but I have a container div, with an input on the left and a button on the right. The button must remain fixed to the right of the input. If the container is narrow, the input must be narrow, and vice versa, but I want to achieve this without knowing at design time the width of the container.
The container should fit into any width and the input's width should adjust accordingly. Just like a normal select element, where the text portion always fills all the space not taken by the dropdown icon/button at its right.
Below example will help you. Let me know, if you don't want fixed width icon in right so I'll update this code accordingly.
#container {
position: relative;
border: 1px solid #ccc;
padding: 5px 40px 5px 5px;
margin: 0 0 10px;
}
.folder-selection {
width: 100%;
padding: 5px;
border: none;
box-sizing: border-box;
height: 30px;
}
.dropdown-button {
position: absolute;
top: 5px;
right: 5px;
height: 30px;
}
<div id=container>
<input type="text" class="folder-selection" />
<button type="button" class="dropdown-button">...</button>
</div>
<style>
.dropdown-button {
width: 16px; /*Set width of button*/
}
.folder-selection {
width: calc(100% - 16px); /*div's width minus button's width*/
}
</style>
<div id=container>
<input type="text" class="folder-selection" /><!-- this comment is to remove white space between the two elements
--><button type="button" class="dropdown-button">...</button>
</div>
You don't really have to set the width of the button as long as you know its width on runtime.
This code will help you to position your elements as you expected.
* {
box-sizing: border-box;
}
.dropdown-container {
width: 500px;
display: table;
background: orange;
}
.dropdown-container .input-container {
display: table-cell;
}
.dropdown-container .input-container input {
width: 100%;
padding-right: 10px;
}
.dropdown-container .button-container {
display: table-cell;
width: 150px;
}
.dropdown-container .button-container button {
width: 100%;
}
<div class="dropdown-container">
<div class="input-container">
<input type="text" class="folder-selection" />
</div>
<div class="button-container">
<button type="button" class="dropdown-button">Drop</button>
</div>
</div>
I am wanting to make a form where all the fields, and the input buttons are perfectly horizontally aligned. I tried setting margin: 0 auto on all the items (after resetting the css) but it seems like the length of the text fields make it so the items do not look horizontally center (the input button takes up much less space). Is there an easy way to offset this difference in widths without using absolute positioning (I want this to be responsive).
Here is the html:
<h1>
Please upload your file
</h1>
<form action="/upload" enctype="multipart/form-data" method="post">
<input type="file" name="upload" multiple="multiple" ><br>
<input type="submit" value="Upload">
</form>
And the css:
h1, form {
display: block;
text-align: center;
color: red;
margin-top: 1.2em;
}
h1 {
font-size: 2em;
margin-top: 2em;
margin-bottom: 1em;
}
p {
margin-top: .2em;
margin-bottom: 1em;
}
input {
display: block;
margin:0 auto;
}
input[type=submit] {
font-size: 2em;
}
And here is the issue I am mentioning. (I would like the choose files button centered)
Just add a border to your input fields to make it clear that it's centre aligned:
JSFiddle
input {
display: block;
margin:0 auto;
border: 1px solid #cfcfcf;
}
You can try setting input to a relative position and reposition from there:
input {
display: block;
margin: 0 auto;
position: relative;
left: 25px;
}
I want to vertically align 3 divs (that will contain icons) with input fields of a form. Is there any explanation why are form elements acting like they have top margins even after i set it to 0?
<form>
<div></div>
<div></div>
<div></div>
<input type="text" placeholder="username">
<input type="password" placeholder="password">
</form>
* {
margin: 0;
padding: 0;
}
form {
border: 1px solid black;
display: inline-block;
}
div {
display: inline-block;
height: 32px;
width: 32px;
background: red;
}
http://jsfiddle.net/pnW4C/1/
Thank you.
You would add vertical-align:top to the elements in order to solve the alignment issues.
EXAMPLE HERE
div {
display: inline-block;
height: 32px;
width: 32px;
background: red;
vertical-align:top; /* It works because they are inline-block.. */
}
Alternatively, the values middle and bottom would work too. It just needs to be something other than the default value, which is baseline.
If you're wondering why the value baseline was behaving as it was, see this answer.