I have a little problem with a HTML form and its submit button:
<form action="login/login.php" method="post" style="margin-top: 10px;">
<input id="login" name="username" type="text" placeholder="Nutzername" />
<input id="login" type="password" name="passwort" placeholder="Passwort" />
<input id="login" type="submit" value="Anmelden" />
</form>
CSS:
input[type=text]#login, input[type=password]#login {
border: 1px solid #ccc;
display: block;
height: 20px;
text-align: center;
width: 100%; }
input[type=submit]#login {
display: block;
height: 20px;
text-align: center;
width: 100%;
}
Result: http://jsfiddle.net/jMTT3/72/
As you can see, the button is slighty smaller than those text boxes.. What am I doing wrong?
The default setting is for width to apply to the content box (excluding padding and border). As the padding is different, the outer width is different.
You want to add:
-moz-box-sizing: border-box;
box-sizing: border-box;
to at least both of them.
Alternatively, you can set the same padding and border to achieve the same effect.
EDIT: Working Fiddle
Related
Good day, so i have a login function encased in a div tag. I would just like to freeze the div if i resize. I tried adding min-width and display: inline-block but its still resizing. Any help would be appreciated. Also, using a pixel value still wont work.
the screenshot shows that min-width:300% !important; did not work.
I also placed my code in JS Fiddle: https://jsfiddle.net/wvhgsek9/
HTML:
<form class="reg_log_box login_box form-group">
<br>
<div class="row">
<div class="col-md-12">
<p>EMAIL</p>
<input type="text" placeholder="EMAIL" autocomplete="off" name="email"
value="<?php
if(isset($_POST["email"])) {
echo($_POST["email"]);
} ?>">
</div>
<div class="col-md-12">
<p>PASSWORD</p>
<input type="text" placeholder="PASSWORD" autocomplete="off" name="password">
</div>
</div>
<input type="submit" id="login" name="login" value="LOGIN" class="reg_signup">
<p class="center_font">NO ACCOUNT YET? REGISTER HERE</p>
<br>
</form>
CSS:
.login_box {
min-width: 30% !important;
display: inline-block
}
.reg_log_box {
width: 50%;
padding: 10px 70px 10px;
background: #fff;
opacity: 0.9;
border-radius: 30px;
margin: 0 auto;
}
Using
.login_box {
min-width: 30% !important;
display: inline-block
}
Is not going to work because that will mean to resize the box always to 30% of what ever the browser window's width is.
Instead, supply a pixel based value e.g.
.login_box {
min-width: 300px;
}
Edit:
To fully stop resizing completely then change your width to a pixel based value.
.reg_log_box {
width: 500px;
padding: 10px 70px 10px;
background: #fff;
opacity: 0.9;
border-radius: 30px;
margin: 0 auto;
}
You can then remove .login_box css all together...
try resize: block;
block
The element displays a mechanism for allowing the user to resize it in the block direction (either horizontally or vertically, depending on the writing-mode and direction value).
https://developer.mozilla.org/en-US/docs/Web/CSS/resize
how make textbook and button left margin always same by resizing the screen?
this is my css code:
.forgot-password-textbox {
font-size: #textbox-font-size;
border-radius: #textbox-border-radius;
border: #border-lines solid #Black;
padding: #padding-40 / 4;
width: #forgot-password-textbox-width;
box-shadow: 0 1px #Grey;
margin-bottom: #forgot-password-textbox-margin-bottom;
position:relative;
}
.forgot-password-button {
margin-left: #forgot-password-textbox-button-margin-left;
margin-top: auto;
width: 40%;
height: 45px;
position:relative;
}
and this is my html:
<div>
<div>Email Address</div>
<div><input type="email" name="email" placeholder="example#email.com" id="email" class="forgot-password-textbox"></div>
<div>
<label id="Message" class="forgot-password-error-message"></label>
</div>
<div>
<input type="button" value="Submit" id="btn-reset-password" onclick="resetPasswordHandler()" class="orange-button forgot-password-button">
</div>
</div>
I need Email and submit button left margin stay same with all page sizes.
This is how I see the page with regular screen:
and this is when screen get smaller:
You can do box-sizing: border-box; on the input field, and then have the submit button use margin-left: auto. So long as both are display: block;, it should work.
Here is the JSBin for proof of concept: http://jsbin.com/helosub/1/edit?css,output
I am trying to have the input field and the submit button stretch across the screen in the same row. Basically so the submit button does not ever go below the input field. Not even sure if I need to add an extra or not. I know that I have seen a way to have a responsive input field and submit button using display:table-cell, but I have not been able to find it lately. Any help would be appreciated.
**EDIT
I added: margin-left: -8px; to the submit button and that did the trick. Not sure if there is a better way but this works. Any other ways would be appreciated as well.
#div1{
display:table;
width:100%;
}
#div2{
display:table-cell;
}
input[type="email"].form-control {
width: 80%;
padding: 0px;
margin: 0px;
}
input[type="submit"].btn.btn-primary {
width: 20%;
padding: 0px;
margin: 0px;
margin-left: -8px;
}
<div id="div1">
<div id="div2">
<input type="email" name="EMAIL" class="form-control"
placeholder="Enter your E-mail Address">
<input type="submit" value="Subscribe" class="btn btn-primary">
</div>
</div>
Are you Trying to achieve something like this using display:table-cell ?
<div id="div2">
<input type="email" name="EMAIL" class="form-control"
placeholder="Enter your E-mail Address">
<input type="submit" value="Subscribe" class="btn btn-primary">
* {
box-sizing: border-box;
}
#div2 {
display: table;
width: 100%;
}
#div2 > * {
display: table-cell;
}
#div2 > input[type='email'] {
width: 80%;
}
#div2 > input[type='submit'] {
width: 20%;
}
the key is box-sizing: border-box; you can write it just for your desired elements
https://jsfiddle.net/uw4u6ta5/3/
The line feed between the two s creates a space between them on the page. You have to remove the line feed, or use this trick :
<input type="email" name="EMAIL" class="form-control" placeholder="Enter your E-mail Address"><!--
--><input type="submit" value="Subscribe" class="btn btn-primary">
Also you have to remove border because it has 2px border so it's width is 20%+80%+ 2px+2px+2px+2px(left and right for two inputs)
use
border:0;
check this updates jsfiddle please
Check this post remove spaces between inputs
You really don't need two divs wrapping your inputs for this. You need to set the div to white-space: nowrap; to keep your inputs on one line. Simply set your inputs to width: 50%; or you may choose any other combination targeting each input specifically.
#div2 {
display: block;
margin: 0 auto;
width: 100%;
white-space: nowrap;
}
input {
display: inline-block;
width: 50%;
}
If you want the input to be 80% and the button to be 20% you need to target them individually with your classes.
.form-control {
display: inline-block;
width: 80%;
margin: 0;
padding: 0;
}
.btn-primary {
width: 20%;
margin: 0 auto;
padding: 0;
}
(JSFiddle) Updated
The code:
<!DOCTYPE html>
<html>
<head>
<title>Set Alarm Clock</title>
<style type="text/css">
#container {
width: 600px;
height: 300px;
border: 1px solid black;
}
#hours, #minutes, #seconds {
width: 120px;
height: 80px;
}
#button {
width: 120px;
height: 80px;
}
</style>
</head>
<body>
<center>
<div id="container">
<h1>Set Alarm Clock</h1><br />
<label class="hours">
<input type="number" value="0" min="0" id="hours" />
</label>
<label class="minutes">
<input type="number" value="0" min="0" id="minutes" />
</label>
<label class="seconds">
<input type="number" value="0" min="0" id="seconds" />
</label>
<label>
<input type="submit" value="Set Alarm" id="button" />
</label>
</div>
</center>
</body>
</html>
I am trying to make the input:type="submit" button the same height as the labels for the hours, minutes and seconds boxes i have created. However i can only change the width of the button, not the height. How can i make the height the exact same as the labels? Thanks.
Button should be 86px height:
#button {
width: 120px;
height: 86px;
}
It is happening because the height of the button is including the paddings and the border. 86px is the whole height of the button.
Button includes the padding and the border attributes by default.
You can just add box-sizing: content-box; to the button.
#button {
width: 120px;
height: 80px;
box-sizing: content-box;
}
Here is the fiddle
Please update the #button id with the box-sizing attribute. Please Click here to see resolved issue.
#button {
width: 120px;
height: 80px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
I'm new to world of forms! I had made divs and css for the exact layout I want for the forms. Is there anyway to maybe just turn that div tag into button or a text field while still using the same css rules so the layout doesn't change?
Here is some code and demo to just check what I have going on.
HTML
<div id="loginContainer">
<div id="loginForm">
<div id="login"></div>
<div id="loginUsername"></div>
<div id="loginPassword"></div>
<div id="loginSubmit"></div>
</div>
<div id="registerForm">
<div id="register"></div>
<div id="registerName"></div>
<div id="registerEmail"></div>
<div id="registerPassword"></div>
<div id="registerPasswordConfirm"></div>
<div id="registerSubmit"></div>
</div>
</div>
CSS
#loginContainer {
width: 50%;
height: 50%;
position: absolute;
left: 21.8%;
top: 40%;
z-index:-9999;
}
#loginForm {
width:47.5%;
height: 100%;
float:left;
top: 0%;
position:relative;
}
#login {
width: 100%;
height: 10%;
top: 0;
background-image:url(../_images/_login/login.png);
background-size: 100% 100%;
position: absolute;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#loginUsername {
width: 100%;
height: 10%;
top: 15%;
background-color: #383d3f;
position: absolute;
border-radius: 5px;
}
#loginPassword {
width: 100%;
height: 10%;
top:30%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#loginSubmit {
width: 100%;
height: 10%;
top: 45%;
background-color:#76c2bb;
position:absolute;
border-radius: 5px;
}
#registerForm {
width:47.5%;
height: 100%;
float:right;
top: 0%;
position:relative;
}
#register {
width: 100%;
height: 10%;
top:0%;
background-image:url(../_images/_register/register.png);
background-size: 100% 100%;
position:absolute;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#registerName {
width: 100%;
height: 10%;
top:15%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#registerEmail {
width: 100%;
height: 10%;
top: 30%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#registerPassword {
width: 100%;
height: 10%;
top: 45%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#registerPasswordConfirm {
width: 100%;
height: 10%;
top: 60%;
background-color:#383d3f;
position:absolute;
border-radius: 5px;
}
#registerSubmit {
width: 100%;
height: 10%;
top: 75%;
background-color:#76c2bb;
position:absolute;
border-radius: 5px;
}
CLICK FOR DEMO
Sure you can, just replace the right elements with input with proper markup, add an opening and closing form tag, remove the borders, and you're good to go:
<div id="loginContainer">
<div id="loginForm">
<div id="login"></div>
<form method="post" name="loginForm">
<input id="loginUsername" type="text" name="loginUsername" />
<input id="loginPassword" type="text" name="loginPassword" />
<input id="loginSubmit" type="submit" name="loginSubmit" value="" />
</form>
</div>
<div id="registerForm">
<div id="register"></div>
<form method="post" name="loginForm">
<input id="registerName" type="text" name="registerName" />
<input id="registerEmail" type="text" name="registerEmail" />
<input id="registerPassword" type="text" name="registerPassword" />
<input id="registerPasswordConfirm" type="text" name="registerPasswordConfirm" />
<input id="registerSubmit" type="submit" name="registerSubmit" value="" />
</form>
</div>
</div>
#loginContainer input {
border:0
}
Here is your updated demo: http://jsfiddle.net/7w1adgko/2/
EDIT: Note that you may want to fill out the value property of the submit buttons so that users will actually know it's the submit button.
<input id="loginSubmit" type="submit" name="loginSubmit" value="Login" />
or...
<input id="registerSubmit" type="submit" name="registerSubmit" value="Register" />
Also, in order users to know what field is what, you may want to use the placeholder property.
<input id="loginUsername" type="text" name="loginUsername" placeholder="Username" />
<input id="loginPassword" type="text" name="loginPassword" placeholder="Password" />
or...
<input id="registerName" type="text" name="registerName" placeholder="Name" />
<input id="registerEmail" type="text" name="registerEmail" placeholder="Email" />
<input id="registerPassword" type="text" name="registerPassword" placeholder="Password" />
<input id="registerPasswordConfirm" type="text" name="registerPasswordConfirm" placeholder="Confirm Password" />
And to make it prettier, you could add some colour and padding to the inputs.
#loginContainer input {
border:0;
padding: 0 10px;
color:white
}
Here is your most recent fiddle with these changes: http://jsfiddle.net/7w1adgko/3/
EDIT 2: To make all the boxes have the same width, you could specify the same box model for type="text" and type="submit" inputs (source: CSS: Submit button looks smaller than text input and textarea)
#loginContainer input {
border:0;
padding: 0 10px;
color:white;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
Here is the updated fiddle: http://jsfiddle.net/7w1adgko/4/
It would be better to start from the proper functional markup and then consider styling. For the functionality of a form, you need elements like input to set up the controls, label to have labels (captions) associated with controls, and form to contain the entire form. (And you probably should not have two forms side by side, it can be confusing.)
However, if you have designed a layout in a “DIVistic” way and you wish to turn it to a functional form element with working controls, you need to take into account that form-related elements have default rendering that you may need to override. A form element has top and bottom margin by default, label elements are inline elements (display: inline) as opposite to div elements that are blocks (display: block), and input elements are inline blocks that have borders and padding.
On the other hand, most (if not all) of your div elements are just containers, instead of being direct counterparts to controls. For example, the element <div id="loginUsername"></div> really needs some content, such as
<div id="loginUsername"><label for="uname">User name:</label>
<input id="uname" name="uname" required size="8" maxlength="8"></div>
Assuming that the content fits inside the div element as formatted in your current design, no change in the layout styling is then needed. (However, from the jsfiddle, it seems that you intend to use form controls without any labels. This would be a major usability and accessibility problem, and fixing it probably requires a redesign of the layout.)