Primefaces icons not shown when using Primefaces mobile

UI Components for JSF
Post Reply
ket
Posts: 4
Joined: 31 Jul 2012, 16:24

31 Jul 2012, 16:37

If I use primefaces only I have access to all icons that are bundled with primefaces. Hoever if I add primefaces mobile then I have only access to primefaces mobile icons and the "old" icons of primefaces are not longer shown. This should be after the following page possible with only the use of jquery and jquery mobile:

http://www.andymatthews.net/code/jQuery ... index.html

For demonstration purposes I just want mention the two following links:
1) http://www.hascode.com/2012/01/create-m ... es-mobile/
If you go down on the page you'll find an calendar component. If you look closer at the image you will find two plus (+) symbols instead of the icons < and >.
2)http://thomkerle.blogspot.ch/2012/07/pr ... r-and.html

The second example is from myself and I tried to integrate the fullcalendar (which uses icons from jquery standard css) with mobile components. It's not possible to integrate with primefaces the two icons sets.

My question: Have I something done wrong?

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

31 Jul 2012, 16:41

jQuery Mobile has a Mobile Themeroller which surpasses desktop ThemeRoller. I think that's the reason. Not all components are mobile optimized, e.g. calendar.

This is expected.

ket
Posts: 4
Joined: 31 Jul 2012, 16:24

31 Jul 2012, 16:53

Hi Optimus Prime - Thanks for your fast reply but...
I'm not so shure about: I think if I take for example a <p:commandButton> - and the command button is often used in mobile applications - then the command button allows to set the icon. If you add primefaces mobile this is no longer possible (or even worser you get a wrong icon). After the first link I mentioned this should be alway possible also for other jquery components to have access to the basic icon set. Until know I have no other solution as to add command links where you can set explicitly the image. I think this is really related to primefaces. I will now try to make an example with jquery and jquery mobile where both components will be used...
Hope this will give us more progress on this subject..

ket
Posts: 4
Joined: 31 Jul 2012, 16:24

31 Jul 2012, 17:40

Optimus Prime you was 100% right! I just tried out it with pure jQuery. It doesn't work.
Thanks for your answer:

http://thomkerle.blogspot.ch/2012/07/jq ... query.html

ket
Posts: 4
Joined: 31 Jul 2012, 16:24

01 Aug 2012, 11:30

In fact I have now found a workaround to modify the icons with jquery to use the schedule component on mobile devices:
First: Don't try to overwrite with

Code: Select all

$(document).ready(function(){
  $('.ui-icon.ui-icon-circle-triangle-e').css('background-image', 'url(images/back.png)');
});
This approach doesn't work because the jquery mobile components are visible before the scheduler is visible (the scheduler is ready but not rendered!).

Solution: I fire an ajax event on the schedule component and there I change the css with jquery:

Code: Select all

$(document).ready(function() {
	 $("#absenceScheduleDay").ajaxSend(function(r, s) {
        $('.ui-icon.ui-icon-circle-triangle-e').css('background-image', 'url(images/back.png)');
    });
	
});
This works fine and the schedule component can be used with basic events (no special events for mobile devices) on mobile phones! :D

dss
Posts: 4
Joined: 02 Oct 2013, 19:26

08 Oct 2013, 17:38

Hello, I have a workaround to set the icons of calendar to < and >. Here go my solution:
You just need to add this css to your page... tell me if this work for you...

Note: Change in the url <sgcc-web-app> by your project name.

Code: Select all

/*icon > */
#ui-datepicker-div .ui-icon-circle-triangle-w {
	background-image:
		url("/sgcc-web-app/javax.faces.resource/images/icons-18-white.png.jsf?ln=primefaces-mobile");
	background-position: -144px 40%;
	width: 18px;
	height: 18px;
}

/*icon < */
#ui-datepicker-div .ui-icon-circle-triangle-e {
	background-image:
		url("/sgcc-web-app/javax.faces.resource/images/icons-18-white.png.jsf?ln=primefaces-mobile");
	background-position: -108px 70%;
	width: 18px;
	height: 18px;
}

erum
Posts: 1
Joined: 07 Nov 2013, 12:13

07 Nov 2013, 12:14

I try with p:commandButton setting ajax=false and I have the same result, the login page is sowed again.
100% pass guarantee click here to visit website and visit site now.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 13 guests