I tried to make a multi-line paper-input in ajax-form element
#info {
width: 90%;
height: 300px;
background-color: white;
padding: 10px;
margin: 20px auto;
}
paper-input {
width: 100%;
height: 150px;
}
<div id="info">
<form is="ajax-form" action="../../../back/saveIMG.php" class="picturePost" method="post" enctype="multipart/form-data">
<file-input camera name="pic" id="pic">
<core-icon-button
icon="image:camera-alt">
</core-icon-button>
</file-input>
<br/>
<paper-input multiline id="last" floatingLabel label="Commentaire" ></paper-input>
<!-- -->
<br/>
<input type="submit" name="submitInfo">
</form>
</div>
So I added some attribute like maxRows="5" and rows="3" but no way my paper-input are always a single line area.
Instead of using a paper-input you should consider using paper-input-decorator with paper-autogrow-textarea
<div id="info">
<form is="ajax-form" action="../../../back/saveIMG.php" class="picturePost" method="post" enctype="multipart/form-data">
<file-input camera name="pic" id="pic">
<core-icon-button icon="image:camera-alt"></core-icon-button>
</file-input>
<br/>
<paper-input-decorator id="last" label="Commentaire">
<paper-autogrow-textarea rows="3" maxRows="5">
<textarea></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<!-- -->
<br/>
<input type="submit" name="submitInfo">
</form>
</div>
Instead of paper-input try to use iron-autogrow-textarea:
<iron-autogrow-textarea id="last" rows="3" maxRows="5" bind-value="{{xyz}}">
</iron-autogrow-textarea>
Documentation: https://elements.polymer-project.org/elements/iron-autogrow-textarea
Related
i want to make table content look like as shown in pic:-
but i get content alignment issue as shown in my code.
<form class="abc" id="abc" action="/" accept-charset="UTF-8" method="post">
<div>
<div class="wrapper-class">
<span>
<input type="radio" value="true" name="abc[status]" id="abc_status_true">
<label for="abc_approve">Approve</label>
</span>
<span>
<input type="radio" value="false" name="abc[status]" id="abc_status_false">
<label for="abc_reject">Reject</label>
</span>
</div>
</div>
<div>
<input type="submit">
</div>
</form>
You can change from span tag to div tag, and display Submit button on the right by display flex as
.wrapper-class{
padding: 10px;
}
.form{
display:flex;
align-items: center;
width: 100%;
height: 100%;
}
/*
.wrapper-class, .submit{
display: inline-block;
width: 100px;
}
*/
.wrapper-class{
padding: 10px;
}
.form{
display:flex;
align-items: center;
width: 100%;
height: 100%;
}
<form class="abc" id="abc" action="/" accept-charset="UTF-8" method="post">
<div class="form">
<div class="wrapper-class">
<div>
<input type="radio" value="true" name="abc[status]" id="abc_status_true">
<label for="abc_approve">Approve</label>
</div>
<div>
<input type="radio" value="false" name="abc[status]" id="abc_status_false">
<label for="abc_reject">Reject</label>
</div>
</div>
<div>
<input type="submit">
</div>
</div>
</form>
I have a bootstrap form with the following css code in it. I have tried to close up the blank spaces in the form by adding margin:0 attribute but still the spaces between the element is there.
css form code
<div class="row-fluid">
<form style="width: 90%; height: 100%; margin-top:1px;" method="post"novalidate="novalidate" class="form well">
<div class="row-fluid">
<div>
<label for="complaints">Message *</label>
<textarea style="width:100%;" name="complaints" rows="3" required></textarea>
</div>
</div>
<div class="form-actions">
<input style="width:100%; background-color:#da291c;" class="btn btn-primary" name="commit" type="submit" value="Send">
</div>
</form>
</div>
this is the picture of the above form
My challenge is to close the gaps on the areas pointed with arrows.
I am using this version of bootstrap
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
You can remove the margin-bottom that bootstrap adds to the class .control-group
.row-fluid div.control-group, div.form-actions {
margin-bottom: 0px;
}
div.my-form{
padding-bottom: 0px;
margin-top:0px;
padding-top:0px;
}
.control-group input,.control-group textarea{
margin-bottom: 0px;
}
form.form{
padding-bottom: 0;
padding-top:0;
}
UPDATED jsfiddle with your code
You can use this code:
input[type=text], .txtarea{
margin-bottom: 10px;
}
In bootstrap already they keep on the margin property always. we can overwrite that to solve your problem.
you need to add one class like this:
.splclass{
margin:0 !important;
padding:0 !important;
}
Add additionally in the form inline style like this:
<form style="width: 90%; height: 100%; margin-top:1px; padding-top:5px;" method="post"novalidate="novalidate" class="form well ">
i think it will helpful
Well if you don't want any space in between, you definitely don't want any margin. Move the CSS to it's own file:
.send {
width:100%;
background-color:#da291c;
}
.message {
width:100%;
}
.form {
width: 90%;
height: 100%;
margin: 0;
}
and html:
<div class="row-fluid">
<form class="form" method="post" novalidate="novalidate" class="form well">
<div class="row-fluid">
<div class="control-group span12">
<label for="name">Name *</label>
<input ng-model="name" name="name" type="text" class="input-block-level" required>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<label for="email">Email *</label>
<input name="email" placeholder="" type="email" class="input-block-level" ng-model="email"ng-change="id=email" required>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<label for="complaints">Message *</label>
<textarea class="message" name="complaints" rows="3" required></textarea>
</div>
</div>
<div class="form-actions">
<input class="btn btn-primary send" name="commit" type="submit" value="Send">
</div>
</form>
</div>
and you can see the fiddle here: https://jsfiddle.net/6j98311j/
I have a login form that is on the center of the page. The FORM is already in the right place with the right size. However, the two inputs are aligned to the left and I want them to be centered. The following code does not work. Any ideas?
HTML
<div class="col-sm-4 col-sm-offset-4">
<form action="/new" method="POST">
<input class="loginField" type="text" name="email" placeholder="Email address"></input>
<input class="loginField" type="text" name="password" placeholder="Password"></input>
</form>
</div>
CSS
.loginField {
margin: 0 auto;
width: 500px;
height: 50px;
}
You should use the form-control class to alter the default behavior of Bootstrap inputs.
*I altered your HTML so it's mobile first, this wont effect the text being centered if it's unnecessary for your needs tho.
body {
padding-top: 50px;
}
#loginForm {
max-width: 500px;
margin: 0 auto;
}
#loginForm .form-control {
position: relative;
height: 50px;
font-size: 16px;
text-align: center;
border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="loginForm">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
</form>
</div>
<!-- /container -->
<hr>
Add a class="text-center" to your form
<form class="text-center" action="/new" method="POST">
jsBin demo
Logically, if you don't want all your form's text to be centered, wrap your inputs inside a i.e: <div> and add the class to that DIV instead.
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;}