Home/ Questions/Q 8664855
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T17:20:25+00:00

I set the data icons for a collapsible set to be arrows via data-collapsed-icon=arrow-r

  • 0

I set the data icons for a collapsible set to be arrows via data-collapsed-icon=”arrow-r” data-expanded-icon=”arrow-l” which work, but kind of irrationally.

For starters, when viewed on iphone instead of collapsed showing a right arrow it shows a left arrow that’s almost not visible because its shifted to the right; when expanded on iphone its a well placed up arrow. ???

It displays fine in Chrome. https://www.ubat.com/mobile/test.html

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>

<script src="jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

<script type="text/javascript" src="//use.typekit.net/kxv5fxv.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>My Title</h1>
  </div>
  <!-- /header -->

  <div data-role="content">
    <p>Hello world</p>

    <div data-role="collapsible-set" data-iconpos="right" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-l">
      <div data-role="collapsible" data-collapsed="true" >
        <h3>Section 1</h3>
        <p>I'm the collapsible set content for section 1.</p>
      </div>
      <div data-role="collapsible" data-collapsed="true">
        <h3>Section 2</h3>
        <p>I'm the collapsible set content for section 2.</p>
      </div>
    </div>


  </div>
  <!-- /content --> 

</div>
<!-- /page -->

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You shouldn’t mix files of old and new versions of jQuery Mobile.

    Try this working example using version 1.2.0:

    <!DOCTYPE html>
<html>
<head>
<title>My page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script
    src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
<div data-role="page">
  <div data-role="header">
    <h1>My Title</h1>
  </div>
  <!-- /header -->

  <div data-role="content">
    <p>Hello world</p>

    <div data-role="collapsible-set" data-iconpos="right" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-l">
      <div data-role="collapsible" data-collapsed="true" >
        <h3>Section 1</h3>
        <p>I'm the collapsible set content for section 1.</p>
      </div>
      <div data-role="collapsible" data-collapsed="true">
        <h3>Section 2</h3>
        <p>I'm the collapsible set content for section 2.</p>
      </div>
    </div>


  </div>
  <!-- /content --> 

</div>
<!-- /page -->

</body>
</html>

    On iPhone 5:

    1

    On Firefox:

    2

    There shouldn’t be any data icon placement problem.

    • 0