在jQuery UI对话框中的Textarea高度/宽度

时间:2011-03-30 16:40:52

标签: jquery html css jquery-ui textarea

我弹出一个jQuery对话框,允许用户发送确认电子邮件。我有一些文字,然后是文字区域。该对话框是可扩展的,我希望文本区域填满对话框的整个区域,除了顶部需要的50px高度以显示文本。

正确地将textarea高度设置为100%允许textarea随着对话框大小的变化而扩展/收缩。但是,它没有为文本顶部留出空间。

如何让textarea填充对话框的整个区域(高度和宽度),除了文本所在的前50px高度。

感谢。

HTML:

<div id="dialog-message-email" title="Send Email">

    <p style="height:50px">
        <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
        Confirmation Email to be sent to user.
    </p>
    <div>
    <textarea id="ConfirmEmailText" class="ui-corner-all ui-widget-content" style="height:100%;padding:5px; font-family:Sans-serif; font-size:1.2em;"></textarea>
    </div>

    </div>

2 个答案:

答案 0 :(得分:5)

您可以使用绝对定位。

更新:当给定绝对定位时,textarea不会拉伸到其父级,因此我设置了textarea周围的div,而textarea只会将自身调整为div的维度。

working example here。我玩底部和右边调整textarea的边框和填充,而不是最好的,可能会调整,但它的工作原理。

所以使它运作的基本内容是这样的:

#dialog-message-email {
    position: relative;
    min-height: 200px; /* the child is absolute, so we need a minimum height */
}

#dialog-message-email div { /* this one will stretch */
      position: absolute;
      top: 50px;
      bottom: 0;
      left: 0;
      right: 0;
}

#ConfirmEmailText { /* and the textarea follows its parent's dimensions */
      width: 100%;
      height: 100%;
}

更新2:我偶然发现了相关的a great article,并通过将包装器伪装成textarea本身来扩展它:

div {
  position: absolute;
  left: 5px; 
  top: 5px;
  right: 5px; 
  bottom: 5px;
  border: 1px solid #CCC; /* style like textarea */
}

textarea {
  width: 100%;
  height: 100%;
  margin: 0; /* don't want to add to container size */
  border: 0; /* don't want to add to container size */
}

答案 1 :(得分:0)

你试过给<textarea>一个上边距吗?像这样:

<textarea id="ConfirmEmailText" class="ui-corner-all ui-widget-content" style="height:100%;padding:5px; margin-top:50px; font-family:Sans-serif; font-size:1.2em;"></textarea>