Page 1 of 1
Primefaces icons not shown when using Primefaces mobile
Posted: 31 Jul 2012, 16:37
by ket
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?
Re: Primefaces icons not shown when using Primefaces mobile
Posted: 31 Jul 2012, 16:41
by cagatay.civici
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.
Re: Primefaces icons not shown when using Primefaces mobile
Posted: 31 Jul 2012, 16:53
by ket
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..
Re: Primefaces icons not shown when using Primefaces mobile
Posted: 31 Jul 2012, 17:40
by ket
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
Re: Primefaces icons not shown when using Primefaces mobile
Posted: 01 Aug 2012, 11:30
by ket
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!
Re: Primefaces icons not shown when using Primefaces mobile
Posted: 08 Oct 2013, 17:38
by dss
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;
}
Re: Primefaces icons not shown when using Primefaces mobile
Posted: 07 Nov 2013, 12:14
by erum
I try with p:commandButton setting ajax=false and I have the same result, the login page is sowed again.