CODEWITHSUNDEEP
jqueryjquery-uijquery-mobile
Jelo Melo
Jelo Melo

Reputation: 52

how to handle data-icon in jquery mobile & jquery-ui?

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"/>

Upvotes: 0

Views: 1596

Answers (1)

Patricia
Patricia

Reputation: 7802

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>

Upvotes: 1

Related Questions