-
Notifications
You must be signed in to change notification settings - Fork 86
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Input's with horizontal-form class #22
Comments
Hi @kyse htmlClass should apply to the container div and fieldHtmlClass should be added to the input itself, unfortunately as I don't use bootstrap myself I need your help with understanding what else needs to change in the generated html if you have time to show me please? |
Add col-md-12 to a field class of a text box. Add a horizontal-form class to the form element. Your goal is to display the label and field inline. The purpose of using col-md-12 is to control the width of the field element. You'll notice the sizing doesn't work properly. The field element needs to be wrapped in a Div that has the col-md-12 class instead. Since the text input elements width is set to 100% the idea is to have it 100% of the containing element width which is set by the bootstrap grid classes. |
@kyse, out of interest, have you even managed to get:
Working at all? |
Yep, basically overwrote their templates in the bootstrap decorator to wrap input elements with div's containing a horizontalClass form binding. |
Is there value in doing a PR for that? Does it break anything if you don't do horizontal forms? |
I have the same problem.
How did you do to overwrite their templates? I've tried with no luck I never overwrited a template in Angularjs |
I basically created a file to overwrite the templateCache.
|
It worked properly Thanks! |
It will be merged? It would be nice so we don't have to maintain an extra file. The bootstrap input really needs an wrapper no matter if we'll use it for horizontal alignment or will be an empty div. |
@kyse Could you please take a look into this plunk, I am not able to apply the solution provided by you. |
Hi, What you can do is basically add your own template to the bootstrap decorator like described here. For my problem, my solution was to add a new radios-multiple-inline (sounds weird, I don't assume that...) to the decorator, wrapping each radios labelled inside a div and adding a "wrapperHtmlClass" property to the previous radios-inline in order to manipulate each radios :
The result is like that :
And called like that :
Or even like that :
Hope it helps. EDIT:
|
Can't set input widths using the grid classes per bootstrap documentation when using the horizontal-form class. As form-control class sets width to 100%, this overrides any grid class widths. Bootstrap documentation shows the need to wrap the input in a div. That way we can leave form-control at 100%. And I guess(?) allow a form def option to specify the class for this div, ie col-md-6. Can't set width to auto as that just brings up the need to reinvent the grid classes to apply to the input otherwise.
The text was updated successfully, but these errors were encountered: