Home/ Questions/Q 7984375
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T11:15:03+00:00

I am using jquery mobile & for some auto complete functionality I am using

  • 0

I am using jquery mobile & for some auto complete functionality I am using jquery-ui, but the problem is that the icon(>) which is on my button & the icon(>) on my list item is not showing properly, instead its showing some weird icons. Any suggestions how to fix this?
enter image description here

<input type="submit" value="More" id="more" data-icon="arrow-d" data-iconpos="right" data-theme="b"/>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve read a lot about the ui auto complete not working to great in the mobile environment, I’m not sure entirely what’s going on with your button though, that looks weird.

    Does it look ok if you leave out the jquery ui styles?

    You could just do away with jquery ui’s auto complete and try this pluginI’ve been using it with some good success:
    http://www.andymatthews.net/code/autocomplete/

    edit: try switching the order that you are including your styles:
    put the jquery ui styles BEFORE the jquery mobile styles.

    EDIT:
    Ok, i just tested this locally and it worked: Put the jquery UI JAVASCRIPT before the jquery mobile javascript and it will be ok:

    here’s a full test page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css"/>


      <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>



  <style type='text/css'>
    body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
}


  </style>



<script type='text/javascript'>//<![CDATA[ 
$(function(){


});//]]>  

</script>


</head>
<body>
  <form>
    <div>
<input type="button" value="More" id="more" data-icon="arrow-d" data-iconpos="right" data-theme="b"/>
    </div>
</form>



</body>


</html>
    • 0