How to display UpdateProgress at the center of a grid view with CSS?


Tags: asp.net,css,webforms,updatepanel,updateprogress

Problem :

Need to display Update Progress at the center of a Grid view placed in a Ajax Update Panel. Is there a way to place the Update progreass control at the center of the grid view (or else center of the page) with CSS (without using jQuery or Java Script)?



Solution :

Put the grid-view and update progress html within a wrapper div. Position div relatively and position the update progress absolutely at center.

See this jsfiddle that I have set up: http://jsfiddle.net/DDdyU/

key styles are

.wrapper
{
    position: relative;
}
.updateProgress
{
    position:absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-right: -20px;
}

negative margins are half size of update-progress.


    CSS Howto..

    How can i stop a child div moving towards left when browser size becomes less than webPage size?

    how to call td's id to change css style onclick

    How to create folder style in CSS

    How to save css stylesheet pointer on php session?

    How to make a GWT-like CaptionPanel manually

    how to center align IMG in div?

    How to create a 3 column (ul, li) header that (responsive) collapse one below another?

    How to apply font anti-alias effects in CSS? [duplicate]

    How to style picture gallery to allow portait and landscape pics that are also links

    how to avoid the ID name in css file

    How to turn off link effect on iPhone/iPod/iPad (CSS)?

    How do i make part of a CSS background fit perfectly to a browser

    Showing the child category when Clicking the parent category

    How to align stacked Font-Awesome icons correctly

    How can I get IE8 to accept a css :before tag?

    How to generate regular CSS file from SASS?

    How to figure out which lines of css is not actually affecting anything again?

    How to visually re-order elements in a scrolling dropdown input div?

    How to selectively load css in rhtml?

    Popup not showing once per session as wanted (as mentioned by client)

    How to link after the CSS-Animation?

    how to position a css sprite as background for another class

    Is XSS possible via an @import, and if so how? Are there ways to protect against it?

    How to change CSS according to user Operating System

    How to find the relevant stylesheet for a specific CSS code [closed]

    How to specify height using fancybox 2.1.4

    how to make background 100% on a top menu

    How to center nav using CSS/HTML? [closed]

    How to make flexbox grid images responsive

    How to get rid of spacing between Bootstrap panels?