Geek Answers Handbook

Image in jQuery Mobile Header

I am trying to add an image to the title of my jQuery Mobile based webpage. I need the image to be right-aligned and using CSS for this purpose. But the results are not satisfactory. There is a large gap between the image and the edge, and it also does not match the title text. Here is the header code:

<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>

and here is the css code for line alignment:

  .align-right { float:right; margin-right: 5px; }
+8
jquery-mobile
source share
3 answers

No need to add a custom style or one. Jquery-Mobile already has built-in solutions for this. Just add the "ui-btn-left" or "ui-btn-right" class to your image (as if it were a button), and you're all set.

 <header data-role="header"> <h1>My App</h1> <img src="my_logo.png" class="ui-btn-right" /> </header>

I know that the question was asked earlier, but I decided that this could help those who are still looking for solutions. In addition, the question was not asked as an answer.

+26
source share

Based on your sample code, you need a space between the alt attribute and the class attribute.

You have:

 alt="Low resolution logo"class="align-right"

Must be:

 alt="Low resolution logo" class="align-right"

Also, it's probably best not to have the <img /> inside your <h1> element.

Check out the docs for more information on custom headers: http://jquerymobile.com/test/docs/toolbars/docs-headers.html

+3
source share

Something like this should work:

 <head> <style> body{ margin: 0; } .align-right{ float:right; margin-right: 0px;} </style> </head> <body> <div data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></div> </body>
+1
source share

More articles:


All Articles