w3 CSS/Javascript issue on Android Chrome

ideasvacuum · July 24, 2020

So, I have found using w3 CSS responsive to be brilliant for mobile. However, I just hit an issue where all is well on desktop Browsers (all the big names) but, although everything goes where it should initially on a mobile (Chrome, Android9, Samsung s8), the slideshow, when scrolled into view by the User, goes mostly out of view when the slide is auto-changed.

This is an ugly demo of the issue:

testmobile.html

Has anyone seen this before? Is there an easy (and painless) fix?

ideasvacuum · July 26, 2020

contents of testmobile.html:

<!DOCTYPE html>
<html>
         <head>

               <title>test_mobile</title>                                                                                                      
                                                                                                                                               
               <meta charset="utf-8">                                                                                                          
               <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=10.0, user-scalable=yes">

               <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

               <style>
                          body {margin: 6px; width: 100%;}
                          body {background-color: #FAFAFA;}
                         table {table-layout: auto;}
                         table {font-family: Arial, Helvetica, sans-serif;}
                         table {border-collapse: collapse;}
                         table .absorbing-column {width: 96%;}
                            tr {border: 1px solid; border color: #000000;}
                            tr :hover {background-color: #FFFF80;}
                            td {font-size: 14px;}
                            td {color: #f0f8ffff;}
                            td {vertical-align: middle;}
                            td {padding: 6px;}
                            td {border: 1px solid;}
                            td {border-color: #000000;}
               </style>
         </head>

         <body>
                    <div class="w3-row">

                              <div class="w3-third w3-panel w3-blue-grey">

                              <table>
                                        <tr><td style="text-align:center">01111</td><td>AAAAAAAAAA</td></tr>
                                        <tr><td style="text-align:center">02222</td><td>BBBBBBBBBB</td></tr>
                                        <tr><td style="text-align:center">03333</td><td>CCCCCCCCCC</td></tr>
                                        <tr><td style="text-align:center">04444</td><td>DDDDDDDDDD</td></tr>
                                        <tr><td style="text-align:center">05555</td><td>EEEEEEEEEE</td></tr>
                                        <tr><td style="text-align:center">06666</td><td>FFFFFFFFFF</td></tr>
                                        <tr><td style="text-align:center">07777</td><td>GGGGGGGGGG</td></tr>
                                        <tr><td style="text-align:center">08888</td><td>HHHHHHHHHH</td></tr>
                                        <tr><td style="text-align:center">09999</td><td>BBBBBBBBBB</td></tr>
                                        <tr><td style="text-align:center">11110</td><td>CCCCCCCCCC</td></tr>
                                        <tr><td style="text-align:center">12221</td><td>DDDDDDDDDD</td></tr>
                                        <tr><td style="text-align:center">13332</td><td>EEEEEEEEEE</td></tr>
                                        <tr><td style="text-align:center">14443</td><td>FFFFFFFFFF</td></tr>
                                        <tr><td style="text-align:center">15554</td><td>GGGGGGGGGG</td></tr>
                                        <tr><td style="text-align:center">16665</td><td>HHHHHHHHHH</td></tr>
                                        <tr><td style="text-align:center">17776</td><td>XXXXXXXXXX</td></tr>
                                        <tr><td style="text-align:center">18887</td><td>YYYYYYYYYY</td></tr>
                                        <tr><td style="text-align:center">19998</td><td>ZZZZZZZZZZ</td></tr>
                                        <tr><td style="text-align:center">01111</td><td>AAAAAAAAAA</td></tr>
                                        <tr><td style="text-align:center">02222</td><td>BBBBBBBBBB</td></tr>
                                        <tr><td style="text-align:center">03333</td><td>CCCCCCCCCC</td></tr>
                                        <tr><td style="text-align:center">04444</td><td>DDDDDDDDDD</td></tr>
                                        <tr><td style="text-align:center">05555</td><td>EEEEEEEEEE</td></tr>
                                        <tr><td style="text-align:center">06666</td><td>FFFFFFFFFF</td></tr>
                                        <tr><td style="text-align:center">07777</td><td>GGGGGGGGGG</td></tr>
                                        <tr><td style="text-align:center">08888</td><td>HHHHHHHHHH</td></tr>
                                        <tr><td style="text-align:center">09999</td><td>BBBBBBBBBB</td></tr>
                                        <tr><td style="text-align:center">11110</td><td>CCCCCCCCCC</td></tr>
                                        <tr><td style="text-align:center">12221</td><td>DDDDDDDDDD</td></tr>
                                        <tr><td style="text-align:center">13332</td><td>EEEEEEEEEE</td></tr>
                                        <tr><td style="text-align:center">14443</td><td>FFFFFFFFFF</td></tr>
                                        <tr><td style="text-align:center">15554</td><td>GGGGGGGGGG</td></tr>
                                        <tr><td style="text-align:center">16665</td><td>HHHHHHHHHH</td></tr>
                                        <tr><td style="text-align:center">17776</td><td>XXXXXXXXXX</td></tr>
                                        <tr><td style="text-align:center">18887</td><td>YYYYYYYYYY</td></tr>
                                        <tr><td style="text-align:center">19998</td><td>ZZZZZZZZZZ</td></tr>
                              </table>
                              </div>
                              <br>

                              <div class="w3-third w3-panel w3-mobile">

                                        <img class="mySlides w3-animate-right" src="Data:image/png;base64,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" style="width:296px">
                                        <img class="mySlides w3-animate-right" src="Data:image/png;base64,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" style="width:296px">
                                        <img class="mySlides w3-animate-right" src="Data:image/png;base64,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" style="width:296px">
                              </div>
                    </div>

                    <script>
                                   var myIndex = 0;
                                   carousel();

                                   function carousel() {

                                             var i;
                                             var x = document.getElementsByClassName("mySlides");

                                             for (i = 0; i < x.length; i++) {

                                                     x[i].style.display = "none";
                                             }

                                             myIndex++;

                                             if (myIndex > x.length) {myIndex = 1}

                                             x[myIndex-1].style.display = "block";

                                             setTimeout(carousel, 5000);
                                   }
                    </script>
         </body>
</html>

Sign In

w3 CSS/Javascript issue on Android Chrome

Recommended Posts

ideasvacuum

Link to comment

Share on other sites

ideasvacuum

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity