0

working on Cordova android application with framework 7, I create bottom bar as a music player, and top of the bottom bar add song progress bar.

To add progress bar div on the top position I use CSS property -position: absolute. its display fine at my device and many other devices I tested but some Android devices face some issue like song progress bar displayed middle of the bottom bar.

<div class="views pageview">
  <div class="view view-main">
    <div class="toolbar toolbar-bottom hidden-toolbar" id="buttomBar" style="opacity: 0;height: 80px;">
      <div class="toolbar-inner">
        <div class="myProgress2" id="myProgress2" style="background-color: grey; width:100%;position: absolute!important;">
          <div id="myBar2" class="myBar2" style="width: 3%;height: 10px;background-color:#00bcd4;"></div>
        </div>
        <div class="list-block" id="songname" onclick="showToolbar();">
          <a href="#" class=" size-30 item-link smart-select">
            <select name="fruits" id="tracklistappend" onchange="getAudioUrl(this)">
            </select>
            <div class="item-content">
              <img src="img/pula.jpg" width="70px" height="50px" id="trackimage">
              <div class="item-inner">
                <div class="item-title" id="trackNameNclipName"></div>
              </div>
            </div>
          </a>
        </div>
        <span style="margin-left: 2px;" id="duration"></span>
        <a onclick="playButton()" class="link size-50 left" id="play"><i class="fa fa-play-circle" aria-hidden="true"></i></a>
        <a onclick="puseButton()" class="link size-50 left" id="pause"><i class="fa fa-pause-circle" aria-hidden="true"></i></a>
      </div>
    </div>
    <div class="pages">
      <div data-page="index" class="page no-navbar no-toolbar navbar-hidden toolbar-hidden hide-toolbar-on-scroll">
        <div class="page-content landingpage">
          <div class="content-block" style="height:60px;"></div>
          <div class="logo main col12"> <img src="img/bplogo.png" alt=""> </div>
        </div>
      </div>
    </div>
  </div>
</div>

enter image description here other android devices like Samsung j2 progress bar displayed like above

enter image description here on my device progress bar displayed at the top

Andrzej Ziółek
  • 2,241
  • 1
  • 13
  • 21
ramesh patil
  • 37
  • 9
  • Can you edit your question to list the devices you are testing on, their Android OS version, and the version of Chromium WebView each one is running. – Morrison Chang Sep 18 '17 at 09:24
  • i think progress bar displayed at middle of bottom bar most of android 6.0 and higher devices. android 4.4 to 5.1 displayed properly – ramesh patil Sep 18 '17 at 09:37
  • I ask for devices/Android OS Versions/Chrome WebView versions as according to this: https://developer.chrome.com/multidevice/webview/overview from Android 5.0 and up the WebView can be updated from the Play Store so the divide at 5.1 seems odd to me. Have you tried Chrome Remote Debugging on Android https://developers.google.com/web/tools/chrome-devtools/remote-debugging/ to see what is going on? (note Android Studio and Chrome each have their own adb server, only one adb server should be running at a time) – Morrison Chang Sep 18 '17 at 09:45
  • you are talking about something like " WebView in com.Something.app (39.0.0.0) " ??? – ramesh patil Sep 18 '17 at 10:29
  • Yes. If you look in Settings it would be the version number for the app 'Android System WebView' (on Lollipop and up). Related: https://stackoverflow.com/questions/29145884/get-webview-version-number-for-lollipop – Morrison Chang Sep 18 '17 at 10:34

1 Answers1

0

You need to set up a consistent code for each major change in webview.

Explore the user fragmentation per webview version in order to decide which support you're in need to give.

If you're on first version, try to refer to webview-supported html5 and CSS.

Federico Massi
  • 376
  • 1
  • 8