CODEWITHSUNDEEP
jquery-uijquery-mobile
selladurai
selladurai

Reputation: 6779

Image in jQuery?

In my application, I use list to display the items. I have a web service result and i bind with list and adding image in to that list. so I used class as ui-li-icon but it comes with overlaps the value. see the image enter image description here

  listItem.innerHTML = "<img class='ui-li-icon' alt='No Image' src='"+ 
g_listOfBusinessDetails[i].imageURL +"'/><a href='#' 
data-role='button' data-theme ='e' id='" + i + "' rel='external' data-inline='true'>" +
 "<h3>"+ g_listOfBusinessDetails[i].name +"</h3>"+ "</a>";

Upvotes: 0

Views: 241

Answers (3)

Lakshmanan
Lakshmanan

Reputation: 1669

add style with margin-left to the text , style='margin-left:some pix or em value according to your image size'

change your code little bit like this

listItem.innerHTML = "<img src=" + g_listOfBusinessDetails[i].imageURL  + " class='ui-li-icon'></img><a href='#' data-role='button' id='" + i + "' data-theme ='c' rel='external' data-inline='true' style='margin-left:2em'  >" + g_listOfBusinessDetails[i].name + " </a><br><a href='#' data-role='button' id='' name='" + i + "' data-icon = arrow-r></a>";

Thanks.

Upvotes: 0

Digitz
Digitz

Reputation: 333

Giving the img a class of 'ui-li-icon' is absolute positioning it, which is why it is overlapping your current content.

Override that absolute positioning or move it to the far right by using 'right: 1px' or similar. You can also give it your own class and style it manually.

Are you floating the anchor tag?

Upvotes: 2

moe
moe

Reputation: 29704

My solution would be to remove the img tags, instead give the h3 tag a classname based on the response you get (or set its background via style) and control the rest with css.

The img doesnt belong there :-)

Upvotes: 2

Related Questions