4 Replies Latest reply on Oct 29, 2017 5:16 PM by michaelmannucci

    innerHTML messing up app layout (only) when using PhoneGap Developer Android app

    michaelmannucci

      Full disclaimer, I'm new to PhoneGap. I'm developing my first app, it has no purpose, it's just for practice. There's 4 colors, and depending on the number you enter into the input, the colors and titles change.

       

      Everything was working until today when I tested it on the Android PhoneGap app and realized it doesn't work. It works in Chrome for Android and both the PhoneGap app and Chrome for iOS.

       

      I've isolated the issue and discovered the problem is the innerHTML function in my javascript. Once that function runs, it messes up the formatting somehow.

       

      Here's what is supposed to happen (photos taken from Chrome browser):

       

      Screenshot_2017-10-24-15-40-43.pngScreenshot_2017-10-24-15-40-59.pngScreenshot_2017-10-24-15-40-51.png

       

      Here's what's happening in the PhoneGap app for Android (I added black border to show edges of screen):

       

      Screenshot_2017-10-24-15-47-23.pngScreenshot_2017-10-24-15-47-30.png

       

      The relevant HTML:

       

      <div class="wrapper">

           <div class="blocks" id="tipBlock">

                <div class="colorName" id="tipName">White</div>

                <div class="identifier">(Tip)</div>

           </div>

      </div>

       

      Relevant CSS:

       

      .wrapper {
          height: 100vh;
          display: flex;
          flex-direction: column;
      
      
      .blocks {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
      }
      
      
      #tipBlock {
          background-color: #f2f2f2;
          color: #2f2f2f;
      }
      
      
      .colorName {
          font-size: 40px;
          font-weight: 200;
          letter-spacing: -2px;
      }
      
      
      .identifier {
          opacity: 0.5;
      }
      

       

      Relevant js:

       

      function calculation() {
          var num = document.getElementById("input").value;
          var numCalc = num % 25;
         
          if (numCalc > 0 && numCalc <= 5) {
              document.getElementById("tipBlock").setAttribute("style", "background-color: Red; color: White");
              document.getElementById("tipName").innerHtml = "Red";
          }
      }
      

       

       

      I've tried a bunch of stuff, including using .childNodes[0].textContent instead of innerHtml, and nothing seems to work.

       

      Any help is appreciated.