Comments (16)
@UweKubosch @thimo This is a really interesting find. It makes me think that we've put the input-group
class in the wrong place up until now. I'm going to put together a PR that I believe will fix this, but I suspect it's going to change a lot of test cases. If you have a chance, take a look at this issue and what it would take to fix it. Maybe you'll find something better than what I'm going to do.
from bootstrap_form.
input-group
only has 41 occurrences in the project, of which 24 in 2 specs and 12 in the README. So I think it's not going to be too much of a hassle to change. Please let me know if there's something that I can do to help.
from bootstrap_form.
I wonder about changing the HTML. As I read it, we need to move the input-group
to the <div class='mb-3'>
that's more or less the Bootstrap 5 equivalent of the Bootstrap 4 form-group
. Do you think we would cause too much pain if we change the HTML? I think it's justifiable that we're fixing a bug and sorry if you relied on our mark-up, but I'm interested in what others think.
At the very least I realized we should document more clearly that we reserve the right to change the HTML when we realize that we've made a mistake in interpreting how we're supposed to use Bootstrap.
from bootstrap_form.
Ah yes, didn't consider possibly breaking existing apps. Can we include this as a "breaking change" in the next minor release, probably 5.2? Then document why and what the impact is. I would think we at most would break a bit of CSS, but that's a dangerous assumption. Still I think we should fix this.
from bootstrap_form.
Yes, I agree that's it's actually "broken" and needs to be fixed. I guess that's the nature of CSS that when we fix something, someone might have written some CSS that won't work after our fix. But so be it. Thanks for your input!
from bootstrap_form.
Hello,
Is it going to be changed accordigly to support input groups inside floating labels ?
Thanks
from bootstrap_form.
Yes, @shivam091 it's being worked on. It requires some non-trivial changes to the way the code is organized internally. If you would like to try putting together a PR to fix this, let us know. Otherwise, we appreciate your patience.
from bootstrap_form.
I have tried it in my way by cloning the gem.
Few changes I have done are as follows which gives me desired output but It's achived by editing entire structure of the code which you added for rendering the field.
Let's take example for password_field
def form_group(*args, &block)
options = args.extract_options!
attribute_name = args.first
form_group_classes = form_group_classes(options)
label = generate_label(options[:id], attribute_name, options[:label], options[:label_col], options[:layout], options[:floating])
help_text = generate_help(attribute_name, options[:help_text])
options[:class] = form_group_classes if form_group_classes.present?
if group_layout_horizontal?(options[:layout])
prepend_and_append_input(attribute_name, options) do
concat(label) << tag.div(capture(&block) + help_text, class: form_group_control_class(options))
end
elsif options[:floating]
tag.dl(**form_group_attrs(options)) do
concat(prepend_and_append_input(attribute_name, options) do
concat(tag.div(class: "form-floating") do
concat(capture(&block))
concat(label)
end)
end)
concat(help_text)
end
else
tag.dl(**form_group_attrs(options)) do
concat(label)
concat(prepend_and_append_input(attribute_name, options) do
capture(&block)
end)
concat(help_text)
end
end
end
def password_field(attribute_name, options = {})
label_options = options.fetch(:label, {})
form_group_builder(attribute_name, options) do
options[:placeholder] ||= label_text(attribute_name, label_options) if options.delete(:floating)
super(attribute_name, options)
end
end
= form.password_field :password, data: {secret_reveal_target: "input"}, floating: true, input_group: {append: password_reveal_button}
Removed unused form_group_content(label, help_text, options, &block)
from form_group.rb
from bootstrap_form.
The above are major tweaks I have added in for getting the output but it might have some other breaks which I need to check and fix @lcreid
from bootstrap_form.
Thanks for this. You're in the right area all right. If you'd like to submit a pull request, I can review it. Check out our Contributing document. I have made some progress but I won't be able to finish anything before the weekend.
from bootstrap_form.
Yes I will try. I am not having idea on writing test cases therfore I may also require some amount of time. I try my best to submit the PR.
Thank you
from bootstrap_form.
Thanks for giving this a go, @shivam091 If you're struggling to get all the tests working, I have something that I think is working. The existing code didn't make this change easy. If you want to continue with the PR, I suggest that you create a draft with just the tests, so we can agree on what the new HTML should look like.
from bootstrap_form.
Yes @lcreid, I check it and try to submit tests asap.
from bootstrap_form.
<div class="input-group">
<span class="input-group-text">@</span>
<div class="form-floating ">
<input class="form-control" placeholder="Password" type="password" name="user[password]" id="user_password">
<label class="required" for="user_password">Password</label>
</div>
<span class="input-group-text">@</span>
</div>
This markup is generated with my changes which I thing perfext according to Bootstrap 5.2 upgrades.
NOTE - I considered upgrading bootstrap to 5.2 because styles required for input groups and floating labels for a element was missing in 5.0 5.1 versions.
from bootstrap_form.
I think that HTML will work. However, be sure to try it with the prepend
and append
options, too.
This JSFiddle shows the difference between the OP's solution and yours: https://jsfiddle.net/qhem392r/4/.
Nice find about the versions. We'll may have to change the installation instructions so people use the right version of Bootstrap.
from bootstrap_form.
I am taking a look at this issue now.
from bootstrap_form.
Related Issues (20)
- Option to provide `is-invalid` class to labels along with fields HOT 1
- Range control has wrong class HOT 5
- Release version 5.2.0 HOT 8
- Need to include ActiveRecord::Reflection for custom form class with 5.2.0 HOT 1
- Rename the default layout to "vertical" ? HOT 2
- Can't disable number_field HOT 3
- DEPRECATION WARNING: Calling `<<` to an ActiveModel::Errors message array in order to add an error is deprecated HOT 3
- [Rails 7.1] Association Validator Keyed by Association Name
- Can't edit classes on input elements. HOT 5
- Release new version (5.3.0) HOT 2
- new version 5.3.0 - undefined method `arity' for HOT 4
- V 5.3.1 - Using ruby's %w() array shortcut in bootstrap_form_for statement causes 'ActionView::Template::Error:' HOT 6
- Generate System Test Baseline via GitHub Actions
- Some Examples May Be Failing
- `collection_check_boxes` does not work with Rails 6.1 HOT 3
- Lazy load ActionText helpers HOT 10
- Overriding form tag's 'control_col' not working for f.check_box (layout: :horizontal)
- Need to use plain method for visibility with bootstrap_form in Phlex Component HOT 2
- render problem HOT 3
- Update Gemfiles?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap_form.