I feel silly asking such a trivial question but, oh well, it's been bugging me for a while.
I have a form that's properly styled. When the user submits, if there is errors, the form will render again, but this time, the fields that have errors are but in between a <div class="field_with_errors">
Know the problem is this creates an extra space after the text, notice the extra space after Contrasena. How can I get rid of this space?
<div class="field_with_errors"><input id="user_email" name="user[email]" size="30" type="text" value=""></div>>
Here is a full HTML example, so that you can see exactly what I am talking:
<html><head>
<title>foo</title>
</head>
<body>
<header>
</header>
<section class="container">
<div class="formbox">
<h1>Registrarse</h1>
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="nP/JKdZYGviu1y/+nyxyvKBUHuJzsAbkZRQgX87UIy8="></div>
<!-- = render 'shared/error_messages', :object => f.object -->
<div class="text">
<label for="user_email">Email</label>
<br>
<div class="field_with_errors"><input id="user_email" name="user[email]" size="30" type="text" value=""></div>
</div>
<div class="text">
<div class="field_with_errors"><label for="user_password">Contrasena</label></div>
<br>
<div class="field_with_errors"><input id="user_password" name="user[password]" size="30" type="password" value=""></div>
</div>
<div class="text">
<label for="user_password_confirmation">Confirmacion</label>
<br>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" value="">
</div>
<div class="actions">
<input class="button_green" id="user_submit" name="commit" type="submit" value="Registrarse">
</div>
</form>
</div>
</section>
<footer>
</footer>
</body></html>
Try this: Remove the <br /> tags from the HTML that's being output and style field_with_errors like this:
.field_with_errors {
display: block;
clear: both;
}
You could also try:
div.field_with_errors + br {
display: none
}
This hides br tags that immediately follow divs of class field_with_errors.
If you're using SCSS you can do this:
.field_with_errors {
+ br {
display: none;
}
input, select {
border: 1px solid red;
}
}
For this question
.text br {
display: none;
}
default rails 3 is
.field br {
display: none;
}
Related
I'm very new to html/css so I need a bit of help with organizing my page. I wanted to have the "Join my newsletter" to the left of the page; with the "Want commissions" on the right. I already have Flexbox in use on another page, and am uncertain if it can be used again in a way that won't mess up it's original use (It took forever for me to figure out and don't want to go through that again).
Here is my Snippet,
form {
float: right;
}
<h3> Want to be informed of new content? </h3>
<p> Then join my newsletter and never miss out again! </p>
<form><!-- Start Form -->
<label for="fName">First Name:</label>
<input type="text" id="fName" name="fName">
<label for="email">Email:</label>
<input type="email" name="email" id="email">
<p>I would like more information about:</p>
<ul>
<li><input type="checkbox" name="newart" id="newart" value="newart" class="chkbx">New Art</li>
<li><input type="checkbox" name="announ" id="announ" value="announ" class="chkbx">Announcements</li>
<li><input type="checkbox" name="commi" id="commi" value="commi" class="chkbx">Commissions</li>
</ul>
<input type="submit" id="submit" value="Submit" class="btn">
<input type="reset" id="reset" value="Reset Form" class="btn">
</form>
<h3> Want a commission?</h3>
<p>Contact me # </p> KaijuMyDude#gmail.com
<p> or DM me on social media </p> <img src="Images/instaicon.png" style=" width: 5%;" alt="Instagram logo">
Here is the CSS for the ul and li that I have in use for another page that is interfering with the checkboxes on this page
/*About List Stuff*/
ul {
margin: 0 auto;
width: 1200px;
padding-left: 0;
font-size: 0;
}
li{
font-size: 18px;
list-style-type: none;
width: 150px;
height: 50px;
line-height: 50px;
margin: 15px auto;
box-sizing: border-box;
text-align: center;
}
Wrap the sections you want positioned in divs and use a wrapper to give them inline-block. Then position them left and right. Try this code:
HTML
<div class="wrapper">
<div class="left">
<h3> Want to be informed of new content? </h3>
<p> Then join my newsletter and never miss out again! </p>
<form><!-- Start Form -->
<label for="fName">First Name:</label>
<input type="text" id="fName" name="fName">
<label for="email">Email:</label>
<input type="email" name="email" id="email">
<p>I would like more information about:</p>
<ul>
<li><input type="checkbox" name="newart" id="newart" value="newart" class="chkbx">New Art</li>
<li><input type="checkbox" name="announ" id="announ" value="announ" class="chkbx">Announcements</li>
<li><input type="checkbox" name="commi" id="commi" value="commi" class="chkbx">Commissions</li>
</ul>
<input type="submit" id="submit" value="Submit" class="btn">
<input type="reset" id="reset" value="Reset Form" class="btn">
</form>
</div>
<div class="right">
<h3> Want a commission?</h3>
<p>Contact me # </p> KaijuMyDude#gmail.com
<p> or DM me on social media </p> <img src="Images/instaicon.png" style=" width: 5%;" alt="Instagram logo">
</div>
</div>
CSS
/*Form Stuff*/
form {
float: right;
}
.wrapper{
display: inline-block;
}
.left{
float: left;
}
.right{
float: right;
margin-left: 50px;
}
See example here: https://jsfiddle.net/z9v6cwoa/9/
I know learning flexbox can be hard, but please consider a flexbox solution:
HTML
<h1>Title</h1>
<div class="wrapper">
<div class="wrapper__section">
<h2>Form</h2>
** other content **
</div>
<div class="wrapper__section">
<h2>Want a commission?</h2>
** other content **
</div>
</div>
CSS
.wrapper {
display: flex;
justify-content: space-between;
margin: 0 -10px;
}
.wrapper__section {
padding: 0 10px;
}
If you're worried that a certain section might not work as expected, consider adding one wrapper-<div> with a regular display: block so it does not behave as a flex-child. It looks like you're a bit fed up with flexbox. That would be a pity, keep trying and you'll learn!
use width:100%
put one div in left and another one in right
form {
float: right;
}
<div style="width:100%">
<span style="float:left">
<h3> Want to be informed of new content? </h3>
<p> Then join my newsletter and never miss out again! </p>
<form><!-- Start Form -->
<label for="fName">First Name:</label>
<input type="text" id="fName" name="fName">
<label for="email">Email:</label>
<input type="email" name="email" id="email">
<p>I would like more information about:</p>
<ul>
<li><input type="checkbox" name="newart" id="newart" value="newart" class="chkbx">New Art</li>
<li><input type="checkbox" name="announ" id="announ" value="announ" class="chkbx">Announcements</li>
<li><input type="checkbox" name="commi" id="commi" value="commi" class="chkbx">Commissions</li>
</ul>
<input type="submit" id="submit" value="Submit" class="btn">
<input type="reset" id="reset" value="Reset Form" class="btn">
</form>
</span>
<span style="float:right">
<h3> Want a commission?</h3>
<p>Contact me # </p> KaijuMyDude#gmail.com
<p> or DM me on social media </p> <img src="Images/instaicon.png" style=" width: 5%;" alt="Instagram logo">
</span>
</div>
Below is my code, first of all:
How do I get rid of the big margin to the right that occurs between the labels and the input fields? I tried setting the margin-right to -150px which made it smaller but that just seems like an idiotic solution..
How can I remove the need to write <br /> to make them hop down a line automatically? I was told never to use <br />, it also seems messy.
HTML:
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<label>In-game username:</label>
<input name="username" type="text"></input><br />
<label>Email:</label>
<input name="email" type="text"></input><br />
<label>Game:</label>
<input name="game" type="text"></input><br />
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
CSS:
label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
text-align: right;
}
You can try something like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<p>
<label>In-game username:</label>
<input name="username" type="text"></input>
</p>
<p>
<label>Email:</label>
<input name="email" type="text"></input>
</p>
<p>
<label>Game:</label>
<input name="game" type="text"></input>
</p>
<p></p>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
and then the css
p label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
}
p input{
float:right;
}
p{
clear:both;
}
form{
width:20em;
}
http://jsfiddle.net/V92PT/1/
But the fields part on table
like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<table><tr><td><label>In-game username:</label></td>
<td> <input name="username" type="text"></input></td ></tr>
<tr><td> <label>Email:</label></td>
<td> <input name="email" type="text"></input></td></tr>
<tr><td> <label>Game:</label></td>
<td>
<input name="game" type="text"></input>
</td></tr>
</table>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
or add another <br/> after <label>In-game username:</label>
or use <p></P> for each row
Hy,
This are my HTML Code:
<h2>Advertising over Push Notifications</h2>
<h3>Login</h3>
<label for="infoLabel_CheckUserLoginWeb"></label>
<form id="form_CheckUserLoginWeb" name="form_CheckUserLoginWeb" method="POST" onsubmit="" action="">
E-Mail: <input type="text" size="30" name="email_CheckUserLoginWeb" id="email_CheckUserLoginWeb" ></br>
Passwort: <input type="text" size="30" name="passwort_CheckUserLoginWeb" id="passwort_CheckUserLoginWeb" ></br>
<input type="submit" value="Login" id="submit_CheckUserLoginWeb" name="submit_CheckUserLoginWeb" />
</form>
and i want that the text "Benutzername...." will be shown in the red area, i don't want a new wordwrap.
i want this:
<h3> elements have margins by default. Add CSS to remove it:
h3{
margin: 0;
}
You could insert a id into h3 and add CSS to remove it. Note: if you modify the tag h3 without an id or class, all h3 tags in your code will be modified.
HTML
<h3 id="login">Login</h3>
CSS
h3#login{
margin-bottom: 0;
}
Demo
HTML
<h2>Advertising over Push Notifications</h2>
<h3 class="login">Login</h3>
<span>Benutzername....</span>
<label for="infoLabel_CheckUserLoginWeb"></label>
<form id="form_CheckUserLoginWeb" name="form_CheckUserLoginWeb" method="POST" onsubmit="" action="">E-Mail:
<input type="text" size="30" name="email_CheckUserLoginWeb" id="email_CheckUserLoginWeb">
</br>Passwort:
<input type="text" size="30" name="passwort_CheckUserLoginWeb" id="passwort_CheckUserLoginWeb">
</br>
<input type="submit" value="Login" id="submit_CheckUserLoginWeb" name="submit_CheckUserLoginWeb" />
</form>
css
.login {
margin: 0;
}
Add additional div in html like this: DEMO
HTML
<div class="error">
<label for="infoLabel_CheckUserLoginWeb"></label>
</div>
then define a rule in css:
CSS
.error { float:left; height:20px; width: 100%;}
.login {margin:0;}
How can I align a set of textboxes like it's shown on the following image:
I tried text align for the center,but can't get the side ones at the same time.
Thanks in advance.
Here's what I tried:
<div class = "txtBoxMid">
Lorern Ipsum </br>
<input type="text" name="name">
</br>
</br>
Lorern Ipsum</br>
<input type="text" name="name" >
</br>
</br>
Lorern Ipsum</br>
<input type="text" name="name">
</div>
<div class = "txtBoxLeft">
Lorern Ipsum </br>
<input type="text" name="name">
</br>
</br>
Lorern Ipsum</br>
<input type="text" name="name" >
</br>
</br>
Lorern Ipsum</br>
<input type="text" name="name">
</div>
CSS:
.txtBoxMid
{
text-align:center;
}
.txtBoxLeft
{
text-align:left;
}
Tried a bunch of things. Nothing worked :(
I'd suggest using label elements to wrap the inputs, thereby containing the input element and its relevant text, and allowing a click on the text to focus the input:
<form action="#" method="post">
<label>Label text
<input />
</label>
<!-- other repeated elements removed for brevity -->
</form>
With the CSS:
/* entirely aesthetic, adjust to taste */
form {
width: 80%;
margin: 0 auto;
}
label {
display: inline-block; /* allows 'width' to be assigned and applied */
width: 30%; /* to allow three elements per row */
text-align: center;
margin: 0 1% 1em 1%; /* spacing, aesthetics, adjust to taste */
}
input {
width: 80%; /* aesthetics, adjust to taste */
margin: 0.5em auto;
display: block; /* forces the input element to its own line */
}
JS Fiddle demo.
use float or inline-block to accomplish that.
You can easily accomplish this by putting each form and label in a parent box and style that box with:
.aBox {
width: 33%;
float: left;
}
To center the content, just style the label box and the form box. E.G:
.label, .formParent {
text-align: center;
}
That will give you three columns. You then just keep adding boxes. For example:
<div class="aBox" id="num1">
<div class="label">Hello.</div>
<form class="formParent">
<input type="text" class="field">
</form>
</div>
<div class="aBox" id="num2">
<div class="label">Hello 2.</div>
<form class="formParent">
<input type="text" class="field">
</form>
</div>
<div class="aBox" id="num3">
<div class="label">Hello 3.</div>
<form class="formParent">
<input type="text" class="field">
</form>
</div>
<div class="aBox" id="num4">
<div class="label">Hello 4.</div>
<form class="formParent">
<input type="text" class="field">
</form>
</div>
<div class="aBox" id="num5">
<div class="label">Hello 5.</div>
<form class="formParent">
<input type="text" class="field">
</form>
</div>
<div class="aBox" id="num6">
<div class="label">Hello 6.</div>
<form class="formParent">
<input type="text" class="field">
</form>
</div>
<div class="aBox" id="num7">
<div class="label">Hello 7.</div>
<form class="formParent">
<input type="text" class="field">
</form>
</div>
<div class="aBox" id="num8">
<div class="label">Hello 8.</div>
<form class="formParent">
<input type="text" class="field">
</form>
</div>
<div class="aBox" id="num9">
<div class="label">Hello 9.</div>
<form class="formParent">
<input type="text" class="field">
</form>
</div>
Fiddle: http://jsfiddle.net/U69sh/
I have added a 2 column layout to my contact form.
the only thing is it does not display in 2 columns but single columns.
my html is:
<div id="container">
<div id="column1">
<h1>You can talk to me. I don't bite...</h1></div><br><br>
<h5>You can contact me by the form opposite or by one of the following:</h5><br><br>
<img src="/icons/mail.png" name="mail">kevin#kh.co.uk
</div>
<div id="column2">
<form action="mail.php" method="POST">
<p>Name*</p> <input type="text" name="name">
<p>Your Company Name</p> <input type="text" name="name">
<p>Email*</p> <input type="text" name="email">
<p>Telephone*</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<small>Fields marked with a * symbol are required. </small>
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>
</div>
</div>
and my css is:
#container {
float: left;
width: 98%;
position:relative;
}
#column1, #column2 {
width: 50%;
float: left;
position:relative;
}
please can someone tell me where I am going wrong?
thank you.
Kev
I found my problem.
my closing div tag for <div id="column1"> was not at the end of my column 1 content.
thanks for all your help.
Your HTML is invalid. You have too many closing tags. Remove the one after the closing tag and it will be fine:
See Fiddle
You have a closing div tag on the same line as the H1, It shouldnt be there so remove it.
Check this fiddle http://jsfiddle.net/WT6zC/
<div id="container">
<div id="column1">
<h1>You can talk to me. I don't bite...</h1><br><br>
<h5>You can contact me by the form opposite or by one of the following:</h5><br><br>
<img src="/icons/mail.png" name="mail">kevin#kh.co.uk
</div>
<div id="column2">
<form action="mail.php" method="POST">
<p>Name*</p> <input type="text" name="name">
<p>Your Company Name</p> <input type="text" name="name">
<p>Email*</p> <input type="text" name="email">
<p>Telephone*</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<small>Fields marked with a * symbol are required. </small>
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>
</div>
</div>
You have not written code properly.
extra
</div>
here is the fiddle