I'm just trying to have a label and text box fill the width of a form. I can't believe how much time I've wasted on this simple problem. This would have been SO simple with tables.
Here's the simple HTML:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
* { box-sizing: border-box; }
</style>
</head>
<body>
<form style="width: 500px; border-style:solid; border-color: red;">
<label for="Txt">Label:</label>
<input id="Txt" type="text" style="width: auto;" />
</form>
</body>
</html>
And here's how it looks:
All I want is for my text box to fill the rest of the form (the empty area to the right of the text box. I've tried 100%, display:table etc. I want to solve it with HTML and CSS only (no JavaScript or jQuery), and without having to play around with pixel counts or percentages until it looks right.
Thanks in advance.
Here is my solution
Use width: calc(100% - 82px); for the input width
The 82px is equal to width of the label and (1px border * 2) of the input
* {
box-sizing: border-box;
}
label {
width: 80px;
display: inline-block;
}
input {
display: inline-block;
width: calc(100% - 82px);
border: 1px solid #ccc;
font-size: 16px;
}
<form class="back">
<label>Test Label</label><input type="text" name="search" class="">
</form>
You could use the grid layout by defining the grid template.
Here is the link to Mozilla Docs for CSS Grid.
* { box-sizing: border-box; }
.form {
width: 500px;
border-style:solid;
border-color: red;
display: grid;
grid-template-columns: min-content auto;
}
<form class="form">
<label for="Txt">Label:</label>
<input id="Txt" type="text" />
</form>
You should be use this simple way.
Please try: width: calc(100% - 45px) !important; into input#Txt class.
Hope this help.
Let me know further clarification.
input#Txt {
width: calc(100% - 45px) !important;
}
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
* { box-sizing: border-box; }
</style>
</head>
<body>
<form style="width: 500px; border-style:solid; border-color: red;">
<label for="Txt">Label:</label>
<input id="Txt" type="text" style="width: auto;" />
</form>
</body>
</html>
Flexbox approach:
form {
display: flex;
}
input {
flex: 1;
}
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<form style="width: 500px; border-style:solid; border-color: red;">
<label for="Txt">Label:</label>
<input id="Txt" type="text" style="width: auto;" />
</form>
</body>
</html>
Using browser-safe CSS rules, you can set width for label and input, then set them to display: inline-block, this way.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
label {
display: inline-block;
width: 10%;
}
input {
display: inline-block;
width: 88%;
}
</style>
</head>
<body>
<form style="width: 500px; border-style:solid; border-color: red;">
<label for="Txt">Label:</label>
<input id="Txt" type="text" />
</form>
</body>
</html>
Related
I'm trying to make a simple form that asks for login details, but I want it to also be mobile friendly. It works great with desktops, but on mobiles it shifts a little bit to the right. I want the text to be exactly in the middle, like on pc.
Pic of the site on mobile:
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Teretulemast</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="display:block; padding: 0; width: 80%; margin-left: 40%; overflow:hidden; position: relative;">
<form>
<h1 style="">Sisse logimine</h1><br />
<p style="">Kasutajanimi: </p><input style="height: 25px;"type="text" name="username"/>
<p style="">Parool: </p><input style="height: 25px;" type="password" name="password"/><br />
<input style="" type="submit" value="Logi sisse" name="Sisesta"/>
<input type="submit" value="Tagasi" name="back"/>
</form>
</body>
</html>
Learn more about flex box: https://www.w3schools.com/css/css3_flexbox.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Teretulemast</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="display:flex; padding: 0; width: 100%; overflow:hidden; align-items: center; justify-content: center">
<form>
<h1 style="">Sisse logimine</h1><br />
<p style="">Kasutajanimi: </p><input style="height: 25px;"type="text" name="username"/>
<p style="">Parool: </p><input style="height: 25px;" type="password" name="password"/><br />
<input style="" type="submit" value="Logi sisse" name="Sisesta"/>
<input type="submit" value="Tagasi" name="back"/>
</form>
</body>
</html>
Try these css styles on the form
form{
margin-left:auto;
margin-right: auto;
width: 200px;
padding:30px;
border:1px solid grey;
left:0;
right:0;
}
One method is to set the <form> to display:inline-block and set text-align:center on its container. That ensures that the form's content dictates it's width and that it's always horizontally centered on the page.
body {
text-align: center;
}
form {
display: inline-block;
text-align: left;
background-color: #EEE;
padding: 1em;
}
h1 {
margin: 0 0 .2em;
}
label {
display: block;
margin: 0 0 1em;
}
input[type="text"],
input[type="password"] {
height: 25px;
}
<form>
<h1>Sisse logimine</h1><br />
<label>Kasutajanimi:<br><input type="text" name="username"></label>
<label>Parool:<br><input type="password" name="password"></label>
<input type="submit" value="Logi sisse" name="Sisesta">
<input type="submit" value="Tagasi" name="back">
</form>
I set the border width of these input boxes to 1px. However, for some reason on ios, the top border looks bigger than it should be ( regardless of browser ).
On any other kind of device, the border looks fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1">
<title>ios rendering test</title>
</head>
<body>
<style media="screen">
input {
border: 1px solid #ccc;
height: 100px;
margin: 5%;
}
</style>
<form class="" action="index.html" method="post">
<input type="text" name="" value="firstname">
<input type="text" name="" value="lastname">
<input type="text" name="" value="email">
<input type="submit" name="submit" value="subscribe">
</form>
</body>
</html>
Since it's an iOS input being targeted, you'll need to remove the default styles using -webkit-appearance: none;
Your Code
input {
-webkit-appearance: none; /* Add this */
border: 1px solid #ccc;
height: 100px;
margin: 5%;
}
Here is an article with more information about the appearance tags.
I've done everything to try work this out but here's my problem:
It happened after wrapping my table in a form, Anyways, if possible I need this centred unless my centring is correct. Please tell me what I did wrong and what I should do next time!
HTML:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="UTF-8">
<title>Game</title>
</head>
<body bgcolor="#336699">
<div id="login">
<form id="login" action="login.php" method="post">
<table>
<tr><td>Login</td></tr>
<tr><td>Username: <input type="text"></td></tr>
<tr><td>Password: <input type="password"></td></tr>
<tr><td><input type="submit"></td></tr>
</table>
</form>
</div>
</body>
</html>
CSS:
#header{
text-align: center;
}
#login{
font-family: "Arial", "serif";
margin-right: auto;
margin-left: auto;
width: 15%;
text-align: center;
border: solid 1px;
}
#table,th,td{
border: solid 1px;
}
Its because of the login ID, you have given it 15% width. Increase it to 50 or 60% and it will work.
#login{
font-family: "Arial", "serif";
margin-right: auto;
margin-left: auto;
width: 15%;
text-align: center;
border: solid 1px;
}
Working example:
http://jsfiddle.net/vcz72sxy/1/
EDIT
I have changed some code from the previous poster, added the align value within the table to center it.
http://jsfiddle.net/kc3gh83h/1/
There are two issues:
You've called id="login" twice, you can only call it once. So the rule for #login is being applied twice. If that was intentional, you want to change it to a class (.login)
The second, which takes care of the issue directly (as #Dan and #JSG have said) - change your width.
Here you go. Use this and you'll be set! Demo: http://jsfiddle.net/hfnqbboj/2
HTML
<body bgcolor="#336699">
<div id="login">
<form id="login" action="login.php" method="post">
<table align="center">
<tr><td>Login</td></tr>
<tr><td>Username: <input type="text"></td></tr>
<tr><td>Password: <input type="password"></td></tr>
<tr><td><input type="submit"></td></tr>
</table>
</form>
</div>
</body>
CSS
#header{
text-align: center;
}
#login{
font-family: "Arial", "serif";
margin-right: auto;
margin-left: auto;
text-align: center;
border: solid 1px;
}
#table,th,td{
border: solid 1px;
}
I have the following HTML and CSS files, where the class "table" div is affected by the css for its brother div of class "login", as the dashed border encloses both divs.
What could be the problem and the solution? Many thanks!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link rel="stylesheet" type="text/css" href="welcome.css">
<title>Vokabeltrainer</title>
</head>
<body>
<div class="left"></div>
<h1>VokabelTester</h1>
<div class="form">
<form action="http://localhost:8080/vokabulary/Welcome" method="get">
<div class="table">
<table>
<tr><th>Sprachen</th></tr>
<tr><td>Englisch<input type="checkbox" value="englisch" name="language" checked="checked"/></td></tr>
<tr><td>Französisch<input type="checkbox" value="franzoesisch" name="language" checked="checked"/></td></tr>
<tr><td>Italienisch<input type="checkbox" value="italienisch" name="language" checked="checked"/></td></tr>
<tr><td>Spanisch<input type="checkbox" value="spanisch" name="language" checked="checked"/></td></tr>
<tr><td>Portugiesisch<input type="checkbox" value="portugiesisch" name="language" checked="checked"/></td></tr>
</table>
</div>
<div class="login">
<h2>Anmeldung</h2>
Name:<input type="text" name="name"/><br/>
Passwort:<input type="password" name="password"/><br/>
Login<input type="radio" name="login" value="login" checked="checked"/><br/>
Registration<input type="radio" name="login" value="registration"/><br/>
<input type="submit" value="LOS GEHT'S"/>
</div>
</form>
</div>
</body>
</html>
CSS:
body{background-color: #6cc034; margin: 0; font-family: Calibri}
h1{margin: 0px;}
.left{display: block; margin: 0;height: 100%; width: 30%; float: left; background-color: green;}
.form{float: left; background-color: orange; width: 50%; border-style: dotted;}
.table{float:left; width:200px; display: block;}
th{font-size: 16pt; width: 150px; text-align: left; height: 60px;}
h2{font-size: 16pt; display: block; background-color: red;}
td{text-align: right; font-size: 14pt;}
.login{font-size: 14pt; display: block; background-color: blue; height: 200px; border-style: dashed;}
Remove the float:left from your .table declaration like so: http://jsbin.com/wanuyewewome/1/edit
I added float: left for the login div which fixed the problem.
i need to allign element under RED arrow right under the element where BLACK arrow is pointed at. In other words how do i allign element close enough to input like 2-5px.
http://i.stack.imgur.com/Q4IeX.png
code is here
CSS
form.loginform
{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 16px;
border-radius: 10px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
div.divbg
{
width: 200px;
height: 167px;
position: fixed;
text-align: center;
vertical-align: middle;
margin-top: 30%;
margin-left: 40%;
background-color: aliceblue;
}
a.register
{
font-family: Geneva,Arial,Helvetica,sans-serif;
font-size: 11px;
}
#pass
{
float: inherit;
margin: 0;
}
HTML
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel=StyleSheet href="loginstyle.css" type="text/css" media="screen"/>
</head>
<body>
<div class="divbg">
<form method="post" class="loginform">
Логин <div class="center"><input type="text" name="login"/></div><br/>
<div id="pass">Пароль <div class="center"><input type="text" name="password"/></div><br/>
хочу зарегистрироваться!<br/></div>
<input type="submit" name="submit" value="Войти"/><br/>
</form>
</div>
</body>
</html>
1 Get a modern browser
2 Install firebug or use developers tools
3 check if the last input box (black arrow) has some margin-bottom or padding-bottom.
4 If yes, set it to 0 or a negative value
5 if No, check if the element with the red arrow has margin-top, and remove it or set a negative margin-top value.
Without code, It's not so easy to help you
You have a <br /> tag after the #center div. That is what is pushing it down. You also have some padding around the input tag; both of those issues are what is causing that space.
Your code:
<div class="center"><input type="text" name="password"/></div><br/>
Remove that <br />