jQuery UI 대화 상자의 텍스트 영역 높이/너비

jQuery 대화 상자가 나타나 사용자가 확인 이메일을 보낼 수 있습니다. 텍스트가 있고 텍스트 영역이 있습니다. 대화 상자는 확장 가능하며 텍스트 영역을 채우기 위해 대화 상자의 전체 영역을 채우고 싶습니다. 텍스트를 표시하려면 맨 위에 필요한 50px 정도의 높이를 제외하고는.jQuery UI 대화 상자의 텍스트 영역 높이/너비

텍스트 영역 높이를 100 %로 올바르게 설정하면 텍스트 영역이 대화 상자의 크기가 변경된 상태로 확장/축소 될 수 있습니다. 그러나 텍스트 맨 위에는 공백이 없습니다.

대화 상자의 전체 영역 (높이와 너비)을 채우려면 텍스트 영역을 가져 오려면 어떻게해야합니까? 텍스트가 상주 할 높이의 처음 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>

출처

2011-03-30 kralco626

절대 위치 지정을 사용할 수 있습니다.

UPDATE : 절대 위치를 제공 할 때 텍스트 영역은 부모 스트레칭하지 않을 것이다, 그래서 대신 내가 당신의 텍스트 영역 주위 사업부 스타일 및 텍스트 영역에만 DIV의 크기 자체를 조정합니다.

working example here을 참조하십시오. 텍스트 영역의 테두리를 맞추기 위해 아래쪽과 오른쪽으로 연주했는데 가장 좋은 것은 아니지만 패딩이 비틀어 질 수도 있지만 작동합니다.

#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%; 
}

UPDATE : 2 :

그래서이 일을 만드는 기본 재료는이 같은 것입니다 난 그냥 관련 a great article 우연히 및 텍스트 영역 자체와 래퍼를 가장하여이를 확장 :

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

내 업데이트를 확인하십시오. – kapa

멋지다, 그거야! – kralco626

당신이 <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

아니요. 시도하지 않았지만 지금은 언급 했으므로 작동하지 않았습니다. 모두 텍스트 영역 위에 50px의 빈 공간을 추가했습니다. 그러나 텍스트 영역은 대화 상자의 전체 영역에서 계속 확장되었습니다. (대화 상자에서 스크롤 막대를 사용하여 여백 공간이 50px인지 확인해야 함) – kralco626

jQuery UI 대화 상자의 텍스트 영역 높이/너비

답변

관련 문제