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

where is the little x to clear the input field ? #161

Closed
GDM70 opened this Issue Mar 7, 2016 · 8 comments

Comments

Projects
None yet
5 participants
@GDM70

GDM70 commented Mar 7, 2016

When I try one of the demonstration examples in my project everything works perfectly but when I combine it with the latest bootstrap version then the little x to clear the input field is no longer visible.

this is my index file

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="icon" href="img/favicon.ico">

    <title>My Project</title>

    <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="css/jquery.typeahead.css">
    <link type="text/css" rel="stylesheet" href="css/theme.css">

</head>

<body>

      ....

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

    <script src="js/bootstrap/bootstrap.js"></script>
    <script src="js/bootstrap/jquery.typeahead.js"></script>

</body>

when i remove the line

everything works fine

I use bootstrap 3.3.6 + JQuery Typeahead 2.3.4

Is this a known issue ?

@running-coder

This comment has been minimized.

Owner

running-coder commented Mar 7, 2016

hey,

it is from the bootstrap styles if I remember correctly, try removing this css

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
@running-coder

This comment has been minimized.

Owner

running-coder commented Mar 7, 2016

Also refers to #128

@running-coder

This comment has been minimized.

Owner

running-coder commented Mar 7, 2016

Added the following code on develop branch

.typeahead-field input[type="search"]::-webkit-search-cancel-button {
  /*Bootstrap 3 override*/
  -webkit-appearance: searchfield-cancel-button;
}

Works in Chrome and IE, Firefox never implemented the cancel button

@GDM70

This comment has been minimized.

GDM70 commented Mar 8, 2016

Thanks ! Now it works.

@episode17

This comment has been minimized.

episode17 commented Mar 8, 2016

¯\_(ツ)_/¯

running-coder added a commit that referenced this issue Mar 26, 2016

Version 2.4.0
Features
- #160 if onSubmit callback returns true, the form should be submitted with a regular browser submit
Fixes
- #166 Different browsers do not have the same behaviors when pressing "Esc" key when the input is focused
- #165 Submitting form with typeahead inside (hideLayout called multiple times)
- #161 Fixed missing X icon when using bootstrap css
Notes
- #170 jquery-typeahead as a npm package
- #169 Add basic unit tests
- Abandonned Dynamic Source Switching option. Would have to handle too many custom case, instead the sources should be loaded and a matcher function should be used

running-coder added a commit that referenced this issue Mar 26, 2016

Version 2.4.0
Features
- #160 if onSubmit callback returns true, the form should be submitted with a regular browser submit
Fixes
- #166 Different browsers do not have the same behaviors when pressing "Esc" key when the input is focused
- #165 Submitting form with typeahead inside (hideLayout called multiple times)
- #161 Fixed missing X icon when using bootstrap css
Notes
- #170 jquery-typeahead as a npm package
- #169 Add basic unit tests
- #148 Updated Typeahead AMD, please review requirejs_v1 example
- Abandonned Dynamic Source Switching option. Would have to handle too many custom case, instead the sources should be loaded and a matcher function should be used
@running-coder

This comment has been minimized.

Owner

running-coder commented Apr 5, 2016

you might want to have a look at the latest 2.5.0 version, a default cancel button has been added #174

@alemol

This comment has been minimized.

alemol commented Jul 5, 2018

I tried to run a minimal example with tags but the little x just does not appears. I followed all the recommendations and does not work. Does some one could post a full working snippet please?

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">

  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
  <link   rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/bootstrap/2.3.2/js/bootstrap.min.js" rel="stylesheet"></script>
  <script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>

  <style type="text/css">
    .typeahead-field input[type="search"]::-webkit-search-cancel-button {
      /*Bootstrap 3 override*/
      -webkit-appearance: searchfield-cancel-button;
    }
  </style>

</head>

<body>

<select multiple data-role="tagsinput">
  <option value="Amsterdam">Amsterdam</option>
  <option value="Washington">Washington</option>
  <option value="Sydney">Sydney</option>
  <option value="Beijing">Beijing</option>
  <option value="Cairo">Cairo</option>
</select>

</body>
</html>

Gives no errors but not the expected output Why??

screenshot from 2018-07-05 13-30-43

@tombertrand

This comment has been minimized.

Collaborator

tombertrand commented Jul 5, 2018

wrong project? this is not bootstrap typeahead

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment