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;
}
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:
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;
}
I have created a simple form with two fields, Username and password and a Log in buttion which use CSS.
I am trying to centre the form and its labels. current it centres the field boxes but not the labels, it looks like this: http://jsfiddle.net/zkzh66n0/
I think its something to do with the other CSS styles because when I tried the style on its own in fiddle it worked: http://jsfiddle.net/zkzh66n0/1/
HTML:
<div id ="form">
<form action = "entryformlogon.php" method="post">
<label for = "user">Username</label>
<input type ="text" name ="Username"><br>
<label for ="password">Password</label>
<input type ="password" name = "Password"><br>
<input type = "submit" name ="loginbutton" value ="Log in">
</form>
</div>
CSS:
label{
float: left;
width: 120px;
}
input, textarea{
width: 180px;
margin-bottom: 5px;
}
#loginbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
#form {
text-align: center;
position: relative;
top: 100px;
}
Replace float: left with display: inline-block, then the width and margin work. Also, if you want to refer to the loginbutton via #loginbutton, you have to set its id attribute in addition to the name, because that is what this selector refers to.
fiddle
The relevant CSS:
label{
display: inline-block;
width: 120px;
text-align: left;
}
#loginbutton{
display: inline-block;
margin-left: 28px;
margin-top: 5px;
width: 90px;
}
I also changed the buttons CSS to include display: inline-block so the margin can be set so it lines up with the inputs.
try this
http://jsfiddle.net/zkzh66n0/2/
remove float: left; from label.
if you need space in labels and input box try to give padding like below fiddle
http://jsfiddle.net/zkzh66n0/3/
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.