user1261774 user1261774 -4 years ago 244
CSS Question

Expand div on HTML form

I have a form that when the user selects a value from a select list, a textrea width is reduced to 50% and next to the textarea is a div that contains suggestions (that the user can place into the textarea when the user selects the add button) is displayed.

Here is a visualization of what I have before the user selects to display the suggestions:

enter image description here

Here is a visualization of what I have after the use selects to display the suggestions:

enter image description here

The issue that I am experiencing is that the suggestions div does not always expand to the full height. Sometimes the div expands correctly, and sometimes it does not - cannot figure out why. Here is the visualization example of the issue:

enter image description here

Using JQuery, I have tried placing the focus to the textarea when the select list is changed, but this does not have any effect (the focus is on the textarea, but the suggestions div does not expand to the full height).

I have also tried adding a CSS class value of height: 100%, but this expands the suggestions div to the full available height. I do not want this to happen when the select list is changed.

When I actually mouse click to focus on the form (anywhere on the form) the suggestions div does expand the required full height, even if I have or have not used JQuery to place the focus to the textarea. Weird.

Does anyone have a suggestion to expand the suggestion div? I could not find a solution searching google or SO.

EDIT - code added as requested

Here is the relevant html code:

<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]&nbsp;[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;<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]&nbsp;[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[(X years, X months)]&nbsp;<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]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[organization]&nbsp;<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]&nbsp;[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;<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]&nbsp;[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[(X years, X months)]&nbsp;<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]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[job title]&nbsp;<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]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;<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]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[(X years, X months)]&nbsp;<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]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[Present]&nbsp;<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]&nbsp;<br>
[job title]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;<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]&nbsp;<br>
[job title]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[(X years, X months)]&nbsp;<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]&nbsp;<br>
[organization]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;<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]&nbsp;<br>
[organization]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[(X years, X months)]&nbsp;<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]&nbsp;<br>
[location]&nbsp;<br>
[job title]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;<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]&nbsp;<br>
[job title]&nbsp;<br>
[location]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[(X years, X months)]&nbsp;<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>


Here is the relevant 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


}


Here is the relevant JavaScript / JQuery code that is triggered when the select list is changed:

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 Source

Your Markup has major problems.

1

First of all, <span> is an inline level element, which you should not put block level elements in it like divs, even if you style it as

span{
    display: block;
}

2

You may use this markup instead, to have more reliable structure:

.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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download