1

I fixated the two first left columns in my tables based on https://stackoverflow.com/a/17557830/1272712. The columns is only fixated, when the screen size is less than 768px - at which point the table is scrollable (see jsFiddle). It works great on Android, desktop Chrome and desktop Safari, but it doesn't work on iOS Safari and Chrome. Does iOS not support position:absolute?

If anybody else have any alternative implementations, I'll accept that as an answer.

http://jsfiddle.net/98hk3/

Community
  • 1
  • 1
Niels Sønderbæk
  • 3,487
  • 4
  • 30
  • 43
  • 2
    TD/TH elements doesn't approve position properties (relative/absolute/fixed). You might get away in some browsers, but it should not be done like this. – drip Dec 30 '13 at 13:51
  • There is a known bug in firefox that I think may be related to this: https://bugzilla.mozilla.org/show_bug.cgi?id=63895 – hkk Jan 03 '14 at 21:22
  • take a look at this, it may help. http://mobile.tutsplus.com/tutorials/mobile-web-apps/ios-5-fixed-positioning-and-content-scrolling/ – osyan Jan 05 '14 at 11:36
  • try this, maybe work for you min-width: 100%; width: 768px; –  Jan 06 '14 at 15:49

2 Answers2

2

I was able to get this working by overriding the -webkit-overflow-scrolling property to be unset.

I believe it defaults to touch in iOS which for some reason was throwing off the position:absolute I was trying to set.

Grant Miller
  • 27,532
  • 16
  • 147
  • 165
James Summers
  • 21
  • 2
1

I think you have stuck in min-width problem,

I will say that its simple to solve this in case you will convert pixel to em,

if you base size is 16px (by default it is same in all browsers)

then your PX to Em will be (px)768 / 16 = 48(em)

Now try changing Px to Em in the code Fiddle 0

also if you must stay with PX, then do something like this,

@media(max-width:768px !important)

fiddle 1 or

@media(max-width:99%) Fiddle 2

Note:I suggest we keep 1 or 2 % spare(by applying 99%) because if we have applied padding some where within body that will create overflow to top level.

Also try adding zoom:1; under .table-responsive class that might help in case of iOS fiddle 3

if this does not work out please reply..

MarmiK
  • 5,639
  • 6
  • 40
  • 49
  • ok I will do one thing will try this on agent/simulator as I do not have a real one to test the same.. – MarmiK Jan 09 '14 at 05:01
  • I will like to ask one more thing, is table a compulsory part of the same? or optional part? – MarmiK Jan 09 '14 at 05:02
  • I ned the styles of the bootstrap tables and the ability to shrink my table according to the screen size (`table-responsive`) – Niels Sønderbæk Jan 09 '14 at 11:04
  • That can be achieved using Div only, so if you can skip/avoid table part and convert same to div tags that will help you to overcome this problem. I can create one fiddle if you want then.(as I am running bit busy). – MarmiK Jan 09 '14 at 11:23
  • I would love a fiddle with that option. I'll award you the bounty, as you have provided me with much more help than any other :) – Niels Sønderbæk Jan 09 '14 at 21:32
  • Thank you for your kindness, I was closely monitoring your code before converting it to Div format I have one more fiddle http://jsfiddle.net/MarmeeK/YWQRU/8/ that I will like you to test, as there were afew tags `` that are self-closing `td` tags and are not supported by all browsers, So I changed them back to normal ``. – MarmiK Jan 10 '14 at 07:01
  • you tried the new fiddle link? Ok I will start buiding the Div pattern, that will carry width of each cell, so the css part is going to change mainly – MarmiK Jan 10 '14 at 11:22
  • FYI it will take more time as there are with colspan, so things are not going to be easy for me too :) – MarmiK Jan 10 '14 at 13:17