2

I have a demo here application. Please open the application and then click on the "Add" question button to append a table row. You will see 4 table columns, three of those columns consists of an image file input, video file input and audio file input. In one of the inputs please select a relevant file and upload it and you will see a loading bar. The problem though is that the loading bar is not displayed in the center of its table cell.

My question is how do I center the loading bar for each file input in its own table cell?

Below is the css for loading bar in all three file inputs:

.imagef1_upload_process{
    position:absolute;
    visibility:hidden;
    text-align:center;
    margin-bottom:0px;
    padding-bottom:0px; 
    }

.videof1_upload_process{
    position:absolute;
    visibility:hidden;
    text-align:center;
    margin-bottom:0px;
    padding-bottom:0px; 
    }

.audiof1_upload_process{
    position:absolute;
    visibility:hidden;
    text-align:center;
    margin-bottom:0px;
    padding-bottom:0px; 
    }

Below is the html for each loading bar:

Image loading bar:

<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' > 
<p class='imagef1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>
    </form>

Video loading bar:

<form action='videoupload.php' method='post' enctype='multipart/form-data' target='upload_target_video' onsubmit='return videoClickHandler(this);' class='videouploadform' > 
<p class='videof1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>
</form>

Audio loading bar:

<form action='audioupload.php' method='post' enctype='multipart/form-data' target='upload_target_audio' onsubmit='return audioClickHandler(this);' class='audiouploadform' > 
<p class='audiof1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>
</form>
Manixman
  • 307
  • 6
  • 19
  • http://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element – Vucko Dec 30 '12 at 23:08
  • @Vucko I looked at the question prviously before posting this question, this doesn't center the loading bar in the table cell, it just pastes it in middle of page, I want each loading bar to be centered in its own table cell – Manixman Dec 30 '12 at 23:32
  • 1
    How about changing the `position:absolute` to `position:relative` ? – Vucko Dec 31 '12 at 00:40
  • 1
    Does adding `margin-left: auto;` and `margin-right: auto;` accomplish what you want? – Kobi Tate Dec 31 '12 at 00:54
  • I have combinded both Kobi's comment and Vucko comment and that has centered the loading bar as well as not providing a problem when the table scrolls which was the reason I use positioned absolute in first place but realised posistioned relative would sort out that problem. Thanks guys. upvote comments – Manixman Dec 31 '12 at 01:45

1 Answers1

0

Your position: absolute is setting the width to auto for the element and removing it from normal positioning. I'd recommend dropping the positioning and let it flow normally. This will center the image in the field, but you will immediately notice open whitespace. We've dropped the positioning and placed the element back into the flow, and thus, the other elements are respecting its space since you're leveraging visibility. Flip your use of visibility: hidden to display: none and the element will no longer take up the space until the display value is toggled.

edeviant
  • 46
  • 2