This is a migrated thread and some comments may be shown as answers.

Set background image with Kendo Mobile buttons

2 Answers 336 Views
Button (Mobile)
This is a migrated thread and some comments may be shown as answers.
Derrick
Top achievements
Rank 1
Derrick asked on 19 Aug 2013, 06:19 PM
Hi,


I am creating a Kendo Mobile SPA, but would like to separate the views into their own html files because there will be more than a few views.  So I am using remote views.


With remote views, it looks like that in order for the <a> tag to work you need to supply it with a Kendo Mobile data-role either a button, tab strip or list.  Examples:


<ul data-role="listview" data-style="inset" data-type="group">
            <li>Sources
                <ul>
                    <li><a href="#secondview">Local View</a></li>
                    <li><a href="remoteview.html">Remote View</a></li>
                </ul>
            </li>
        </ul>


Or


 <a href="remoteview.html" data-role="button">Remote View</a>




Just using a regular link to a remote view like this will not work (Without the data-role, Kendo Mobile doesn't know to handle this as an ajax call to a remote view and just loads the html like it's a whole new page):


<a href="remoteview.html">Remote View</a>




I have images in my app that are touchable and will navigate to other views, so my idea to achieve the SPA with remote views is to use data-role of button and try to set the button background image to the image like this:


<a href="remoteview.html" data-role="button" style="background-color: white; color: black;"><img width="50%" src="images/Button.png" alt="image"><br/>Remote View</a>




Which doesn't work totally.  The first time the button is displayed the image is really small—this navigates correctly to the remote view, however you have to navigate and then go back to see the button have the correct size.  


Anyway, is there a better way to set a background image with the Kendo Mobile button?


Thanks,
Derrick

2 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 21 Aug 2013, 12:46 PM
Hi Derrick,

Thank you for getting in touch us.

In this help topic you will find information explaining how to use custom icons with background image:
An alternative approach would be not to use a button/tab strip/list but regular img element enhanced to touch component. In this way you will be able to catch the tap event and use the navigate method of the application to load the remote View.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Derrick
Top achievements
Rank 1
answered on 06 Nov 2013, 11:33 PM
Thanks for your reply Alexander, the navigate method you pointed out was a better approach.
Tags
Button (Mobile)
Asked by
Derrick
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Derrick
Top achievements
Rank 1
Share this question
or