CODEWITHSUNDEEP
iphonecssipadsafari
copenndthagen
copenndthagen

Reputation: 50810

position:absolute issue on iPad

I have a HTML code as follows;

<div>Content table with varying height</div>
    <div id="buttons">
    <TABLE>
    <TBODY>
    <TR>
    <TD>2 buttons here....</TD>
    </TR>
    </TBODY>
    </TABLE>
    </div>

And there is a CSS defined as;

div#buttons{
    position: absolute;
    bottom: 1em;
    left: auto;
}

Now there is an issue on the iPad Safari..i.e. The position of the buttons remain fixed/stick to the bottom of the screen...i.e. if the height of the content table above it increases, it kind of overlaps with the buttons at the bottom.

Is there any way by which I can avoid that overlap and instead have it positioned based on the dynamic height content above ?

Upvotes: 2

Views: 16429

Answers (2)

Tiago Oliveira
Tiago Oliveira

Reputation: 21

With position absolute in Ipad, or Iphone you need of position absolute in elemtent, and position relative inside father, but imporant to function in ipad and iphone is add left:0, or right:0;

Upvotes: 2

sergio
sergio

Reputation: 69047

Try with: 

position: relative;

absolute

The element is positioned relative to its first positioned (not static) ancestor element

relative

The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

(source)

Relative allows you to adjust the element position relative to the "content above".

Upvotes: 3

Related Questions