bootstrap-ruby / bootstrap_form

Official repository of the bootstrap_form gem, a Rails form builder that makes it super easy to create beautiful-looking forms using Bootstrap 5.
MIT License
1.64k stars 352 forks source link

Can't edit classes on input elements. #692

Closed antonysastre closed 10 months ago

antonysastre commented 10 months ago

Hi, i'm struggling with setting classes on input elements. I'd be happy to contribute to the documentation but need to figure it out first.

I'm trying to add a class to the select input, this is what i've so far:

<%= f.select :client_id, options_from_collection_for_select(Client.all, :id, :name), class: 'form-select-sm' %>

- html: { class: 'form-select-sm' }
- html_options: { class: 'form-select-sm' }
- html_options: { control_class: 'form-select-sm' }
- wrapper_class: 'form-select-sm'

None of these change the actual input class. It still produces:

<select class="form-select" name=[…]>

Similarly, trying to change the 'mb-3' class on a checkbox input using the same method above never overwrites the default margin. I can't find anything in the docs, am i missing something?

lcreid commented 10 months ago

Thanks for raising this issue. This may require a bit of digging on our part.

In the meantime, I notice in the example you give that you have [] around class: 'form-select'-sm. Have you tried {}? Does it give different results?

antonysastre commented 10 months ago

Thanks for raising this issue. This may require a bit of digging on our part.

In the meantime, I notice in the example you give that you have [] around class: 'form-select'-sm. Have you tried {}? Does it give different results?

Sorry about the [] my mistake, it was intended as a marker for where i tested the options above. I've edited the original question.

donv commented 10 months ago

If I understand the issue, I think the README has an answer:

https://github.com/bootstrap-ruby/bootstrap_form#selects

antonysastre commented 10 months ago

@donv Thanks, i re-read and found i missed having to put an hash param as third param. So this solved the issue. ✅

<%= f.select :client_id, options_from_collection_for_select(Client.all, :id, :name), {}, { class: 'form-select-sm' } %>

--

But while i'm here, i can't seem to find options to replace f.checkbox wrapper class. In my example i mentioned above the scenario is: <%= f.checkbox, wrapper_class: 'mb-0', switch: true %>

Produces the wrapper class: <div class="form-check mb-3 mb-1">…</div>

Is there way to force replacing classes, or is the go-to to create my own Form builder?

donv commented 10 months ago

But while i'm here, i can't seem to find options to replace f.checkbox wrapper class. In my example i mentioned above the scenario is: <%= f.checkbox, wrapper_class: 'mb-0', switch: true %>

Produces the wrapper class: <div class="form-check mb-3 mb-1">…</div>

Is there way to force replacing classes, or is the go-to to create my own Form builder?

@antonysastre See https://github.com/bootstrap-ruby/bootstrap_form/pull/686