Question
IP Australia
AU
Last activity: 9 Apr 2018 21:13 EDT
How to increase font size of the links for Mobile app
Hi,
I have a requirement to increase the font size of the Links only for Mobile app. I am trying to modify UserWorkform to add script, but it is not working.
<Script>
var ua=navigator.userAgent;
var isiOS = /iPhone/I.test(ua) || /ipad/i.test(ua);
$(document).ready(function() {
if(isiOS){
Link[for="property"]
{
font-size:20px;
}
}});
</script>
Accepted Solution
Pegasystems Inc.
IN
Hi ,
In the application skin check the break point and according to that apply the CSS.
The style A:link{font-size:18 px !important} should work , but make sure that you are writing this using a media query or it will take effect for the desktop also.
Pegasystems Inc.
US
You can add CSS via DOM manipulation. See this article...
https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript
However, I would suggest that you look into doing it through responsive CSS instead...
You can add custom CSS to the skin rule and it will be easier to find and maintain long-term.
- James
IP Australia
AU
Thanks James for the reply.
I created a custom CSS and included it in skin and used the CSS on field, i increased font size from 14 to 20px. But, it is not working on Mobile app. but the same is working on desktop. i am using iOS custom mobile app. do i have to do anything specific to Mobile app?
Thanks,
Mohammad
Accepted Solution
Pegasystems Inc.
IN
Hi ,
In the application skin check the break point and according to that apply the CSS.
The style A:link{font-size:18 px !important} should work , but make sure that you are writing this using a media query or it will take effect for the desktop also.
Pegasystems Inc.
IN
Hi ,
Then we need to debug the code.
reduce the size of the browser in the chrome or run in the browser in the mobile mode and check , that which style is overriding your style.
This should help you out.
Pegasystems Inc.
US
First, make sure there isn't a space between 18 and px in your code.
Second, you should add this to a css text rule in your skin.
Have you tried using chrome developer tools to inspect the DOM in your android app? https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
- James