Center Form Dynamically Add Elements Remain Center?

Question

I have a basic HTML form that I am centering. I am using jQuery plugin to dynamically validate that the fields are required. When it adds the "Field is required" message after the text box, it causes the form/table to shift due to the fact that it is in a table. This makes sense.

The question I have is what is the best way to keep the table/form centered on the page as but allow any dynamically added elements that are added "after" the text boxes to not shift the form? See my example here: http://jsbin.com/amasa4/3/

I don't necessarily need it to remain a table if it is easier done without while keeping the same style.

Answer 1

The solution I use right now is to center your table with javascript instead of css (margin: 0 auto;). I have my form in some kind of modal dialog. So the function for my case looks like:

$.fn.center = function() {

    this.css("position", "absolute");

    this.css("left", "50%");

    this.css("margin-left", -((this.width()) / 2) + "px");

    return this;

}

And yeah, if you have multiple steps in your form, you will have to center your table every time you go to the next or previous step.

Here is the demo

EDIT: I created the following hack, looks really ugly, but if you are desperate and there is no other solution you can use it =) What I did there is added a dummy div before the form and resized it with javascript based on form's width. You can use 1 table instead of 2 divs and then resize the first dummy column instead. Also note that you will need to resize the whole thing again on window resize event.

Answer 2

Try adding this to your CSS:

 label{
    display:block;
  }
  td{
    vertical-align:top;
  }

Answer 3

All I did to solve this was set the label class of the errors that are dynamically added to absolute. That way I could still center the form using CSS.