I am new to Zurb's Foundation and have come across an unusual quirk. I have placed a dropdown button on a form, and am using it as a 'state-picker'. However, no matter which dropdown button style, size or color I choose, the dropdown 'triangle' image doesn't show. SimilarlyThe call to the button is inside a Rails 3 select method and the options are off in a helper file. Here is the code:
<div class="large-2 columns">
<%= f.select :billing_state, options_for_select(us_states), {},
:class => "small radius button dropdown" %>
</div>
See the photo here:
I have verified that a regular html dropdown button request is working on the same page with:
foo
See here:
I am stumped! I have even tried the 'Split Button', which doesn't have a 'Split pipe & triangle'. Any ideas? cheers!
Zurb uses a completely different way of styling things to the rails select html output. Passing a class to the select method doesn't really help. I've found that I needed to code the html manually in my projects when using Zurb and the dropdowns.
I haven't found the interaction between form helpers and Zurb as straightforward as with Twitter Bootstrap.
This page explains the Zurb approach to styling select boxes using custom form. http://foundation.zurb.com/docs/components/custom-forms.html
Basically they use styled span's.
Hope this helps.
Related
i have a select_tag in my rails form where i want to show images as option, i tried searching for a solution online but there is nothing quite good.
my form
<%= form.select :transport, ['Select an image', 'http://pngimg.com/uploads/tesla_car/tesla_car_PNG24.png', 'http://pluspng.com/img-png/png-hd-bike-ktm-duke-bike-png-download-1600.png' %>
i want something like this:
click here
Instead of struggling to let Rails handle it, It's recommended to use JQuery to populate options in the drop-down list.
This link guides you through the process to do it.
Click Here
In my rails form i want to get mobile/contact details of a user. It could be more than one. How can I add text boxes dynamically once the user clicks the "add more" button.
To do this you will need to do some javascript and some ruby code to get working .
First on click of Add More,you need to show a partial already hidden inside your view.If This needs to be dynamic,then you need to call an ajax and then load the partial in a predefined placeholder
for example:-
load partial in advance in our view and hide it first
<div id="user_contact_details" style="display:hidden;">
<%= render(:partial => 'user/contact_details') %>
</div>
######Now,ON CLICK of the Add More button,show this hidden partial using js
##add more button
Add More
$('#add_more').click(function(){
##toggle partial placeholder
$("#user_contact_details").toggle('slow');
})
...the same can be done using ajax,you can also load partial using some conditions such as if user has more than one contact details..then load another partial with different form than previous one...
Although..this might not be the unique solution,but atleast you can have an idea of how it can done.
I did this for you in JSFIDDLE, please refer this from my JSFIDDLE.
http://jsfiddle.net/Manoj_Menon/eyxt6kjh/
I'm trying to implement redactor as a WYSIWYG editor with ruby on rails. Everything seems to be working fine except that when I edit text in the editor the html tags show up. This happens even when I use the html button on the toolbar.
So on the webpage the text appears something like this:
<p>Edited text here</p>
I haven't included any code because I'm not really sure where to begin looking with this so any help at all will be appreciated :)
when using a text editor you have to tell your rails app that the area is html safe.
This is (by default) not the case as people could attack your site by using a text box you have put into your app.
by declaring an area as html safe you should be able to use the html tags as you like.
be aware of the security risk for using this.
e.g.
<div class="description">
<%= #foo.foo_desc.html_safe%>
</div>
Hope this clears it up for you.
in your view try using raw before the text you are trying to show. For example
<%= raw #post.body %>
this will work out with the html tags and show the processed text only without the tags.
I am working in a rails 3.2 app,where the user has the avatar picture.
The user can chose his avatar in these way:
1) chose the file clicking the "Browse..." button in the edit user view (using file_field)
2) chose the file and click OK
3) then click on the "Apply Photo" button (on the right of the field containing the filename) to load the image to the server and update the view
I want improve the user experience, removing the field and the button in the view. This should be the way:
1) click a link 'Update avatar' (or directly click on the picture)
2) chose the file and click OK
No (visible) fields and no Apply button
What's the best way to do that ?
should I continue to use the file_field in the view but hide it and trigger the user#update action using some javascript code ? or is there some other better way to do that ?
Thank You
You can use one of js plugins to upload files. I.e. if you are using jQuery, you can try using plupload
I have encountered this issue with hiding the input element and putting a label instead.
For eliminating submit button, I have added onchange method.
<%= file_field_tag :file, class: "d-none", onchange: "this.form.submit()" %>
<%= label_tag :file, role: "button" do %>
<%= image_pack_tag('logo.svg') %>
<% end %>
PS: I'm using bootstrap class here, styles can be used instead for hiding the element.
The button near upload field is generated by browser and is standart widget for browser. You can use js plugin for that or realize iframe upload method (allow you async file upload even on IE). Simple tutorial for iframe - there Iframe method allow to you to customize upload link/field as you want =)
I am using MVC.NET and CKEditor and want to prefill the textarea so on edit forms the text is already loaded.
I try with:
<%= Html.TextBox("Message", Model.Message) %>
I can see that the textarea contains the correct text, but since CKEditor alters the html, it isn't inserted into the editor. Is there a way to hack it so I can insert the text into the form?
It was a stupid error, a simple:<%= Html.TextAreaFor(model => model.Message) %> made it work.
CKEditor is desined for WebForms and its designed in such a way to depend on the external dependencies like request and response.
Unless the CKEditor company provides the helper extension for MVC you will not be able to do that. You can also search if there is any extension points provided like interfaces.