2

I've never posted a question on here since I can usually find the answer, but this one has escaped me.

Have jQuery mobile version 1.3.2 along with the associated css file.

And since pictures are worth a million words, just take a look at what is happening.

http://s11.postimg.org/hojpomu4z/Image_8_20_13_at_3_52_PM.jpg

See the problem? Obviously the text from the data-icon attribute is displaying above the button.

My Personal Web Inspector nor Firebug are able to recognize that anything is there.

I've tried it on chrome, firefox, safari, and ie 9/10. Both mac and pc. Nothing.

I've tried the past 5 versions of jQuery mobile. Also have tried both jQuery 1.9 and 1.10

Using the hosted buttons images and my own button images.

I've stripped down the page to the point where its only the jQuery definitions with a button and it still does this. Even tried the jQuery files hosted on CDN.

There's really no other code to show except what is in the screenshot, as that's all there is going on. (ignore the class of new_round), it's blank.

I'm just hoping someone else has run into this problem and may be able to offer a solution.

(This isn't my first time using jQuery mobile, but this is the first time I've seen this happen.)

user2701249
  • 23
  • 3
  • So you just want icon without text? – user123_456 Aug 20 '13 at 20:13
  • Please embed the image in your post directly and add any relevant markup to your question. This question and any related answers become worthless when those outside links decay. – dc5 Aug 20 '13 at 20:23
  • Sorry, just started, not allowed to add images until I have higher reputation. For instance, Hey. Will show a button with a gear icon and the text **"Hey"** in their rightful locations. However, there is an additional text **"gear"** above the button. Happens to any element with data-icon defined. – user2701249 Aug 20 '13 at 21:21

2 Answers2

0

If you only need icon without text you need to add this as attribute inside your link:

data-iconpos="notext"

For example:

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
user123_456
  • 5,635
  • 26
  • 84
  • 140
  • Not quite the issue. I want the text. The text and button shows up perfect. However, the value of the data-icon attribute appears above the outputted button. In fact, any element with the data-icon shows that value (gear, home, arrow-l, etc..) above the element. It's very strange. – user2701249 Aug 20 '13 at 21:23
  • Perfect example: `Options` That could be anywhere on a page, in the header, footer, or content areas, and it will cause the value in "data-role" to display above the button. It's really weird. No other stylesheet or javascript. And it still happens. I was just hoping this has happened to someone else that may know what to do. – user2701249 Aug 22 '13 at 15:51
0

I run into the exact problem today and luckily found the solution.

I am using JQuery Mobile in a wordpress theme called Customizr. When I add a link like this:

<a data-icon="gear" data-role="button" href="#">Hey</a>

I will get a button with "gear" right above "Hey" as described by the PO.

That is because of this CSS rule hidden deep within the theme:

[data-icon]:before {
    content: attr(data-icon);
}

To solve this problem, simply override this rule with:

[data-icon]:before {
    content: "";
}

You may need to look for this rule in your CSS. Hope it helps.

Cang Luo
  • 16
  • 2