jQuery UI對話框中的Textarea高度/寬度

我有一個彈出的jQuery對話框，並允許用戶發送確認電子郵件。我有一些文字，然後是文字區域。該對話框是可擴展的，我希望文本區域填充對話框的整個區域，除了頂部需要的50px左右高度來顯示文本外。jQuery UI對話框中的Textarea高度/寬度

將textarea高度正確設置爲100％允許textarea隨着對話框大小的變化而展開/收縮。但是，它並沒有給文本頂部的空間。

除了我的文本所在的高度的第一個50像素外，我如何獲得textarea來填充對話框的整個區域（高度和寬度）。

謝謝。

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>

來源

2011-03-30 kralco626

您可以使用絕對定位。

更新：當給定絕對定位時，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 */ 
}

來源

2011-03-30 16:45:22 kapa

也沒有工作 – kralco626 2011-03-30 16:49:40

請檢查我的更新。 – kapa 2011-03-30 17:00:41

很酷，很有效！ – kralco626 2011-03-30 17:05:27

您是否嘗試過給<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>

來源

2011-03-30 16:43:12 Ender

不，我沒有嘗試過，但我只是現在你提到它，它沒有工作。所有這些都在textarea上面放了另外50px的空格。然而，textarea仍然在整個對話的範圍內擴展自己。（我不得不使用對話框上的滾動條來查看邊距空間的50px，如果這使得sence） – kralco626 2011-03-30 16:46:50

jQuery UI對話框中的Textarea高度/寬度

回答

相關問題