Geek Answers Handbook

The Javascript text reset button stops working in Bootstrap when I add my css. Any advice?

I have a piece of code that works fine until I turn on some css.

Here is a link to the code (the code editor didn’t like the script and html mix here and experienced my patience, sorry). Here you can view the Gist code snippet.

It uses bootstrap. The problem is that this works great (it displays text input with x to clear it, and when you press x, it clears the text input field). When I turn on ...

<!-- CSS --> <link href="css/app.css" rel="stylesheet">

but pressing x in the input field does nothing. Can anyone see any obvious reasons?

Without CSS, it included this well. With CSS enabled, it fails.

The css file is basically a massive file without compilation and may not be suitable for hosting the code here, so here it is in another gist link .

UPDATE: here are the console logs if this helps: enter the link here

+5
source share
2 answers

Incorrect locations of your links to javascript files and event handler code. You call $("#searchclear").click(..... before loading jQuery, and all related js files should be immediately before the closing body tag, not after it. Changing your html to the solution to this problem below:

Working demo

(note that I changed some links to reference versions of CDN files to avoid errors in my demo):

 <!DOCTYPE html> <!--[if IE 9 ]><html class="ie9"><![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>create appt</title> <!-- Vendor CSS --> <link href="vendors/animate-css/animate.min.css" rel="stylesheet"> <!-- CSS --> <link href="css/app.css" rel="stylesheet"> <!-- Following CSS codes are used only for specifics in this test--> <style type="text/css"> .margin-bottom > * { margin-bottom: 20px; } #searchclear { position: absolute; right: 5px; top: 0; bottom: 0; height: 14px; margin: auto; font-size: 14px; cursor: pointer; color: #ccc; } </style> </head> <body> <div class="btn-group"> <input id="searchinput" type="search" class="form-control" value="LUNCH"> <span id="searchclear" class="glyphicon glyphicon-remove-circle"></span> </div> <!-- Javascript Libraries --> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="vendors/nicescroll/jquery.nicescroll.min.js"></script> <script src="vendors/waves/waves.min.js"></script> <script src="vendors/bootstrap-growl/bootstrap-growl.min.js"></script> <script src="vendors/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script> <script src="vendors/sweet-alert/sweet-alert.min.js"></script> <script src="js/functions.js"></script> <script> $("#searchclear").click(function(){ $("#searchinput").val(''); }); </script> </body> </html>
+2
source 
 <!-- css --> <link href="css/app.css" rel="stylesheet" type="text/css">
-2
source

More articles:


All Articles