размер текстовой области становится меньше, когда единица ширины равна%, и работает нормально, когда используется пиксель - PullRequest
Новая
       19

размер текстовой области становится меньше, когда единица ширины равна%, и работает нормально, когда используется пиксель

0 голосов
/ 20 декабря 2018

Jsfiddle link: https://jsfiddle.net/dhanu10896/ohb3xayn/11/У меня есть textarea и одна инструкция под ним, и я должен показать, что инструкция под правым нижним концом textarea, а также область текста изменяемого размера, поэтому инструкция должна корректироваться с ним, когда размер области текста увеличился.

Для этого я заключил текстовую область и инструкцию в один div и сделал ее встроенным блоком, который будет принимать ширину текстовой области и выровненную инструкцию по правой стороне.

Это работает, когда ширина указана в пикселях, но когда ширина указана в% (в процентах) не работает.

код: 

displayCell {
  padding: 2px 0 3px 0;
  border: 1px solid transparent;
}

.clearfix {
  display: block;
}

html form, body form {
    font-size: 14px;
    line-height: 1.42857;
    color: #32363a;
    font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.displayInlineBlock, .inlineBlock {
    display: inline-block;
}

html textarea, body textarea {
    font-size: 14px;
    font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-size: 1rem;
    line-height: 1.42857;
    font-weight: 400;
    appearance: none;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    font-size: inherit;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #89919a;
    border-radius: 4px;
    color: #32363a;
    background-color: #fff;
    -webkit-transition: border-color 125ms;
    transition: border-color 125ms;
    height: 36px;
    height: var(--fd-forms-height);
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
    height: 72px;
    padding-top: 12px;
}

.displayFlex {
    display: flex;
}
html .textareaInstruction, body .textareaInstruction {
    flex-grow: 1;
    width: 0px;
    text-align: right !important;
    clear: both;
    display: block;
    font-size: .85714rem;
    line-height: 1.33333;
    font-weight: 400;
    color: #51555a;
    padding: 8px 0;
    position: relative;
    padding: 0;
}

.formElementInstruction {
    color: #666666;
    white-space: nowrap;
    font-weight: normal;
}
.mr2px {
    margin-right: 2px;
}
<html>
<body>

<form>

<h2>
to fix
</h2>
  <div class="displayCell clearfix">
    <div class="inlineBlock">
      <textarea name="description" id="description" style="width:100%;height:100px;width:75%;"></textarea>
      <div class="displayFlex">
        <div class="formElementInstruction  textareaInstruction">
          <span class="mr2px" id="text_counter_description">1000</span>left</div>
      </div>
    </div>
  </div>
  
  <h2>
  should look like (also try resizing texarea)
  </h2>
   <div class="displayCell clearfix">
    <div class="inlineBlock">
      <textarea name="description" id="description" 
      style="height:100px;width:500px;"></textarea>
      <div class="displayFlex">
        <div class="formElementInstruction  textareaInstruction">
          <span class="mr2px" id="text_counter_description">1000</span>left</div>
      </div>
    </div>
  </div>
</form>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 20 декабря 2018

Как и в вашем блоке, содержащем текстовую область, вы применили класс inlineBlock, у которого установлено свойство display: inline-block, div не будет растягиваться на полную ширину и займет место, необходимое только для текстовой области.

Кроме того, если вы установите style="width:100%;height:100px;width:75%;" для textarea, оно будет составлять 75% от его родителя, а здесь parent - это div с классом inlineBlock, поэтому это будет 75% от этого div, а не 75% ширины устройства..

Установить width свойство только один раз, так как последнее переопределит первое.

Если вы не хотите устанавливать пиксель для этих текстовых областей, вы можете исправить это, используя следующий подход: 

.displayInlineBlock, .inlineBlock {
    display: inline-block;
    min-width: 500px;
}

<textarea name="description" id="description" style="width:100%;height:100px"></textarea>

Вот ссылка на скрипку для просмотра рабочего решения http://jsfiddle.net/aditi17/t2sybfr7/257/

0 голосов
/ 20 декабря 2018

дает полную ширину (например, 100vw) текстовой области. 

displayCell {
  padding: 2px 0 3px 0;
  border: 1px solid transparent;
}

.clearfix {
  display: block;
}

html form, body form {
    font-size: 14px;
    line-height: 1.42857;
    color: #32363a;
    font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.displayInlineBlock, .inlineBlock {
    display: inline-block;
}

html textarea, body textarea {
    font-size: 14px;
    font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-size: 1rem;
    line-height: 1.42857;
    font-weight: 400;
    appearance: none;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    font-size: inherit;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #89919a;
    border-radius: 4px;
    color: #32363a;
    background-color: #fff;
    -webkit-transition: border-color 125ms;
    transition: border-color 125ms;
    height: 36px;
    height: var(--fd-forms-height);
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
    height: 72px;
    padding-top: 12px;
}

.displayFlex {
    display: flex;
}
html .textareaInstruction, body .textareaInstruction {
    flex-grow: 1;
    width: 0px;
    text-align: right !important;
    clear: both;
    display: block;
    font-size: .85714rem;
    line-height: 1.33333;
    font-weight: 400;
    color: #51555a;
    padding: 8px 0;
    position: relative;
    padding: 0;
}

.formElementInstruction {
    color: #666666;
    white-space: nowrap;
    font-weight: normal;
}
.mr2px {
    margin-right: 2px;
}
<html>
<body>

<form>

<h2>
to fix
</h2>
  <div class="displayCell clearfix">
    <div class="inlineBlock">
      <textarea name="description" id="description" style="width:90vw;height:100px;"></textarea>
      <div class="displayFlex">
        <div class="formElementInstruction  textareaInstruction">
          <span class="mr2px" id="text_counter_description">1000</span>left</div>
      </div>
    </div>
  </div>
</form>
</body>
</html>
...