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;
}
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:
I want to put a checkbox with a label to its right in my simple webpage, but when I select the label and checkbox to change their display, they both behave differently.
When checkbox is set to inline, it moves up to the right of textarea who's display is set to block. So I figured I can just set checkbox display to block and label display to inline and the label will move to the right of block. Instead, the label stays below the checkbox and eliminates any margin between it and the send button.
How can I fix this?
The code is in JS Bin
The form is a child of .main-body
HTML
<form>
<label for="name-input">Name</label>
<input type="text" id="name-input">
<label for="message-input">Message</label>
<textarea id="message-input"></textarea>
<input type="checkbox" id="current-user">
<label for="current-user">I currently use SuiteLyfe</label>
<input type="submit" value="Send">
</form>
CSS
.main-body {
display: box;
width: 600px;
margin: 0 auto 0 auto;
}
textarea[id=message-input] {
display: box;
box-sizing: border-box;
width: 400px;
height: 200px;
margin-bottom: 15px;
font-size: 14px;
}
input[type=checkbox] {
display: block;
}
label[for=current-user] {
display: inline;
}
P.S. I'm aware of bootstrap and other technologies but right now I am learning barebones html and css and wish to understand it even though I realize it may not matter in my career.
Change your textarea display type to block and your checkbox display type to inline
textarea[id=message-input] {
display: block;
box-sizing: border-box;
width: 400px;
height: 200px;
margin-bottom: 15px;
font-size: 14px;
}
input[type=checkbox] {
display: inline;
}
I have a form element which I want to take up the same width as its children, with no margin, but no matter what I do the browser makes its width + margin take up 100% of the width.
Here is the html:
<div class="container">
<form method="GET" action="http://localhost/search" accept-charset="UTF-8">
<div class="search centered">
<div class="input-container">
<input type="text" name="query" class="searchbar" placeholder="What do you want to search?" />
<button type="submit" class="search-button">Search</button>
</div>
</div>
</form>
</div>
and the css:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.search * {
height: 35px;
}
.searchbar {
width: 450px;
}
.brandname {
position: relative;
font-size: 500%;
font-family: 'Lato', sans-serif;
color: #1f0e3e;
text-align: center;
margin-bottom: 30px;
margin-top: 5%;
}
body {
margin: 10px;
}
.input-container{
float: left;
display: block;
outline-style: solid;
outline-color: #e3e3e3;
outline-width: 1px;
}
.searchbar{
margin-left: 5px;
}
.search button {
background-color: rgba(152,111,165,0.38);
background-repeat:no-repeat;
border: none;
cursor:pointer;
/*overflow: hidden;*/
outline-width: 1px;
outline-style: solid;
outline-color: #e3e3e3;
color: white;
}
.search input{
outline-width: 0px;
}
form{
height: 30px;
width: 100px;
margin-left: 0px;
}
and here is a fiddle where you can see that even if you force the form to have a small width, the browser forces a left-margin to take up the rest of the space.
How can i get rid of this margin and make the form automatically take up the space of its child?
Adding display table to the form element will make it auto size to it's children elements.
form {
display:table;
}
Here is a working fiddle: https://jsfiddle.net/bnah6jLe/
Why the form is 100% width by default
By default forms in most browsers have their display type set to block. In the specification for block context it is defined as follows.
In a block formatting context, each box's left outer edge touches the
left edge of the containing block (for right-to-left formatting, right
edges touch)
Reference: https://www.w3.org/TR/CSS21/visuren.html#block-formatting
In short display:block is 100% width unless specified otherwise.
Side Note
Question: Why was table used for this example instead of something like inline-block.
Answer: I used table instead of inline-block because display context such as block and table are used as containing elements and do not group. Display context like inline-block and inline-table are used for child elements that are meant to be grouped together. It's a small difference but I thought considering form is usually meant as a container table would be more appropriate.
I would like to make a dynamic form, that is, the form will change its size dynamically, according to the elements contained within it.
code example
.myForm {
display: block;
vertical-align: top;
border: 1px solid #999;
border-radius: 3px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
font-family: Tahoma;
color:grey;
font-size: 12px;
padding: 10px;
padding-bottom: 35px;
background:#ECEEE9;
text-align: center;
}
<body>
<form class="myForm" id="noteForm" name="noteForm" METHOD="POST">
<h1>Add a note</h1>
<h2>Formatting</h2>
</form>
The outer sides of the form (border if you may) should just wrap around the text nicely, when the text gets longer, the form gets longer... at the moment it is just too wide to my liking.
I think you need to add display: inline-block; to .myForm
How does one set a margin to siblings but not to the parent?
For example, I've got input fields, buttons and a text area. I do want margins between these elements but I do not want an (extra) margin to the parent element.
I know I can set separate values for top right bottom left but that's not applicable IMO.
body {
background-color: #717074;
font-family: sans-serif;
margin: 1em;
}
.d1 {
background-color: white;
margin: 0 auto;
padding: 1px 1em;
width: 960px;
}
.fw {
width: 100%
}
input {
margin: 5px
}
textarea {
width: 100%
}
<div class=d1>
<form method=post>
<input name=name type=text required placeholder="Naam">
<br>
<input name=email type=email required placeholder="Emailadres">
<textarea name=body rows=5></textarea>
<input type=submit>
</form>
</div>
So there should be margin between the name and email input elements but not between these two and the parent div (for example).
I can't cheat by setting left and right margin to 0 as that'd break things when the name and email elements would be on the same line.
Updated to work with inputs on a single line (no line break between).
Note that I've put all the inputs on to a single line in the HTML because the whitespace between the elements was being rendered! (See here for an explanation)
body {
background-color: #717074;
font-family: sans-serif;
margin: 1em;
}
.d1 {
background-color: white;
margin: 0 auto;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
width: 960px;
}
.fw {
width: 100%
}
input {
margin-top: 0px;
margin-left: 0px;
margin-right: 5px;
margin-bottom: 5px;
}
textarea {
width: 100%;
}
<div class=d1>
<form method=post>
<input name=name type=text required placeholder="Naam"><input name=email type=email required placeholder="Emailadres"><textarea name=body rows=5></textarea><input type=submit>
</form>
</div>
Howsat?