1

Question

我有一个表单，当用户从选择列表中选择一个值时，textrea宽度减少到50％，而textarea旁边是一个包含建议的div（用户可以在用户放置到textarea中）选择添加按钮）显示。

以下是用户选择显示建议之前我所拥有的内容的可视化：

以下是使用后选择显示建议的可视化：

我遇到的问题是建议div并不总是扩展到全高。有时div正确扩展，有时它不会 - 无法弄清楚原因。以下是该问题的可视化示例：

使用JQuery时，我尝试在选择列表更改时将焦点放置到textarea，但这没有任何效果（焦点在textarea上，但建议div不会扩展到完整高度）。

我还尝试添加高度为100％的CSS类值，但这会将建议div扩展为完整的可用高度。我不希望在更改选择列表时发生这种情况。

当我实际上鼠标单击以关注表单（表单上的任何位置）时，建议div会扩展所需的完整高度，即使我已经或者没有使用JQuery将焦点放在textarea上。 / strong>很奇怪。

有没有人建议扩展建议div？我找不到搜索谷歌或搜索引擎优化的解决方案。

编辑 - 根据要求添加了代码

以下是相关的HTML代码：

<div id="row_id_voluntary_description" class="form-group "> <label for="id_voluntary_description" class="control-label required"> Description: </label> <div class="controls "> <span id="row_id_voluntary_description"><textarea cols="40" data-parsley-maxlength="5000" id="id_voluntary_description" maxlength="1000" name="voluntary_description" rows="10" data-parsley-id="1468" data-parsley-required-message="This field is required." data-parsley-required="true" class="kmw-disabled keymanweb-font textAreaSplit"></textarea><span class="parsley-errors-list" id="parsley-id-1468"></span></span> <span id="row_icons_id_voluntary_description" style="width: 20px;"> <i id="id_icon_id_voluntary_description" class="fa fa-lightbulb-o blue_color icon_size26 verticalAlignTop" data-original-title="" title="" style="display: inline-block;"></i> <i id="id_icon_reset_id_voluntary_description" class="fa fa-ban blue_color icon_size20 verticalAlignBottom" style="margin-left: -20px; margin-bottom: 5px; display: inline-block;" rel="tooltip" html="true" data-placement="top" title="" data-original-title="Clear"></i> </span> <span id="row_split_id_voluntary_description" class="textAreaSplitContainer" style="display: inline-block; height: 200px;"> <div dir="ltr" style="direction: ltr;"> <div class="suggestions_subHeading margin-bottom-15">Suggestions</div> <div id="id_voluntary_suggestion_wrapper_01" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_01" class="margin-bottom-15">[organization] [mm/yyyy] – [mm/yyyy] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_01" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> <div id="id_voluntary_suggestion_wrapper_02" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_02" class="margin-bottom-15">[organization] [mm/yyyy] – [mm/yyyy] [(X years, X months)] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_02" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> <div id="id_voluntary_suggestion_wrapper_03" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_03" class="margin-bottom-15">[mm/yyyy] – [mm/yyyy] [organization] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_03" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> <div id="id_voluntary_suggestion_wrapper_04" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_04" class="margin-bottom-15">[job title] [mm/yyyy] – [mm/yyyy] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_04" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> <div id="id_voluntary_suggestion_wrapper_05" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_05" class="margin-bottom-15">[job title] [mm/yyyy] – [mm/yyyy] [(X years, X months)] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_05" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> <div id="id_voluntary_suggestion_wrapper_06" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_06" class="margin-bottom-15">[mm/yyyy] – [mm/yyyy] [job title] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_06" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> <div id="id_voluntary_suggestion_wrapper_07" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_07" class="margin-bottom-15">[organization] <br> [mm/yyyy] – [mm/yyyy] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_07" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> <div id="id_voluntary_suggestion_wrapper_08" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_08" class="margin-bottom-15">[organization] <br> [mm/yyyy] – [mm/yyyy] [(X years, X months)] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_08" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> <div id="id_voluntary_suggestion_wrapper_09" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_09" class="margin-bottom-15">[organization] <br> [mm/yyyy] – [Present] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_09" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> <div id="id_voluntary_suggestion_wrapper_10" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_10" class="margin-bottom-15">[organization] <br> [job title] <br> [mm/yyyy] – [mm/yyyy] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_10" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> <div id="id_voluntary_suggestion_wrapper_11" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_11" class="margin-bottom-15">[organization] <br> [job title] <br> [mm/yyyy] – [mm/yyyy] [(X years, X months)] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_11" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> <div id="id_voluntary_suggestion_wrapper_12" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_12" class="margin-bottom-15">[job title] <br> [organization] <br> [mm/yyyy] – [mm/yyyy] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_12" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> <div id="id_voluntary_suggestion_wrapper_13" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_13" class="margin-bottom-15">[job title] <br> [organization] <br> [mm/yyyy] – [mm/yyyy] [(X years, X months)] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_13" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> <div id="id_voluntary_suggestion_wrapper_14" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_14" class="margin-bottom-15">[organization] <br> [location] <br> [job title] <br> [mm/yyyy] – [mm/yyyy] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_14" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> <div id="id_voluntary_suggestion_wrapper_15" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_15" class="margin-bottom-15">[organization] <br> [job title] <br> [location] <br> [mm/yyyy] – [mm/yyyy] [(X years, X months)] <br> </span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_15" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div> </div> </span> <p class="help-block"> 1,000 character limit </p> </div> </div>

