I'm with Rails 4.0.2, nested_form, formtastic and bootstrap for the display.
My form is a classic semantic_form_for and the generated code was (really simplified of course):
<form>
<fieldset class="inputs">
<div class="row">
<div class="col-md-6">
<div>
<label>...</label>
<input type="text" />
</div>
</div>
...
I must use nested_form so I change semantic_form_for to semantic_nested_form_for. Now I have something like that:
<form>
<fieldset class="inputs">
<ol>
<div class="row">
<div class="col-md-6">
<li>
<label>...</label>
<input type="text">
</li>
</div>
And of course my css is really not happy with that...
How can I disable this intrusive ol/li ?
Ok, I found a semantic_bootstrap_nested_form_for in the doc.
It's make for Formtastic and Bootstrap, work nice.
Related
I installed Bootstrap for my Rails and decided to test out making a grid. This is my code.
<div class="row">
<div class="span4">
<h1>About the Creator</h1>
<p>
</p>
</div>
<div class="span8">
<h1>About the Site</h1>
<p>
</p>
</div>
</div>
This is what it looks like. As you can see, it's in 2 rows, however it should be in 2 columns. There doesn't seem to be anything wrong with the code itself as far as I can see. I don't think I made a mistake during installation, because when I installed bootstrap, it automatically stylized my webapp. Any help?
What version of bootstrap are you using? In recent versions of bootstrap the syntax is <tag class="col-xs-4"> rather than <tag class="span4">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-4">
<h1>About the Creator</h1>
<p>
</p>
</div>
<div class="col-xs-8">
<h1>About the Site</h1>
<p>
</p>
</div>
</div>
There are 4 classes you can use in order to specify column size:
col-xs-#
col-sm-#
col-md-#
col-lg-#
They were introduced so that you could have columns have different portions of the screen on different platforms. For example, perhaps you want your main content to take up 12 columns, instead of 10, on a mobile phone. TO do this do:
<div class="row">
<div class="col-xs-12 col-md-10">
Content
</div>
</div>
I have a form that uses styles of twitter/bootstrap
however the content of the form is not saved.
May I please know what am I missing?
<%= form_for #customer_detail, url: { action: "create" } do |f| %>
<div class="form-group">
<div class="row">
<div class='col-sm-3'>
<label for="Check in">Check in:</label><br>
<div class='input-group date' id='datetimepicker1'>
<input class="form-control" type='text'>
<span class="input-group-addon"><span class=
"glyphicon glyphicon-calendar"></span></span>
</div>
</div><label for="Check out">Check out:</label><br>
<div class='col-sm-3'>
<div class='input-group date' id='datetimepicker2'>
<input class="form-control" type='text'>
<span class="input-group-addon"><span class=
"glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<% end %>
Seems like you should read this article. It describe to create form use Rails helpers and action for save to database.
I am using token inputs in a text field and would like to also make these tokens sortable (JQuery UI). I am using Ryan Bates screencast to get started however I am unsure how to apply content_for to my code. Here is what I have...
<fieldset id="presenters">
<p>
<%= event_form.label :presenter_tokens, "Presenters" %>
<%= event_form.text_field :presenter_tokens, "data-pre" => #event.presenter_tokens_tokeninput.to_json %>
</p>
</fieldset>
Here is the HTML I get...
<fieldset id="presenters">
<p>
<label for="event_presenter_tokens">Presenters</label>
<ul class="token-input-list-facebook">
<li class="token-input-token-facebook">
<p>Mark</p>
<span class="token-input-delete-token-facebook">×</span>
</li>
<li class="token-input-token-facebook">
<p>Laurie</p>
<span class="token-input-delete-token-facebook">×</span>
</li>
<li class="token-input-input-token-facebook">
</ul>
<input data-pre="[{"id":131,"name":"Mark"},{"id":1311,"name":"Laurie"}]" id="event_presenter_tokens" name="event[presenter_tokens]" size="30" type="text" value="131,1311" style="display: none;"/>
I ended up solving this problem by using https://github.com/swanandp/acts_as_list
I have used the basic angular script which update what ever you type in the input field on any element we specify, real time...
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Im new to Angular. I used this on may rails app. But the problem is, the field I used ng-model will reset its valu after submit. Even setting the 'value' attribute won't work. How can I fix this?
Exact code generated from my rails application :
<form accept-charset="UTF-8" action="/members" class="custom" id="new_member" method="post">
<div class="row collapse text-field">
<div class="small-4 columns">
<h3>Add Member : </h3>
</div>
<div class="small-6 columns left inline">
<h3 class="subheader inline"> {{newEntry.name}}</h3>
</div>
</div>
<div class="row collapse text-field">
<div class="small-3 columns">
<label class="prefix" for="member_name">Full Name</label>
</div>
<div class="small-7 columns left">
<input class="input" id="member_name" name="member[name]" ng-model="newEntry.name" type="text" value="gj" />
</div>
</div>
<div class="row collapse text-field">
<div class="small-3 columns">
<label class="prefix" for="member_address">Address</label>
</div>
<div class="small-9 columns">
<textarea class="input" height="115" id="member_address" name="member[address]">
</textarea>
</div>
</div>
<div class="row">
<div class="small-9 columns" ><input class="button radius" name="commit" type="submit" value="Add Member" /></div>
</div>
</form>
Note : I haven't used an ng-controller. Im new to Angular. If its required, please tell me how to convert the above to the controller. I can get the value of the field and send it back to the form in rails. Its there in a variable. But Angular keeps wiping it!
Note2 : This problem persist only for the input field I used angular-model.. All the other fields retained the data!
Ok this is not the best solution but you could do this:
<input type="text" ng-init="yourName = 'Your Value Goes Here'" ng-model="yourName" placeholder="Enter a name here">
ng-init directives are run when the app intialises, so your value will be assigned to angular's internal "yourName" model and be updated in the view accordingly.
That would solve your problem but its not the best way. Hopefully that will get you going for now - I'll try and post a more "ideal" solution shortly.
I am using bootstrap-sass 2.0.0 in my gemfile, but I am having trouble getting both prepended and appended content added to an input tag in a form to work.
I got on FireBug with FireFox and copied the exact html that they use for the example on the twitter bootstrap site, copied here:
div class="control-group">
<label class="control-label" for="appendedPrependedInput">Append and prepend</label>
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">$</span>
<input id="appendedPrependedInput" class="span2" type="text" size="16">
<span class="add-on">.00</span>
</div>
</div>
</div>
But I get the prepended text facing the wrong way (it looks like the appended tag) so it kind of looks like this: [span)[.....input....][span) instead of this: (span][.....input.....][span) .
Also appended buttons do not register as being appended (also with copied code from the example) like so: (....input....) (button) instead of (....input.....][button)
Any ideas on how I can get to this: (span][....input....][button) ? I already tried the code below:
<form class="form-inline">
<div class="control-group">
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">Search</span>
<input id="search" class="input-xlarge" type="text" size="16">
<button class="btn" type="button">Go!</button>
</div>
</div>
</div>
</form>
I appreciate any and all help!
You have the right idea, you just have to put everything that is either to be appended/prepended or have something appended/prepended to it on one line with no spaces.
Like this:
<form class="form-inline">
<div class="control-group">
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">Search</span><input id="search" class="input-xlarge" type="text" size="16"><button class="btn" type="button">Go!</button>
</div>
</div>
</div>
</form>
I tested this on my own Bootstrap setup and it displays properly.