I'm using Rails 3.2.3, Twitter Bootstrap, and the best_in_place gem to handle in-place editing.
The problem is that whenever I click to edit input, a bunch of extra space is placed to the right of the input.
Before:
After:
Has anyone else had this problem? What should I do?
I've tried explicitly setting the padding and margin to 0 and the width to a set pixel width - less than the td width.
Thanks.
Twitter bootstrap gives you wide range of input sizing classes. like 'input-small', 'input-large' etc.
try adding those classes for 'inner_class' attribute and it should apply on the input field.
<%= best_in_place #category, :name, {:inner_class => "input-small", :type => :input} %>
hope this helps :)
I recently ran into this issue myself. I passed the html attribute size using the :html_attrs option available in best_in_place, as follows:
<%= best_in_place #payment, :currency, :html_attrs => { size: 3 } %>
A size of 3 means an input box for 3 characters. This substantially reduced the input box expansion in my example.
I doubt that this is actually adding data to your database with extra spaces.
This is just a CSS issue, where your input field is designed to take up a certain percentage of the containing element or something like that. Hard to tell without seeing the exact CSS behind the input field.
I used cols and rows, as an alternative to size:
<%= best_in_place #payment, :currency, :html_attrs => { :cols => '45', :rows => '10' } %>
Related
I am using Rails 4.2.1 and ruby 2.1.6
I am looking for a solution to do the following:
Have a dropdown containing a list of existing regions (Bundesland).
If I find my region in that list, select from the dropdown and I am fine.
If I do not find my region, I need to manually type in a new region into a text field. This will create a new entry in the database as well.
To have this userfriendly and easy to use without switching between fields, I prefer to have this in one field if possible.
Here is the code for my actual dropdown, but without any option for
free-text and manual input.
<br>
= ai3.input :area_id, label: "Bundesland/Kanton", :as => :select, :collection => option_groups_from_collection_for_select( #area_countries_dach, :area_regions, :name, :id, :name)
Now this needs to be expanded to a combination of a select-box (dropdown) and a free-text input field.
It would be great to have the user typing into the field the beginning chars for the region. if found, select by click or leaving the field. If not found use the already typed chars for the creation of the new region.
Any ideas on how to solution this?
Thanks.
You can manually have a text_field appear upon clicking a link/button/div if the region is not found in the drop-down.
Something like below
<div id="show_region" class="btn btn-primary">Cant Find Your Region? Manually Add It Here</div>
<%= ai3.input :some_attribute, :class => 'form-control', :id => 'input_region', placeholder: 'Enter your region' %>
Javacsript
<script type="text/javascript">
$('#input_region').hide();
$(document).ready(function() {
$('#show_region').click(function() {
$('#input_region').slideToggle("slow");
});
});
</script>
But you can't save it in the same attribute AFAIK. You need to have a different attribute for the text_field.
It would be great to have the user typing into the field the beginning
chars for the region. if found, select by click or leaving the field
This needs an autocomplete text_field rather than a normal text_field. Take a look here on how to implement it.
As Pavan mentioned, an autocomplete text field works well in this situation. I ran across the same thing recently and used twitter typeahead for it.
https://github.com/yourabi/twitter-typeahead-rails
There's lots of discussion on it elsewhere.
I have a rails form created using the simple_form and haml with Angular JS code sprinkled in it. Angular is doing its job and computing the values fine. However, I have a display problem: I cannot display the totals being computed by angular and display it as a formatted value in a form control.
Here is the code snippet of the haml view:
= f.input :total_amount, :label => 'Invoice Total', :input_html => { :readonly => true, "ng-model" => "grand_total" }
So the form_control 'total_amount' is bound to the "grand_total" attribute on $scope for Angular.
Everything is working fine computationally. However, the total_amount input field is being displayed 'unformatted', e.g. 1655.3456. I would like to display it as currency, e.g., $1,655.00.
I do not know how to do it. I have tried to use the suggested approach of using number_to_currency rails view helper as shown below:
= f.input :total_amount, :label => 'Invoice Total', :input_html => { :readonly => true, "ng-model" => "grand_total", :value => number_to_currency(f.object.total_amount) }
But since the total_amount field is blank to begin with when I initialize the Rails view, it has no effect. Also, as the users change the nested form fields, the total amount is being updated dynamically by Angular. The number updates fine, but formatting is an issue.
Thanks in advance for any help.
You can use currency filter from angular https://docs.angularjs.org/api/ng/filter/currency
Because you are not using this field as input, try wrapping display value in something like span, then you can add filter like this
<span>{{total_amount | currency}}</span>
You can read about other options from the link
Or you can use directive from this answer https://stackoverflow.com/a/27051526/1805815
How do I disallow font size change in html_safe rails 3
I have here a truncated description of an article, and I want to disallow big font sizes in display mode when the user inputs a big font size using tinymce editor
= truncate(event.description.html_safe, :length => 110, :omission => "...")
How can i do that?
You will want to use the sanitize helper before marking it as html_safe. Unfortunately for you, in this case, the blacklist functionality has been removed, so you will need to list literally all of the attributes you do want, in addition to the defaults. It may be easier to use a regex to remove the attribute in question.
Also, for what it's worth, raw(event.description) does the same as event.description.html_safe, but will not blow up on a nil value (not sure what your validation rules are), so it is generally preferred.
Edit:
Sanitize example usage (from http://apidock.com/rails/v3.2.8/ActionView/Helpers/SanitizeHelper/sanitize ):
truncate( raw( sanitize(event.description, :tags => %w(table tr td), :attributes => %w(id class style) ) ), :length => 110, :omission => "...")
Note: Truncating HTML like that can lead to some weird and hard-to-track-down errors, by creating invalid HTML because of cut-off end tags.
In my app, there are two models: rfq and standard. Their relationship is many-to-many. In rfq creating screen, the code below displays a list of available for selection in drop down list:
<%= simple_form_for #rfq do |f| %>
<%= f.association :standards, :collection => Standard.active_std.all(:order => 'name'), :label_method => :name, :value_method => :id %>
<% end %>
The problem is that the list is not collapsed, which means there are multiple standards displayed in a multi-line boxes. How can I reduce the box to one line only?
Thanks.
UPDATED: here is the screen shot of multiple line list box:
It's creating a multi-select because one rfq can have many standards, so it allows you to ctrl-click to select many standards.
You could try adding :input_html => { :size =>'1' } but I'm not sure that will preserve the scrollbar. It definitely won't drop down.
Here's someone else who wanted to do the same thing: HTML muliple select should look like HTML select. One of the answers refers to a Dropdown Check List implemented in jQuery, but that would take some work to integrate with SimpleForm.
SimpleForm has a very helpful Google Group--you might get more ideas there:
http://groups.google.com/group/plataformatec-simpleform
You can add as: :collection_select
Use
=f.collecion_select, model_associated_ids, collection, value, label
in your is like this
=f.collection_select, :standard_ids, Standard.active_std.all, :id, :name
you can find more info here
https://github.com/plataformatec/simple_form
I tried applying the :maxlenght => 40 on a textarea on my form.
But it didn't work out.
Can we have a length limit on a textarea?
The code for text area is
<%= f.text_area :data,
:rows => 2,
:cols => 60 ,
:maxlength => 140,
:autocomplete => :off,
:class => "textareabytes" %>
Just like Rahul said, there's no maxlength attribute for textarea in HTML. Only text input's have that.
The thing you need to remember, is that RoR's text_area function (and all of RoR's HTML-generator functions) accept any argument you'll give them. If they don't recognized the parameter, then the'll just convert it to HTML.
<%=f.text_area :data, :hellothere => "hello to you too"%>
Will output this HTML:
<textarea name="data" hellothere="hello to you too"></textarea>
I know it's hard to remember, but Ruby on Rails isn't magic, it just does a lot of things for you. The trick is to know how it does them, so you can understand why they work, and how to fix them when they don't!
Could it be due to a typo?
":maxlenght => 40 " in your post is misspelt.
EDIT:
I didn't read your post carefully. I think there is no maxlength attribute for textarea in HTML. You will have to handle it in JavaScript. There is more information in "MaxLength on a Textarea".
Not strictly what you're after of course, but, you can always put a:
validates_length_of :data, max: 40
on your model. Won't stop the textarea size of course :)
You can use the maxlength attribute. It is new for the tag in HTML5. It should work nowadays.