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.
Related
<div className="formContainer">
<InputBox types={"Questions"} setText={setQuestion} submit={submit} />
<InputBox types={"Solutions"} setText={setAnswer} submit={submit} />
</div>
Above are my html code and InputBox is a component of react which has a textArea nested between fieldset
.formContainer {
display: flex;
}
.inputBox {
flex: 1;
resize: none;
line-height: 30px;
border-radius: 0px;
border-style: none;
width: 100%;
max-width: 100%;
}
The desired pattern is two textarea in the fieldset aligns side by side with 50% width. I don't understand why my code shrinked two textarea and float to the left, please refer to the attached screencap , of the textarea and how could i fix that . Please kindly advise.
and your code do something?
I don't know react but I see that you put <div className="formContainer">. In html corect is <div class="formContainer">. Also on the InputBox you need to set a class:
as I said, I don't know react, but if you want to arrange 2 objects in the same row with css you need to put to the main container
display: flex;
flex-direction:row;
Also you need to set a smaller width to the .inputBox, if you put 100% is impossible for them to be aligned next to each other
I'm not familiar with React InputBox per se, but it looks to me like you simply haven't assigned you .inputBox class, to the inputBox component.
Maybe it should be something like this:
<div className="formContainer">
<InputBox types={"Questions"} setText={setQuestion} submit={submit} className="inputBox" />
<InputBox types={"Solutions"} setText={setAnswer} submit={submit} className="inputBox" />
</div>
Outside of that I put together a quick plain HTML mockup of what you (I think) are trying to achieve:
.formContainer {
display: flex;
gap: 10px;
}
fieldset {
position: relative;
padding: 0;
margin: 0;
height: auto;
border: none;
}
fieldset label {
position: absolute;
top: -15px;
left: 7px;
background: white;
padding: 6px;
}
.inputBox {
flex: 1;
resize: none;
line-height: 30px;
border-radius: 10px;
padding: 5px 12px;
}
<div class="formContainer">
<fieldset>
<label for="questions">Questions</label>
<textarea name="questions" rows="3" cols="20" class="inputBox" placeholder="Questions"></textarea>
</fieldset>
<fieldset>
<label for="solutions">Solutions</label>
<textarea name="solutions" rows="3" cols="20" class="inputBox" placeholder="Solutions"></textarea>
</fieldset>
</div>
Hopefully that will be enough to help you out a bit there?
Also, here is a codepen to see the mockup working:
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 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">
I have one div inside that i have one label. But I am getting some space above the div. I can't remove that space any how.
Don't know what happens there.
Question: Why I am getting that space above div? How can I remove that space?
My code:
For display issue proper I had put color and border.
* {
padding: 0;
margin: 0;
}
body {
background: green;
}
label {
border: 1px solid black;
font-size: 10px;
}
<div>
<label>Some text</label>
</div>
I have tried many things but, didn't get any solution.
label is a inline element therefore add display:inline-block/block or vertical-align:top
* {
padding: 0;
margin: 0;
}
div {
font-size: 0;
/* fix inline-block gap - not needed when using block only*/
background: red
}
label {
border: 1px solid black;
font-size: 10px;
}
.l1 {
display: inline-block
}
.l2 {
display: block;
width: 9%
}
.l3 {
vertical-align: top;
}
<div>
<label class="l1">Some text</label>
</div>
<div>
<label class="l2">Some text 2</label>
</div>
<div>
<label class="l3">Some text 3</label>
</div>
Try to add vertical-align: top; for your label
* {
padding: 0;
margin: 0;
}
body {
background: green;
}
label {
vertical-align: top;
border: 1px solid black;
font-size: 10px;
}
<div>
<label>Some text</label>
</div>
This behaviour is caused because the div element has a browser-dependent default size applied to it. When it contains an element with a smaller font-size, the contained element will be placed on the baseline of the div which results in the space. To solve it, add a matching font size to the div:
div {
font-size: 10px;
}
It is coming because of the default line-height of the labels. You need to use reset.css or similar (like normalize.css) to clear the browsers default styling.
Here are some helpful reference, download and simply add them above your style sheet.
http://meyerweb.com/eric/tools/css/reset/reset.css
or
https://necolas.github.io/normalize.css/3.0.3/normalize.css
Looks like the line-height in the div is too high.
This does the trick:
div {
line-height: 10px;
}
(Of course you should reference the div with a class or id).
Inline element like span also behaves the same.
Add a float:left for the label
* {
padding: 0;
margin: 0;
}
body {
background: green;
}
label {
border: 1px solid black;
font-size: 10px;
float: left;
}
<div>
<label>Some text</label>
</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;
}