I'm currently working on a calculator in HTML and have made a form to input various numbers. The form is located in a div that's a sidebar, and I've made a div for each row holding an input and label. However, the input elements are left with a lot of space above them, as well as the borders as they're attached to the input elements. How could I allow the inputs to take up all available vertical space? Picture of extra space
.sidebar {
background-color: #272640;
float: left;
width: 20%;
height: 100%;
position: fixed;
box-sizing: border-box;
display: flex;
flex-direction: column;
border: 1px solid #3E1F47;
}
#sidebarCentered {
}
.siderow {
background-color: #312244;
border-top: 1px solid #3E1F47;
color: white;
padding: 10px;
box-sizing: border-box;
width: 50% text-align:center;
font-family: monaco;
}
.siderow label {}
.siderow input {
box-sizing: border-box;
background-color: #312244;
border: 0px;
height: 100%;
border-left: 1px solid #5A5766;
color: white;
width: 50%;
float: right;
text-align: center;
}
.sidebarbuttons {
background-color: #312244;
margin-top: 10%;
}
.sidebarbuttons input {
background-color: #312244;
font-family: monaco;
font-size: 15px;
margin: 5px;
width: 45%;
color: white;
padding: 10px;
border: 1px solid #3E1F47;
border-radius: 10px;
transition: all ease-in-out 0.15s;
}
.sidebarbuttons input:hover {
background-color: #272640;
color: #272640;
transition: all ease-in-out 0.15s;
}
#centermenu {
background-color: #212F45;
color: #EDFFEC;
overflow: hidden;
text-decoration: none;
border-bottom: 1px solid #5A5766;
box-sizing: border-box;
}
<div class="sidebar">
<form id="sidebarCentered">
<div class="siderow">
<label for="balance">Balance:</label>
<input type="number" name="balance" value=500>
</div>
<div class="siderow">
<label for="monthly">Monthly <br> contribution:</label>
<input type="number" name="monthly" value=0>
</div>
<div class="siderow">
<label for="nummonths">Number of <br> Months:</label>
<input type="number" name="nummonths" value=12>
</div>
<div class="siderow" style="border-bottom:1px solid #3E1F47;">
<label for="ror">Monthly Rate <br> of Return:</label>
<input type="number" name="ror" value=1>
</div>
<div class="sidebarbuttons">
<input type="button" value="Calculate" style="float:left;">
<input type="button" value="Quit" style="float:right;">
</div>
</form>
</div>
That space is caused by padding of 10px in .siderow. I changed the padding to 0 10px which sets top and bottom padding to zero and left/right to 10px. I also added min-width: 200px; to .sidebar for clarity. You may want to change that. Extra vertical space has been removed.
.sidebar {
background-color: #272640;
float: left;
width: 20%;
min-width: 200px;
height: 100%;
position: fixed;
box-sizing: border-box;
display: flex;
flex-direction: column;
border: 1px solid #3E1F47;
}
#sidebarCentered {
}
.siderow {
background-color: #312244;
border-top: 1px solid #3E1F47;
color: white;
padding: 0 10px; /* changed here */
box-sizing: border-box;
width: 50% text-align:center;
font-family: monaco;
}
.siderow label {}
.siderow input {
box-sizing: border-box;
background-color: #312244;
border: 0px;
height: 100%;
border-left: 1px solid #5A5766;
color: white;
width: 50%;
float: right;
text-align: center;
}
.sidebarbuttons {
background-color: #312244;
margin-top: 10%;
}
.sidebarbuttons input {
background-color: #312244;
font-family: monaco;
font-size: 15px;
margin: 5px;
width: 45%;
color: white;
padding: 10px;
border: 1px solid #3E1F47;
border-radius: 10px;
transition: all ease-in-out 0.15s;
}
.sidebarbuttons input:hover {
background-color: #272640;
color: #272640;
transition: all ease-in-out 0.15s;
}
#centermenu {
background-color: #212F45;
color: #EDFFEC;
overflow: hidden;
text-decoration: none;
border-bottom: 1px solid #5A5766;
box-sizing: border-box;
}
<div class="sidebar">
<form id="sidebarCentered">
<div class="siderow">
<label for="balance">Balance:</label>
<input type="number" name="balance" value=500>
</div>
<div class="siderow">
<label for="monthly">Monthly <br> contribution:</label>
<input type="number" name="monthly" value=0>
</div>
<div class="siderow">
<label for="nummonths">Number of <br> Months:</label>
<input type="number" name="nummonths" value=12>
</div>
<div class="siderow" style="border-bottom:1px solid #3E1F47;">
<label for="ror">Monthly Rate <br> of Return:</label>
<input type="number" name="ror" value=1>
</div>
<div class="sidebarbuttons">
<input type="button" value="Calculate" style="float:left;">
<input type="button" value="Quit" style="float:right;">
</div>
</form>
</div>
Give .siderow padding of 0 and add a height to .siderow input and .siderow label.
Next, delete those br tags and add flex to .siderow label so it can be vertically aligned in the middle. Also, don't use inline css.
In all, you will have this:
<div class="sidebar">
<form id="sidebarCentered">
<div class="siderow">
<label for="balance">Balance:</label>
<input type="number" name="balance" value=500>
</div>
<div class="siderow">
<label for="monthly">Monthly contribution:</label>
<input type="number" name="monthly" value=0>
</div>
<div class="siderow">
<label for="nummonths">Number of Months:</label>
<input type="number" name="nummonths" value=12>
</div>
<div class="siderow">
<label for="ror">Monthly Rate of Return:</label>
<input type="number" name="ror" value=1>
</div>
<div class="sidebarbuttons">
<input type="button" value="Calculate" style="float:left;">
<input type="button" value="Quit" style="float:right;">
</div>
</form>
</div>
and the CSS
.sidebar {
background-color: #272640;
float: left;
width: 400px;
height: 100%;
position: fixed;
box-sizing: border-box;
display: flex;
flex-direction: column;
border: 1px solid #5A5766;
}
#sidebarCentered {
}
.siderow {
border-top: 1px solid #5A5766;
color: white;
padding: 0;
box-sizing: border-box;
width: 100%;
text-align:center;
font-family: monaco;
height: auto;
float: left;
}
.siderow:first-child {
border-top: none;
}
.siderow:nth-child(4) {
border-bottom: 1px solid #5A5766;
}
.siderow label {
width: calc(50% - 5px);
float: left;
height: 40px;
display: flex;
align-items: center;
margin-left: 5px;
}
.siderow input {
box-sizing: border-box;
background-color: #272640;
border: 0;
height: 100%;
border-left: 1px solid #5A5766;
color: white;
width: 50%;
float: left;
text-align: center;
height: 40px;
}
.sidebarbuttons {
margin-top: 10%;
}
.sidebarbuttons input {
background-color: #888;
font-family: monaco;
font-size: 15px;
margin: 5px;
width: 45%;
color: white;
padding: 10px;
border: 1px solid #5A5766;
border-radius: 10px;
transition: all ease-in-out 0.15s;
}
.sidebarbuttons input:hover {
background-color: #ccc;
color: #272640;
transition: all ease-in-out 0.15s;
}
#centermenu {
background-color: #212F45;
color: #EDFFEC;
overflow: hidden;
text-decoration: none;
border-bottom: 1px solid #5A5766;
box-sizing: border-box;
}
Link to Fiddle for reference https://jsfiddle.net/kavyw86d/
Related
I want to place a button inside my input exactly like this:
So far I have the input but I'm unable to find a solution to place the button properly.
.realoutercontainer {
padding: 10% 0;
position:relative;
}
.outercontainer {
direction: rtl;
text-align: center;
position: relative;
z-index: 1;
max-width: 1040px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
border-bottom: 2px solid rgba(207,215,223,.25);
position: relative;
background-color: #fff;
border-radius: 30px;
padding: 30px 40px 10px 40px;
-webkit-box-shadow: 0 30px 60px -12px rgba(50,50,93,.25),0 18px 36px -18px rgba(0,0,0,.3);
box-shadow: 0 30px 60px -12px rgba(50,50,93,.25),0 18px 36px -18px rgba(0,0,0,.3);
box-sizing: border-box;
color: #6c6770;
font-family: "Vazir";
}
.realoutercontainer.settings{
padding: 2% 0;
}
.settings .outercontainer {
max-width: 100%;
width: 94%;
height: 600px;
padding: 100px;
padding-top: 50px;
}
.settings-input {
margin: 50px 0;
display: flex;
justify-content: center;
}
.settings-input input {
display: inline-block;
direction: ltr;
text-align: center;
outline: none;
width: 300px;
background: #ededed;
color: #743db0;
padding: 5px 5px;
border-radius: 3px;
border: solid 1px;
border-color: transparent;
transition: all 0.3s ease-in;
}
.settings-input input:focus {
color: #8e5bc5;
background: #fff;
border-color: #e7572c;
}
.settings-input .input-field {
display: flex;
flex-direction: column ;
}
.settings-input .uname{
align-self: flex-start;
margin-bottom: 3px;
}
<div class="realoutercontainer settings">
<div class="outercontainer">
<div class="settings-input">
<div class="input-field">
<div for="fname" class="uname">نام کاربری :</div>
<div><input type="text" id="fname" name="fname" placeholder="user_1252442"/></div>
<button type="submit">ویرایش</button>
</div>
</div>
</div>
</div>
div,
form,
input {
position: relative;
}
.container {
width: 400px;
display: flex;
padding: 0.5rem;
align-items: center;
background-color: coral;
}
input {
width: 100%;
padding: 1rem;
border: 1px solid black;
}
button {
position: absolute;
right: 1rem;
}
<form>
<label> نام کاربری : </label>
<br />
<div class="container">
<input type="text" placeholder="Some Text..." />
<button type="submit"> Submit </button>
</div>
</form>
You can change the styles or whatever you want accordingly. I showed how its done.
Here goes, follow the code, I hope it helps you.
It is not styled, it is in raw form.
input {
position: absolute;
height: 2.3em;
}
.group-wrapper {
width: 50em;
display: flex;
align-items: center;
}
.content {
padding-left: 7em;
background: #EDEDED;
border: none;
border-radius: 0.2em;
}
.uname {
margin:0 9em 0.5em;
display: inline-block;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
button {
position: relative;
justify-content: start;
color: #E1E5ED;
background: #ED1C24;
padding: 0.4em;
margin-left: 0.5em;
border: none;
}
<form>
<label for="user" class="uname">نام کاربری :</label>
<div class="group-wrapper">
<input id="user" class="content" type="text" placeholder="user_1252442" />
<button type="submit">ویرایش</button>
</div>
</form>
Shamelessly borrowing from #Kunal, this version puts the button on the left as desired:
div,
form,
input {
position: relative;
}
.container {
width: 400px;
display: flex;
padding: 0.5rem;
align-items: center;
}
input {
width: 100%;
padding: 1rem;
padding-left: 100px;
border: 1px solid black;
}
button {
position: absolute;
left: 1rem;
}
<form>
<label> نام کاربری : </label>
<br />
<div class="container">
<input type="text" placeholder="Some Text..." />
<button> My button </button>
</div>
</form>
I want to grow the element background and font on hover. However it does impact all other elements position like the border of the form, elements side.
I tried to do it with the box-shadow but only the shadow is enlarged and not the text.
please Help
LINk: Code for HTML and CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
.contenedor {
display: inline-block;
width: 400px;
height: 400px;
}
form {
padding: 30px;
border: 1px solid #ccc;
}
input[type="submit"] {
width: 80px;
background: #24b080;
padding: 10px;
border: 1px solid #24b080;
cursor: pointer;
color: white;
margin-top: 10px;
margin-bottom: 10px;
transition: all 0.3s ease-out;
}
input[type="submit"]:hover {
background-color: #24b080;
border: 2px solid #24b080;
color: #fff;
transform: scale(1.2, 1.2);
}
<form name="formulario" action="">
<input type="submit" value="Send">
<input type="submit" value="OK">
<input type="submit" value="Cancel">
</form>
You can change this
form {
padding: 30px;
border: 1px solid #ccc;
}
to this:
form {
padding: 30px;
border: 1px solid #ccc;
height: 120px;
}
If you give the Form a fixed height then it cannot move when the buttons get bigger.
You can apply vertical-align: top; to input[type="submit"] to avoid the slight vertical movement on hover (I guess that's what you meant?):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
.contenedor {
display: inline-block;
width: 400px;
height: 400px;
}
form {
padding: 30px;
border: 1px solid #ccc;
}
input[type="submit"] {
width: 80px;
background: #24b080;
padding: 10px;
border: 1px solid #24b080;
cursor: pointer;
color: white;
margin-top: 10px;
margin-bottom: 10px;
transition: all 0.3s ease-out;
vertical-align: top;
}
input[type="submit"]:hover {
background-color: #24b080;
border: 2px solid #24b080;
color: #fff;
transform: scale(1.2, 1.2);
}
<form name="formulario" action="">
<input type="submit" value="Send">
<input type="submit" value="OK">
<input type="submit" value="Cancel">
</form>
I've checked out some other answers for this but didn't work for me. Really puzzled by this one.
As you can see the right side overlaps the border. my .css for the box:
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
I tried using max-width: 100%; but it doesn't seem to chance it.
Code for the form:
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Login To Your Account</h2>
<form action="/action_page.php">
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked"> Remember me
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</div>
I would maybe add a width to the container.
.container {
width: 100%;
padding: 16px;
}
this might fix it.
And then if that fails, you could also add a smaller width to the input textboxes:
input[type=text], input[type=password] {
width: 75%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
I do not recommend using !imporatant but you could also try adding it to the width:
input[type=text], input[type=password] {
width: 75%!important;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
I just also noticed your login button is to overlapping. So you need to also add the above width: 75%; to the imput submit too. I do not see if you have a submit imput class you haven't posted it
I am trying to have some pre-input on my forms and I want the input field to expand to the end of the container div. The problem is the input field seems to expand past the container div due to the length of the pre-input text.
.container {
width: 70%;
}
.input-field {
display: inline-block;
white-space: nowrap;
vertical-align: bottom;
background: #fff;
position: relative;
vertical-align: middle;
width: 100%;
min-width: 16px;
border: 1px solid #ddd;
}
.input-field .addon {
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding-left: 5px;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
width: 100%;
}
.input-field:hover {
border: 1px solid #05c9f0;
}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
Another example here: http://codepen.io/anon/pen/wgdErO
If you try the example code, you will note you can click the input box way outside where I want it to end.
Any thoughts on a fix?
Try using the flexbox layout.
.container {
width: 300px;
}
.input-field {
background: #fff;
border: 1px solid #ddd;
display: flex;
align-items: center;
}
.input-field .addon {
padding: 2px 8px;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding: 0 4px;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
flex: 1;
}
.input-field:hover {
border: 1px solid #05c9f0;
}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
<img src="//dummyimage.com/300x50">
Just decrease the input width from 100% to a lower value like 99.7% and that will do the trick:
.container {
width: 70%;
border: 1px solid red;
}
.input-field {
display: inline-block;
white-space: nowrap;
vertical-align: bottom;
background: #fff;
position: relative;
vertical-align: middle;
width: 99.7%;
min-width: 16px;
border: 1px solid #ddd;
}
.input-field .addon {
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding-left: 5px;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
width: 100%;
}
.input-field:hover {border: 1px solid #05c9f0;}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
You can calculate the width like this! width: calc(100% - 125px); rather than set it to 100%
At first my input focus was working just fine, now all of a sudden when I add a couple of more styles to my input, it suddenly stops working. I've only added the 'input[type="text"] and border-radius and padding and some margins since when it was working. When you click each form element, nothing happens even though I have a rule for focus(which you can find near the bottom of the code). Is there any workaround for this?
form{
position: absolute;
left: 50%;
color: white;
margin-left: -180px;
padding: 15px 30px 15px 30px;
background-color: #26004d;
border-radius: 7px;
margin-top: 10px;
width: 300px;
}
label{
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
input:focus {
border: 2px solid #862d59;
}
input[type="submit"]{
width: 50%;
background-color: #862d59;
color: white;
margin-top: 5px;
padding: 12px 12px;
border: none;
cursor: pointer;
}
input[type="text"]{
width: 100%;
padding: 12px 12px;
margin: 4px 0;
border: 1px solid #ccc;
border-radius: 6px;
//box-sizing: border-box;
}
<div id="formholder1">
<form>
<div class="single-field">
<label for="Username">Username:</label>
<input name="Name" type="text"></input>
</div>
<div class="single-field">
<label for="Password">Password:</label>
<input name="Password" type="text"></input>
</div>
<input type="submit" value="Login">
</form>
</div>
Use this input[type="text"]:focus {
border: 2px solid #862d59;
}
learn it - http://www.w3schools.com/cssref/trysel.asp?selector=:focus
example - https://css-tricks.com/snippets/css/glowing-blue-input-highlights/
now its working
form{
position: absolute;
left: 50%;
color: white;
margin-left: -180px;
padding: 15px 30px 15px 30px;
background-color: #26004d;
border-radius: 7px;
margin-top: 10px;
width: 300px;
}
label{
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
input[type="text"]:focus {
border: 2px solid #862d59;
}
input:focus {
border: 2px solid red;
}
input[type="submit"]{
width: 50%;
background-color: #862d59;
color: white;
margin-top: 5px;
padding: 12px 12px;
border: none;
margin-left:-10px;
cursor: pointer;
}
input[type="text"]{
width: 100%;
padding: 12px 12px;
margin: 4px 0;
border: 1px solid #ccc;
border-radius: 6px;
margin-left:-15px;
//box-sizing: border-box;
}
<div id="formholder1">
<form>
<div class="single-field">
<label for="Username">Username:</label>
<input name="Name" type="text"></input>
</div>
<div class="single-field">
<label for="Password">Password:</label>
<input name="Password" type="text"></input>
</div>
<input type="submit" value="Login">
</form>
</div>
Put Your :focus property after input.
input[type="text"]:focus {
border: 5px solid #862d59;
}
form{
position: absolute;
left: 50%;
color: white;
margin-left: -180px;
padding: 15px 30px 15px 30px;
background-color: #26004d;
border-radius: 7px;
margin-top: 10px;
width: 300px;
}
label{
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
input[type="submit"]{
width: 50%;
background-color: #862d59;
color: white;
margin-top: 5px;
padding: 12px 12px;
border: none;
cursor: pointer;
}
input[type="text"]{
width: 100%;
padding: 12px 12px;
margin: 4px 0;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
}
input[type="text"]:focus {
border: 5px solid #862d59;
}
<div id="formholder1">
<form>
<div class="single-field">
<label for="Username">Username:</label>
<input name="Name" type="text"></input>
</div>
<div class="single-field">
<label for="Password">Password:</label>
<input name="Password" type="text"></input>
</div>
<input type="submit" value="Login">
</form>
</div>