tailwindlabs / tailwindcss-custom-forms

A better base for styling form elements with Tailwind CSS.
https://tailwindcss-custom-forms.netlify.app/
MIT License
1.55k stars 73 forks source link

Support for Ruby on rails on <select> #40

Open coopeu opened 4 years ago

coopeu commented 4 years ago

I have tried custom-forms on my RoR and it's not working on select inputs. In our case, text white and small area,

// tailwind.config.js // ...

 plugins: [
    require('@tailwindcss/custom-forms'), require('tailwind-forms')(), 
    ],

view/page.html.erb

` <%= form_for @subscriptor do |f| %>

<%= f.text_field :nom, placeholder:'Nom', class:"rounded-l-lg p-3 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white object-center" %>

<%= f.email_field :email, class:"p-3 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white object-center", placeholder:"el.teu@mail.cat" %>

<%= f.select :font, ['Buscadors', 'Xarxes Socials', 'Boca oido', 'Altres'], class:"form-select mt-1 block w-ful", prompt:"A on ens has sentit? " %>

<%= f.submit 'Subscriu-te', class:"p-4 px-8 rounded-r-lg bg-teal-400 text-teal-800 font-bold uppercase border-gray-300 border-t border-b border-r text-center" %>

<% end %>`

html result


`<form class="new_subscriptor" id="new_subscriptor" action="/subscriptors" accept-charset="UTF-8" method="post">

    <input placeholder="Nom" class="rounded-l-lg p-3 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white object-center" type="text" name="subscriptor[nom]" id="subscriptor_nom" />

    <input class="p-3 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white object-center" placeholder="el.teu@mail.cat" type="email" name="subscriptor[email]" id="subscriptor_email" />

    <select name="subscriptor[font]" id="subscriptor_font"><option value="">A on ens has sentit? </option>

<option value="Buscadors">Buscadors</option>
<option value="Xarxes Socials">Xarxes Socials</option>
<option value="Boca oido">Boca oido</option>
<option value="Altres">Altres</option></select>

    <input type="submit" name="commit" value="Subscriu-te" class="p-4 px-8 rounded-r-lg bg-teal-400 text-teal-800 font-bold uppercase border-gray-300 border-t border-b border-r text-center" data-disable-with="Subscriu-te" />
</form>
```  `

Repsoitory: [https://github.com/coopeu/MilRevolts.com/tree/master1](url)
nguyenkhoa2407 commented 3 years ago

I'm facing the same problem. I wonder if you ever found a solution for this.