0

I always use an android 5.0 phone and an android 4.4 phone to test my apps. they always work. Yesterday, i found an android 4.3 phone and test my app with it. they are not working properly - Height (%). Then i did the same thing in an android 4.2 phone to find out if it can works. but it's the same. what can i do to fix it?

Lokin.S
  • 53
  • 1
  • 11
  • Possibly related: http://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work and http://quirksmode.org/css/mediaqueries/mobile.html – Morrison Chang May 17 '16 at 05:21
  • You may want to share code with screenshots as you'll need to be clear what you mean by `not working properly`. – Morrison Chang May 17 '16 at 05:39
  • i have read this post before [ stackoverflow.com/questions/5657964/…](http://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work) , buti don't think it my case. [quirksmode.org/css/mediaqueries/mobile.html](http://quirksmode.org/css/mediaqueries/mobile.html) i have set the viewport with meta... but it is not working. – Lokin.S May 17 '16 at 05:40

1 Answers1

0

I had that problem too, the size of a page and its content weren't known until the page was actually showed on the screen.

So what I did is to use the trigger custom event (with jquery): http://api.jquery.com/trigger/.

I bind rules with custom event in JS like (using the standard size of the screen):

$('body').on('custom_event:elements_loaded',{'fsContainer':fsContainer,'elementToCenter':elementToCenter,'zoneToCenterElementIn':zoneToCenterElementIn},function(event){

            fsContainerHeight = ViewManagementTools.getValueFromPixelSizeString($('#'+event.data.fsContainer).css('height'));
            elementToCenterHeight = ViewManagementTools.getValueFromPixelSizeString($('#'+event.data.elementToCenter).css('line-height'));

            ztceiChild = $('body').find('[id='+event.data.zoneToCenterElementIn +'] div');
            zoneToCenterElementInHeight = ViewManagementTools.getValueFromPixelSizeString($(ztceiChild).css('height'));

            marginToApply = (zoneToCenterElementInHeight - elementToCenterHeight)/2;
            $('#'+event.data.zoneToCenterElementIn).parent().css('height',zoneToCenterElementInHeight+'px');
            $('#'+event.data.elementToCenter).css('margin-top',marginToApply+'px');
            $('#'+event.data.elementToCenter).css('height',elementToCenterHeight);
            if(fsContainerHeight<=elementToCenterHeight){
                $('#'+event.data.fsContainer).css('height',elementToCenterHeight + 2*marginToApply);
            } else {
                marginToApply = (fsContainerHeight - elementToCenterHeight)/2;
                $('#'+event.data.elementToCenter).css('margin-top',marginToApply+'px');

            }
        });

And then when the page show, or even on deviceready if you use standard size of your screen to layout things, you can trigger the event:

        $('body').trigger('custom_event:elements_loaded');
nyluje
  • 3,573
  • 7
  • 37
  • 67