Question

I have an application here: HERE

In application please do the following:

1. In the text area at top type in some content
2. Click on Add Question button to append content into table below. You can see the content in the textarea in the table is placed at the top of the textarea.
3. Now you will see a file input, please upload an image using the file input.
4. Now when the upload finishes, it appends the name of the file, a hidden input and a remove button underneath, but look at the textarea with your content in ther other column, the text has moved down a space. It has not stayed on top.

That is my question, how in this situation am I able to keep the text in the text input remain at the top of the textarea?

Below is the main code:

The textarea and file input appended into the table row:

var count = 0;
var gQuestionIndex = 0;

function insertQuestion(form) {   

      var questionarea=(form.questionText.length)
                ? form.questionText[0]
                : form.questionText;


    var $tbody = $('#qandatbl_onthefly > tbody');
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $question = $("<td width='13%' class='question'></td>");
    var $image = $("<td width='17%' class='image'></td>");
    var $questionType = '';

    gQuestionIndex++;


    $('.questionTextArea').each( function() {

    var $this = $(this);
    var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]")
                   .attr('value',$this.val());

    $question.append($questionText);

    });



    var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" + 
    "<p class='imagemsg'></p></label>" +
    "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" + 
    "<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" + 
    "<p class='listImage'></p>" +
    "<iframe class='upload_target_image' name='upload_target_image' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>");     

    $image.append($fileImage);


    $tr.append($question);
    $tr.append($image);
    $tbody.append($tr); 

    count++;

    $(form).find('.numberOfQuestions').val(qnum);

    form.questionText.value = "";

    $('.questionTextArea').val('');


    setWidth();

}

The setWidth() code where it ensures the textarea remains filling the table cell if the table cell has it’s height and width changed:

function setWidth() {
    $(".textAreaQuestion").each(function(){
     var questionCellWidth = $(this).closest(".question").width();
    var questionCellHeight = $(this).closest(".question").height();
    $(this).css({
        "width": (questionCellWidth - 6) + "px",
        "height": (questionCellHeight) + "px"
    });

    });
  }

The stop uploading function where it appends the filename, remove button and hidden input:

function stopImageUpload(success, imageID, imagefilename){

      var result = '';
      imagecounter++;

      if (success == 1){
         result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span>';   
            $('.listImage').eq(window.lastUploadImageIndex).append('<input type="hidden" name="imgid[]" id="'+imageID+'" value="' + imageID + '" />');
            $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" data-imageID="'+imageID+'"  data-image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>');
         }


      $(sourceImageForm).find('.imagemsg').html(result);
      $(sourceImageForm).find('.imagemsg').css('visibility','visible'); 
      $(sourceImageForm).find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
      $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');


      return true;   
}

Finally below is the css for the textarea:

.textAreaQuestion{
    width:100%;
    resize:none;
    height:100%;
    border:0;
    padding:0;
    font-size:100%;
    display: block; 
    overflow:auto;
    margin:0;
    vertical-align:top;
}

Answer 1

Try adding to your CSS:

td.question {
    vertical-align:top;
}

The problem is that your right-hand column is creating more vertical space, and your cells are set to their normal state, which starts text vertically-aligned in the center of the cell.

Better, even, would be something like this:

td {
    vertical-align:top;
    padding: 1em .5em; /* or something to this effect, 
                          to normalize the spacing of 
                          data from the cell-sides */
}

This way, no matter how much information is added to the right-most column cell, all the cells will start aligned to their tops at about the same place. You might have to also adjust some margin spacing around the textarea, if you want to really align the text, but this should at least get you started.