I am using SimpleForm and Twitter Bootstrap in two Rails 3.2 projects. Unfortunately, my forms are not rendering properly in one of the projects.
All relevant gems are the same versions.
The one that is presenting correctly has fields that look like this:
<form id="new_user" class="simple_form form-horizontal" novalidate="novalidate" method="post" action="/users" accept-charset="UTF-8" name="new_user">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8"> <input type="hidden" value="I/WorRCjNpv7gnccGkL6/LETTgn6ao6Ycrgm0ky2slM=" name="authenticity_token">
</div>
<div class="control-group string required">
<label class="string required control-label" for="user_first_name"><abbr title="required">*</abbr> First name</label>
<div class="controls">
<input id="user_first_name" class="string required" type="text" size="50" name="user[first_name]">
</div>
</div>
<div class="control-group string required">
<label class="string required control-label" for="user_last_name"><abbr title="required">*</abbr> Last name</label>
<div class="controls">
<input id="user_last_name" class="string required" type="text" size="50" name="user[last_name]">
</div>
</div>
<div class="control-group email required">
<label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label>
<div class="controls">
<input id="user_email" class="string email required" type="email" size="50" name="user[email]">
</div>
</div>
<div class="control-group password required">
<label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label>
<div class="controls">
<input id="user_password" class="password required" type="password" size="50" name="user[password]">
</div>
</div>
<div class="control-group password optional">
<label class="password optional control-label" for="user_password_confirmation">Password confirmation</label>
<div class="controls">
<input id="user_password_confirmation" class="password optional" type="password" size="50" name="user[password_confirmation]">
</div>
</div>
<div class="control-group boolean optional">
<label class="boolean optional control-label" for="user_admin">Admin</label>
<div class="controls">
<input type="hidden" value="0" name="user[admin]"> <label class="checkbox"><input id="user_admin" class="boolean optional" type="checkbox" value="1" name="user[admin]"></label>
</div>
</div>
<div class="control-group string required">
<label class="string required control-label" for="user_company"><abbr title="required">*</abbr> Company</label>
<div class="controls">
<input id="user_company" class="string required" type="text" size="50" name="user[company]">
</div>
</div>
<div class="form-actions">
<input class="btn btn-primary" type="submit" value="Create User" name="commit"> <a class="btn" href="/users"><span class="translation_missing" title="translation missing: en.helpers.links.cancel">Cancel</span></a>
</div>
</form>
while the one that is not correct gets rendered like this:
<form id="new_user" class="simple_form form-horizontal" novalidate="novalidate" method="post" action="/users" accept-charset="UTF-8" name="new_user">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8"> <input type="hidden" value="TR4q4W8cEl82hI6+bebVsoYp8WD3k2xsyhhf1UXzCYg=" name="authenticity_token">
</div>
<div class="input string required">
<label class="string required control-label" for="user_first_name"><abbr title="required">*</abbr> First name</label> <input id="user_first_name" class="string required" type="text" size="50" name="user[first_name]">
</div>
<div class="input string required">
<label class="string required control-label" for="user_last_name"><abbr title="required">*</abbr> Last name</label> <input id="user_last_name" class="string required" type="text" size="50" name="user[last_name]">
</div>
<div class="input email required">
<label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label> <input id="user_email" class="string email required" type="email" size="50" name="user[email]">
</div>
<div class="input password required">
<label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label> <input id="user_password" class="password required" type="password" size="50" name="user[password]">
</div>
<div class="input password optional">
<label class="password optional control-label" for="user_password_confirmation">Password confirmation</label> <input id="user_password_confirmation" class="password optional" type="password" size="50" name="user[password_confirmation]">
</div>
<div class="input boolean optional">
<input type="hidden" value="0" name="user[admin]"> <label class="boolean optional control-label checkbox" for="user_admin"><input id="user_admin" class="boolean optional" type="checkbox" value="1" name="user[admin]"> Admin</label>
</div>
<div class="form-actions">
<input class="btn btn-primary" type="submit" value="Create User" name="commit"> <a class="btn" href="/users"><span class="translation_missing" title="translation missing: en.helpers.links.cancel">Cancel</span></a>
</div>
</form>
I have followed the identical steps (as far as I know) on both projects. Why is Twitter Bootstrap causing the two to render differently? Or is it SimpleForm?
I found the problem, although I'm still not sure why it happened. This was indeed a SimpleForm problem rather than a Twitter Bootstrap problem.
The config/initializers/simple_form.rb files were generated differently between the two. I am not sure why.
I did get some errors during installation that were thrown by MiniTest.
Looks like the problem is with simple form.
Twitter Bootstrap only handles the style, SimpleForm generates the html.
Are you sure, that you're using the same version of SimpleForm on both projects? Or maybe you forgot to call simple_form_for on the later one.
EDIT:
After the installation did you ran the twitter bootstrap generator?
rails generate simple_form:install --bootstrap
Related
I have a form for adding new users and I am having problems with the form reset because it does not remove the valid class of materialize.
The form:
<div class="col s12 m12 l4 xl4">
<form (ngSubmit)="onSubmit(); newLabMember.reset()" #newLabMember="ngForm" ngNativeValidate>
<!-- New lab member form -->
<div class="section">
<h5>Add lab member</h5>
<div class="input-field">
<input type="text" name="firstName" [(ngModel)]="user.firstname" class="validate" id="firstName" validate required>
<label for="firstName">First name</label>
</div>
<div class="input-field">
<input type="text" name="lastName" [(ngModel)]="user.lastname" class="validate" id="lastName" validate required>
<label for="firstName">Last name</label>
</div>
<div class="input-field">
<input type="text" name="email" [(ngModel)]="user.email" class="validate" id="email" validate required>
<label for="email">Member email</label>
</div>
<blockquote>An email will be sent to the new user with a password and further instructions.
</blockquote>
<div class="input-field">
<button type="submit" class="waves-effect waves-light btn blue-grey darken-1">Add new member</button>
</div>
</div>
</form>
</div>
As you can see, when I submit the form I use reset() form but the class .valid from materialize still there.
This question is about best practice. Can I use form-horizontal class on a <div> element. I am trying to use style that these form class provides but I don't want to use form tag.
Is it good practice ?
<div class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
</div>
This question already has answers here:
Bootstrap: Input inside a label
(2 answers)
Closed 5 years ago.
I would expect the following HTML to show a UI like this
Label [Input]
Label [Input]
But it is showing the labels above the inputs at all resolutions. Can anyone tell me why?
<form class="form-horizontal">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
specify label width and input tye's width
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
</form>
Expand snippet to see in large display
This is the base of what you are looking for.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
I have inline form, in which for each line I want to have label on the left side, and input on the right side. I have tried pull-right, align-right, text-right, but none of them works.
Fiddle is here !
Here is what I do:
<style>
.form-group label{
text-align: left!important;
}
</style>
<form action="" class="form-horizontal" method="post" role="form">
<div class="form-group">
<label class="col-md-2 control-label" for="FirstName">First name</label>
<div class="col-md-4">
<input class="form-control" id="FirstName" name="FirstName" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label pull-left" for="LastName">Last name</label>
<div class="col-md-3">
<input class="form-control" id="LastName" name="LastName" type="text" value="" />
</div>
</div>
</form>
I have a multi-step reg form with each step in a fieldset,i am using bootstrap validator for validation.I made the 'next' button in first step to toggle validation.And it works well...
The problem i have is,i have to prevent going to next step on an error.
Now, validation works on clicking 'next'in first step but immediately passes to next step.
I want to stay there until validation is success...
How to do this?
i m giving my chunk of code...i have all libraries included...
...
<fieldset id="first_step">
<h2 class="fs-title">Create your account</h2>
<div class="form-group">
<label class="col-md-3 control-label">Username</label>
<div class="col-md-9">
<input type="text" class="form-control" name="uname" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" name="pwd" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm Password</label>
<div class="col-md-9">
<input type="password" class="form-control" id="cpwd" />
</div>
</div>
<input type="button" name="next" id="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle"></h3>
<div class="form-group">
<label class="col-md-3 control-label">*Register Number</label>
<div class="col-md-9">
<input type="text" class="form-control" id="Text1" name="reg" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">*Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="Text2" name="stname" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-offset-3 col-md-12">
</div>
</div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" id="sub_but" name="submit" class="submit action-button" value="Submit" />
</fieldset>
<script type="text/javascript">
$(".next").click(function() {
$('#msform').data('bootstrapValidator').validate();
//prevent here????
//Script to slide first fielset
}
$(".previous").click(function() {
//Script to slide back to first fieldset
}
</script>