Hello,
In my mobile app, I have an image that I need to be centered on iPhone 5 and BlackBerry Z10. I can center it for one or the other by adjusting the image dimensions and/or margins, but seeing as they have different pixel dimensions, I can't seem to make the image centered on both devices.
I have a feeling there's a quick, easy fix for this but I'm just not seeing it.
Thanks,
Cameron
I used CSS in the page load even handler. Note that it's the DIV containing the image that needs manipulation, not the image itself.
$('.mobileimage8_div').css('margin', 'auto');
$('.mobileimage8_div').css('align', 'center');
$('.mobileimage9_div').css('margin', 'auto');
$('.mobileimage9_div').css('align', 'center');
-- peter
Hi Peter,
Thanks for the reply. I can't seem to find the 'div containing the image' in the OE mobile app builder. I've also tried adding the code you've provided, but the image still isn't centered. Can you offer any more specific instruction?
Cheers,
Cameron
It's a hidden/generated one. I think the name matches to "_div" so you could try that first.
I'm relatively sure I found that out in the appery.io doc somewhere but I'll have to dig around to be sure.
-- peter
I've tried a few things, including creating this CSS class and making it the class for the image:
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
}
It seems to me that the pixel dimensions and margins of the image are overriding any JS code or CSS class, because the JS and CSS I've tried has had no effect on the image. Can anyone confirm this for me, and/or offer a solution?
I've found a solution. I found out the image was being centered, but my image dimensions were too big for the centering to work as I wanted it to. I just had to make my image a bit smaller and include the JS code from this page: http://docs.appery.io/documentation/app-builder/building-mobile-ui/#Centering_a_component_for_device_rotation
Cheers,
Cameron