Community
cancel
Showing results for 
Search instead for 
Did you mean: 
Leonidas_S_
New Contributor I
34 Views

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

 

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...

 

Tags (2)
0 Kudos
10 Replies
Diego_Calp
Valued Contributor I
34 Views

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

 

0 Kudos
Leonidas_S_
New Contributor I
34 Views

using vh and vw units instead 

what are vh, vw 

can you give full example css rule...?

0 Kudos
Leonidas_S_
New Contributor I
34 Views

tried vw in css file but same thing

portrait phone NOT working

all others working (phone landscape and tablet)

what else to try????

0 Kudos
Diego_Calp
Valued Contributor I
34 Views

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

0 Kudos
Leonidas_S_
New Contributor I
34 Views

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>
       

 

0 Kudos
Leonidas_S_
New Contributor I
34 Views

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 ...???

0 Kudos
Leonidas_S_
New Contributor I
34 Views

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...? 

0 Kudos
PaulF_IntelCorp
Employee
34 Views

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.

0 Kudos
Leonidas_S_
New Contributor I
34 Views

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

0 Kudos
Leonidas_S_
New Contributor I
34 Views

I used divs with background imgs now working

0 Kudos