I'd like to use Bulma styling from the following code snippet for a file upload button:
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
However, since I'm using a Rails form, the code I'm using for the file submission button is as follows:
<div class="column">
<%= label_tag :sample_file, 'Sample file' %>
<%= file_field_tag :sample_file %>
</div>
I'm trying to apply the Bulma styling to this tag, and it generally works for buttons as I can simply reuse the Bulma class tag and add it to the Rails form snippet (i.e. this will work fine for submit tags). For some UI elements though, it just doesn't render. Does anyone know how I can apply these more complex stylings to Rails tags?
Thanks!
If it's really troubling you to put all the Bulma markup in your view. You can make a helper:
<div class="column">
<%= bulma_file_field_tag :sample_file, "Voters file" %>
</div>
and put all the Bulma markup into the helper
# in app/helpers/application_helper.rb
module ApplicationHelper
def bulma_file_field_tag(name, label)
<<-TAG.html_safe
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="#{name}">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
#{label}
</span>
</span>
</label>
</div>
TAG
end