以下是相关的CSS：

.textAreaSplit { height: 200px; max-height: 600px; max-width: 50%; min-height: 100px; min-width: 50%; resize: vertical; border: 1px dotted red; } .textAreaSplitContainer { border: 1px solid #d9d9d9; display: inline-block; height: 200px; /*max-height: 600px;*/ max-width: 45%; /*min-height: 100px;*/ min-width: 45%; overflow: scroll; overflow-x: hidden; padding: 10px; resize: none; vertical-align: top; /*background: #f6f6f6*/ background: aqua }

以下是更改选择列表时触发的相关JavaScript / JQuery代码：

function changeDisplayFunction() { if ( $('#id_voluntary_suggestion_type').val() == '0' || $('#id_voluntary_display_type').val() == '0' ) { // display the text areas as 95% width and hide the related suggestion containers. $('#id_voluntary_description').addClass('textArea01'); $('#id_voluntary_description').removeClass('textAreaSplit'); $('#id_icon_id_voluntary_description').hide(); $('#id_icon_reset_id_voluntary_description').hide(); $('#row_split_id_voluntary_description').hide(); } else { // display the text areas as 50% width with the suggestion container next to it. $('#id_voluntary_description').addClass('textAreaSplit'); $('#id_voluntary_description').removeClass('textArea01'); $('#id_icon_id_voluntary_description').show(); $('#id_icon_reset_id_voluntary_description').show(); $('#row_split_id_voluntary_description').show(); } }

Answer 1

您的标记存在重大问题。

1

首先，<span>是一个inline级别元素，您不应将block级别元素放入其中div s，即使您将其设置为

span{
    display: block;
}

2

您可以使用此标记，以获得更可靠的结构：

.controls{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.cols{
  width: 50%;
}
.cols ul{
  list-style: none;
}
.row_id_voluntary_description{
  padding: 10px;
}
.row_id_voluntary_description textarea{
  width: 100%;
}
.row_split_id_voluntary_description{
  background: aqua;
}

<div class="controls">
  <div class="cols row_id_voluntary_description">
    <textarea rows="5"></textarea>
  </div>
  <div class="cols row_split_id_voluntary_description">
    <ul>
      <li>Some row-wise content goes here</li>
      <li>Some row-wise content goes here</li>
      <li>Some row-wise content goes here</li>
      <li>Some row-wise content goes here</li>
    </ul>
  </div>
</div>

Answer 2

你的标记有点错综复杂。我还没有尝试过整个过程。我认为你想要实现的目标需要div来约束内容的高度。您将div设置为与左侧div匹配的高度，然后添加可滚动的子div并扩展为100％。见this fiddle。
您可以尝试通过height或max-height替换min-height来微调您想要达到的效果。

所以实质上：

<div class="panelholder">
  <div class="panel">
    Some content
  </div>
  <div class="panel">
    <div class="constrainer">
      <div class="scrollable">
        <!-- scrollable content -->
      </div>
    </div>
  </div>
</div>

使用这个CSS：

.panelholder { }
.panelholder .panel {
  width: 49%;
  float: left;
  margin: 0;
  padding: 0;
  height: 150px;
  border: 1px solid #fefefe;
}
.panelholder .panel .constrainer {
  height: 150px; // same as above
  overflow: hidden;
}
.panelholder .panel .constrainer .scrollable {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

希望它有所帮助。

在HTML表单上展开div

2 个答案:

1

2