CODEWITHSUNDEEP
jquerycssgoogle-chromefirefoxautocomplete
Smudger
Smudger

Reputation: 10809

jQuery autocomplete styling working in Chrome but not Firefox or IE

I have implemented a jquery auto complete input box on my web form.

it works perfectly across all platforms. my problem is that I am using jquery ui for styling. the javascript generated drop down list is styled correctly in chrome but in Firefox and IE it is a completely unstyled li list.

Why is this and how can I correct it?

Should there not be a reason, how can I generate my own styling for the li list and where should this style come from?

my head syntax is:

   <link href="<?php echo base_url() ?>application/css/ui-lightness/jquery-ui-1.8.custom.css" media="screen" type="text/stylesheet" rel="stylesheet">
   <script src="<?php echo base_url() ?>application/scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
   <script src="<?php echo base_url() ?>application/scripts/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
   <script src="<?php echo base_url() ?>application/scripts/customer_autocomplete.js" type="text/javascript"></script>

customer_autocomplete.js is simply :

$(function(){
  $("#customer").autocomplete({
    source: "sales_orders/get_customers" 
  });
});

an example image of each browser shown below, all exactly same code and header information.

firefox 13.1 firefox

IE 10 internet explorer

Chrome 25.0 google chrome

help appreciated as always

Rendered HTML

<html>
   <head>
      <title>
         test
      </title>
   <link rel='shortcut icon' type='image/x-icon' href='http://domain.com/application/assets/images/favicon.ico' />
   <meta name="viewport" content="width=device-width, initial-scale=1">      
   <script src="http://domain.com/application/scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
   <script src="http://domain.com/application/scripts/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
   <script src="http://domain.com/application/scripts/customer_autocomplete.js" type="text/javascript"></script> 
<link href="http://domain.com/application/css/ui-lightness/jquery-ui-1.8.custom.css" media="screen" type="text/stylesheet" rel="stylesheet">

   </head>
<body>
      <div  data-role="page"  data-theme="a">
      <div class="wrap-header">
         <div data-role="header" data-mini="true"  data-ajax="false">
            <a data-icon="grid" data-mini="true"  data-theme="a" onclick="window.location.href='/sales'">Menu</a>
            <h3>New Sales Order</h3>
         </div>
      </div>   
      <div data-role="content">

         <label for="customer">Customer</label>
         <input type="text" id="customer" name="customer"/>


      </div>

   </div>
</div>
 
</body>
</html>

The same issue applies even if my input is outside of any elements. so just in body.

I must also mention that this is a codeigniter app, not sure if that plays any part.

Thanks again.

Upvotes: 0

Views: 1760

Answers (1)

Ludo237
Ludo237

Reputation: 1717

The main problem is that you should set a background color (to white for example) to the dropdown men because it's in position absolute and you need to specify a background (and at least a z-index:1).

By the way provide some css and html to find out any problems.

Upvotes: 1

Related Questions