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;
}
Related
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 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">
So I'm trying to create an input prompt similar to the python interpreter
It's supposed to be a single line with 3 parts:
the prompt '>>' which is pushed all the way to the left
the input text area, just a place to type input into
the submission button which is pushed all the way to the right
My problem is that I want the 2nd element to automatically use all of the remaining width that the other two elements are not using.
Here is the closest I've gotten, it's almost right, except ideally the input text area would extend all the way to the button. I'd also like to be able to do it without hard-coding widths
#top-container {
width: 600px;
}
#input-prompt {
/* nothing */
}
#input-area {
display: inline;
background-color: #DDDDDD;
}
#input-button{
float: right;
}
<div id="top-container">
<!-- Part 1, the prompt '>>' -->
<label id="input-prompt">
>>
</label>
<!-- Part 2, the text input area -->
<div id="input-area" contenteditable>
(this should be wider)
</div>
<!-- Part 3, the submission button -->
<button id="input-button">Submit</button>
</div>
Here is an example code that does the trick:
#top-container {
width: 600px;
}
#input-prompt {
float: left;
}
#input-area {
overflow: hidden;
background-color: #DDDDDD;
}
#input-button{
float: right;
}
<div id="top-container">
<!-- Part 1, the prompt '>>' -->
<label id="input-prompt">
>>
</label>
<!-- Part 3, the submission button -->
<button id="input-button">Submit</button>
<!-- Part 2, the text input area -->
<div id="input-area" contenteditable>
(is it OK now?)
</div>
</div>
Block with overflow:hidden establishes new block formatting context and thus can't overlap floats, so nearly all browsers place it next to floats and make it use all available space.
Alternatively, you can achieve the same layout with Flexboxes, but their browser support is still not ideal (especially IE9-).
You can use display:table for the container ,please see below
CSS:
#top-container {
width: 600px;
display:table;
}
#input-prompt {
background-color: red;
display: table-cell;
}
#input-area {
width:100%;
display: table-cell;
background-color: #DDDDDD;
}
#input-button{
background-color:yellow;
display: table-cell;
}
#top-container {
width: 600px;
display:table;
}
#input-prompt {
background-color: red;
display: table-cell;
}
#input-area {
width:100%;
display: table-cell;
background-color: #DDDDDD;
}
#input-button{
background-color:yellow;
display: table-cell;
}
<div id="top-container">
<!-- Part 1, the prompt '>>' -->
<label id="input-prompt">
>>
</label>
<!-- Part 2, the text input area -->
<div id="input-area" contenteditable>
(this should be wider)
</div>
<!-- Part 3, the submission button -->
<button id="input-button">Submit</button>
</div>
You could try this:
#top-container {
width: 600px;
}
#input-area {
display: inline-block;
background-color: #DDDDDD;
width:89%;
}
#input-area:before{
content:'>>'
}
#input-button{
display:inline-block
}
This reserves fixed areas for the prompt and button and makes the input box cover the remaining area:
#top-container {
position: relative;
width: 600px;
}
#input-prompt {
display: inline-block;
}
#input-area {
position: absolute; top: 0; left: 1.5em; right: 4.5em;
background-color: #DDDDDD;
}
#input-button{
position: absolute; top: 0; right: 0;
}
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.