implement (used car app) add to fav (a car) but icon size view broke/shrinked in phone portrait, problem

[Leonidas_S_]

I find one error in xdk - localstorage Not saved between open / close emulator

https://software.intel.com/en-us/forums/intel-xdk/topic/685038#comment-1884052

...

Also see this error here -- trying implement (used car app) add to fav (a car) but icon size view broke/shrinked in phone portrait, problem , well ?

div#addFavDiv a img {
    margin-top: 15px;
    margin-bottom: 10px;
    width:24px !important; 
    height:24px !important;
}

see attachment

In landscape phone or in tablet (both layouts) Not a problem .... 

any hint...

[Diego_Calp]

Hello,

I had a similar problem with graphic button, I solved it using vh and vw units instead of px for widht and height. This is for the image container.

Be sure also that the star image is square.

Regards,

Diego

[Leonidas_S_]

using vh and vw units instead 

what are vh, vw 

can you give full example css rule...?

[Leonidas_S_]

tried vw in css file but same thing

portrait phone NOT working

all others working (phone landscape and tablet)

what else to try????

[Diego_Calp]

Could you post the html that contains the star image and the text Add to favorites?

[Leonidas_S_]

here is: Bootstrap 3.5 mobile app // XDK  

 <div id="addFavDiv"></div>  

$('div#addFavDiv').html('<a onclick="AddToFavCars();"><img src="imgs/NoFav.png" alt="add to fav" /> Add to Favorites</a>');

here ^^^ in below

    <div id="carDetails" style="display:none; margin-top:20px; margin-bottom:10px;" class="mainbox col-md-12 col-sm-12 col-xs-12">
                    
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <div class="panel-title tit2" style="text-decoration: none;">Placeholder Car ID</div>
                            <div style="float:right; font-size: 95%; position: relative; top:-10px" class="font120perCentUpper600px" id="signinlinkDiv"><a id="signinlink4" href="#">Go Back to List</a></div>
                            <div style="float:right; font-size: 95%; position: relative; top:-10px; display:none" class="font120perCentUpper600px" id="signinlink3Div"><a id="signinlink3" href="#">Home</a></div>
                        </div>  
                        <div class="panel-body" style="margin:0; padding:0;">
                            <div class="table-responsive">
                              <table class="table" style="margin:0; padding:0; width:100%;">
                              </table>
                            </div>
                            <div id="infoMoreContainer">
                                <div id="addFavDiv"></div>  
                                
                                <br/>More Info
                                <div id="infoMore"></div>
                            </div>    
                            
                            <div id="imgMain" style="text-align:center; margin-top:20px;"></div>
                            
                            
                            <form>
             
                                <div class="col-md-12 text-center" style="margin-top:20px;" id="socialsIndividualCar">
                                    Share this Car in:<div id="hpButtonsDivClear"></div>
                                    <ul class="social-network social-circle">
                                        <li><a class="DeviceShare icoRss" title="Device Sharing"><i class="fa fa-share-alt"></i></a></li>
                                        <li><a class="FacebookShare icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
                                        <li><a class="TwitterShare icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                                        <li><a class="InstagramShare icoInstagram" title="Instagram"><i class="fa fa-instagram"></i></a></li>
                                        <li><a class="WhatsAppShare icoWhatsApp" title="WhatsApp"><i class="fa fa-whatsapp"></i></a></li>
                                    </ul>				
                                </div>
       

[Leonidas_S_]

I tested on device and again the two icons added recently

add to fav

delete fav

seem shrinked - this error ONLY in Portrait only in Phone... is any bug in xdk ...???

[Leonidas_S_]

for your ref see again the attachment

please reply - what's the solution...? I doubt this is my error... why then ALL expect Portrait phone appear this...? 

[PaulF_IntelCorp]

Leonidas -- the XDK has no bearing on how your HTML5 code renders, that is 100% dependent on the device and the webview in that device, the XDK has no control over it. We do provide the Crosswalk build option so you can replace the webview in your Android devices, because Android webviews are unreliable and inconsistent. If you are building without the Crosswalk option checked I encourage you to select Crosswalk to see if the app renders correctly. It will also allow you to try vh and vw again, since those CSS units are not supported in older Android devices.

[Leonidas_S_]

why then ONLY but ONLY phone portrait this...is not reasonable... when will be NEXT Update of XDK...? 

[Leonidas_S_]

I used divs with background imgs now working