Note that there are some explanatory texts on larger screens.

plurals
  1. POMobile theme formatting issue
    primarykey
    data
    text
    <p>While working on my first mobile app, I noticed that when I access the site and hover my mouse on each list, the link shadow does not cover the width of the displayed lists. Please see image link which shows a gap at the bottom on mouse hover:</p> <p><img src="https://i.stack.imgur.com/A3XJC.png" alt="http://howtodeployit.com/wp-content/uploads/2013/09/img01.png"></p> <p>I noticed when I use the following scripts:</p> <pre><code>&lt;link href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" type="text/css" rel="stylesheet" /&gt; &lt;script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"&gt;&lt;/script&gt; </code></pre> <p>Combined with: </p> <p>Everything looks fine without any gap but the issue with this is when nI click on each link, my home botton icon displays a + sign rather than a "home" sign eventhough my 'data-icon="home"'.</p> <p>When I change the scripts to anything higher than 'jquery.mobile-1.0a2.min.css' and 'jquery.mobile-1.0a2.min.js', the home botton displays correctly but the gap issue occurs.</p> <p>Anyone with a possible workaround on this?</p> <pre><code>var postlimit = 10; document.write( '&lt;div data-role="page" id="list"&gt;' + ' &lt;div data-role="header" data-position="fixed" data-theme="c"&gt;' + ' &lt;h1&gt;&lt;span class="hd"&gt;My First App&lt;/span&gt;&lt;/h1&gt;' + ' &lt;/div&gt;' + ' &lt;div data-role="content"&gt;' + ' &lt;div data-role="listview" data-filter="true" id="articleList" &gt;' ); for(var i=1; i&lt;=postlimit; i++){ document.write( '&lt;li id="list' + i + '"&gt;&lt;a class="atcss" '+' href="#article' + i + '" id="link' + i + '"&gt;&lt;/a&gt;&lt;/a&gt;' + ' &lt;p class="adcss"&gt;Date: &lt;span id="articleDate' + i + '"&gt;&lt;/span&gt;' + ' &lt;p class="apcss"&gt;By: &lt;class="author"&gt;Sysadmin&lt;/p&gt;' + '&lt;/li&gt;' ) }; document.write( ' &lt;/div&gt;' + ' &lt;/div&gt;' + '&lt;/div&gt;' ); for(i=1; i&lt;=postlimit; i++){ document.write( '&lt;div data-role="page" id="article' + i + '"&gt;' + ' &lt;div data-role="header" data-position="inline" data-theme="c"&gt;' + ' &lt;a href="#list" data-role="button" data-icon="gear" data-back="true"&gt;Home&lt;/a&gt;' + ' &lt;h1 id="articleHeader' + i + '"&gt;&amp;nbsp;&lt;/h1&gt;' + // ' &lt;a href="#" id="openButton' + i + '" data-role="button" data-icon="plus"' + // ' class="ui-btn-right" rel="external"&gt;Open&lt;/a&gt;' + ' &lt;/div&gt;' + ' &lt;div data-role="content"&gt;' + ' &lt;div id="articleContent' + i + '" class="articleContent"&gt;&lt;/div&gt;' + ' &lt;div data-role="controlgroup" data-type="horizontal"&gt;' + ' &lt;a href="#article' + String(i-1) + '" data-role="button" data-icon="arrow-l"' + ' data-inline="true" class="prevButton"&gt;Prev&lt;/a&gt;' + ' &lt;a href="#article' + String(i+1) + '" data-role="button" data-icon="arrow-r"' + ' data-inline="true" class="nextButton" data-iconpos="right"&gt;Next&lt;/a&gt;' + ' &lt;/div&gt;' + ' &lt;/div&gt;' + '&lt;/div&gt;' ) }; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload