1

I am working on a webapp which uses the latest bootstrap (3.1.1). I use this carousel sample app to build the main skeleton of the app.

In each of the slides I will have my actual page content. In one of the slides I generate tables with a different width.

The problem seems to appear only in Android Webview when the width of the table is bigger than the actual width of the device. The navbar gets white or invisible. I am not sure, but I can not see it. I am able to click on the navbar toggle(even though doesn't appear) and it does show the navbar items.

Did anybody else had this problem before ? It only seems to happen in the android webview. I tested this in chrome for android and everything works as expected.

I will try to reproduce this in a fiddle, but I hope I can get some tips by then. Florin.

UPDATE: fiddle here: http://www.bootply.com/123049 (please test the fiddle in Android webview).

bboydflo
  • 907
  • 1
  • 15
  • 24
  • Have you tried adding the .table-responsive class onto your tables? – Billy Moat Mar 27 '14 at 12:40
  • @BillyMoat No, but I am using datatables (www.datatables.net) and the table gets generated there. Plus I need a specific width which I receive from a background service. a fiddle can be found here [link](www.bootply.com/123049)[link] – bboydflo Mar 27 '14 at 12:52

1 Answers1

2

I found out that the position:fixed applied to different elements behaves buggy in android default webview. more details (maybe a possible solution) here: follow the link

also try to set the metatag like following: 

<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />

For iOS 5 link here iOS issue with position fixed explained

A solution that I specifically found for my problem was setting sScrollX datatables parameter to 100% (datatables is the script used to generate tables).

Also here caniuse stats: http://caniuse.com/css-fixed

Community
  • 1
  • 1
bboydflo
  • 907
  • 1
  • 15
  • 24