Skip to content
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.

Sign up for GitHub

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

Jump to bottom

.form-control-feedback misplaced by 25 px #16285

Closed
spruce opened this issue Apr 14, 2015 · 11 comments
Closed

.form-control-feedback misplaced by 25 px #16285

spruce opened this issue Apr 14, 2015 · 11 comments
Labels
css

Comments

@spruce
Copy link

spruce commented Apr 14, 2015

Hello,
I use in one of my projects bootstrap version ("bootstrap": "~3.2.0") and wanted to upgrade to the new version ("bootstrap": "~3.3.4"). But the form-control-feedback icons are replaced by 25 px. In the versions before was a css selector which removed that (form-horizontal .has-feedback .form-control-feedback { top: 0; right: 15px; })

Am I doing anything wrong?

Included is an example how I use it.

<form id="ember756" class="ember-view form-horizontal" role="form">
  <div id="ember778" class="ember-view form-group has-feedback has-error">
    <label id="ember826" class="ember-view control-label col-sm-2">Full Name</label>
    <div class="col-sm-10">
      <input id="ember971" class="ember-view ember-text-field form-control" placeholder="Enter a name..."></div>
      <span class="form-control-feedback"><i class="fa fa-times"></i></span>
      <span id="ember960" class="ember-view help-block col-sm-offset-2 col-sm-10">is too short (minimum is 5 characters)</span>
    </div>
  </div>
</form>
@cvrebert cvrebert added the css label Apr 14, 2015
@cvrebert
Copy link
Collaborator

Please post a JS Fiddle or JS Bin of your example.

@spruce
Copy link
Author

spruce commented Apr 14, 2015

Hey,
I forgot to do that here it is:
http://jsbin.com/layumotipu/2/edit?html,output
Strangly there is no icon showing (I forgot to include sth. but thats not the matter) so I added a simple x which is misplaced like the original glyphicon.

@twbs-lmvtfy
Copy link

Hi @spruce!

You appear to have posted a live example (http://jsbin.com/layumotipu/2/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

  • line 21, column 11 thru line 21, column 16: End tag div seen, but there were open elements.
  • line 13, column 9 thru line 13, column 75: Unclosed element form.
  • line 22, column 9 thru line 22, column 15: Stray end tag form.
  • line 24, column 1 thru line 24, column 6: Stray end tag div.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@spruce
Copy link
Author

spruce commented Apr 14, 2015

Nice bot 👍
New version: http://jsbin.com/layumotipu/3/edit

@twbs-lmvtfy
Copy link

Hi @spruce!

You appear to have posted a live example (http://jsbin.com/layumotipu/3/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • line 15, column 13: E013: Only columns (.col-*-*) may be children of .rows
  • line 19, column 25: E042: .form-control cannot be used on non-textual <input>s, such as those whose type is: file, checkbox, radio, range, button
  • W002: <head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes
  • W003: <head> is missing viewport <meta> tag that enables responsiveness
  • line 6, column 5: W013: Bootstrap version might be outdated. Latest version is at least 3.3.4 ; saw what appears to be usage of Bootstrap 3.3.2
  • line 7, column 5: W013: Bootstrap version might be outdated. Latest version is at least 3.3.4 ; saw what appears to be usage of Bootstrap 3.3.2

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@spruce
Copy link
Author

spruce commented Apr 14, 2015

Next iteration:
http://jsbin.com/layumotipu/4/edit

@twbs-lmvtfy
Copy link

Hi @spruce!

You appear to have posted a live example (http://jsbin.com/layumotipu/4/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • W002: <head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes
  • W003: <head> is missing viewport <meta> tag that enables responsiveness

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@spruce
Copy link
Author

spruce commented Apr 14, 2015

Hopefully now it works:
http://jsbin.com/layumotipu/5/edit

Working example with old version on http://piceatech.github.io/ember-rapid-forms/#/overview

@spruce spruce mentioned this issue Apr 14, 2015
Open
@cvrebert
Copy link
Collaborator

Bootstrap doesn't integrate with Font Awesome; we include Glyphicons instead. See http://getbootstrap.com/components/
Please change your example to use Glyphicons instead of Font Awesome.

@spruce
Copy link
Author

spruce commented Apr 16, 2015

Now it magically works...
updated version: http://jsbin.com/wujujo/2/edit

@cvrebert
Copy link
Collaborator

Closing this then, since we can't help with third-party stuff such as Font Awesome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cvrebert @spruce @twbs-lmvtfy