position: fixed; partially renders div when in update panel

Posted by Shoab.Shah under ASP.NET AJAX on 7/2/2015 | Points: 10 | Views : 1535 | Status : [Member] | Replies : 1

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

Hi All,

I have a div placed in updatepanel.

When i keep css of my div as below it displays fully ;

<div runat ="server" id ="divNotificationMsg" style="display:none; z-index:10000; position:absolute; left:10%; top:10%; width:80%; padding: 15px 5px;" >

whereas when i keep below the div gets cut off partially from right.

<div runat ="server" id ="divNotificationMsg" style="display:none; background-color:#FFFFFF; z-index:10000; position:fixed; left:10%; top:10%; width:80%; padding: 15px 5px;" >

Attachment

Reply | Reply with Attachment

Alert Moderator

Responses

Posted by: Sheonarayan on: 7/2/2015 [Administrator] HonoraryPlatinum | Points: 25

0	position:absolute float the div on top of the existing elements and as you have specified z-index to higher so it is coming on top of every element. Layering system is working here. When you scroll, the div will also scroll along with the window. position:fixed makes the div fixed to the position you specify in the .css. ie left or top. The possibility in this case is that some other element is coming on top of this element and making it partially cut from the right. Try to specify all div with border and see which div area is going where (another way to debug) or else you Developer tools or Firebug to debug the HTML. Thanks Regards, Sheo Narayan http://www.dotnetfunda.com Shoab.Shah, if this helps please login to Mark As Answer. \| Alert Moderator

position:absolute float the div on top of the existing elements and as you have specified z-index to higher so it is coming on top of every element. Layering system is working here. When you scroll, the div will also scroll along with the window.

position:fixed makes the div fixed to the position you specify in the .css. ie left or top. The possibility in this case is that some other element is coming on top of this element and making it partially cut from the right. Try to specify all div with border and see which div area is going where (another way to debug) or else you Developer tools or Firebug to debug the HTML.

Thanks

Regards,
Sheo Narayan
http://www.dotnetfunda.com

Shoab.Shah, if this helps please login to Mark As Answer. | Alert Moderator

Latest Posts