Home > database >  How do you apply styling to a Ruby form tag?
How do you apply styling to a Ruby form tag?

Time:09-06

I'd like to use Bulma styling from the following code snippet for a file upload button:

<div >
  <label >
    <input  type="file" name="resume">
    <span >
      <span >
        <i ></i>
      </span>
      <span >
        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 >
    <%= label_tag :sample_file, 'Voters 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!

CodePudding user response:

You can just specify name for your input and label text

And use plain HTML without any rails helper

<div >
  <label >
    <input  type="file" name="sample_file"> <!-- name here -->
    <span >
      <span >
        <i ></i>
      </span>
      <span >
        Voters file <!-- text here -->
      </span>
    </span>
  </label>
</div>

That's it

CodePudding user response:

Most all the tag helpers for tags with content accept an optional block:

<%= label_tag :sample_file, 'Voters file', class: "file-label" do %>
  <!-- this will be the content of the label element -->
<% end %>

Although in this case its kind of questionable why you're even using the tag helper - you're not using a FormBuilder so its not providing any kind of functionality and a simple literal HTML tag would do the exact same job.

  • Related