Modal dialog- How to get modal's background to

Question

I have to create a modal window which contains inputs field which are asses dynamically (each time the user click on input, a new one is added). My problem that the modal's background doesn't extend according the size of the modal

Part the HTML:

<div class="modal fade edit-profile modal-profile" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <!-- modal-content -->
        <div class="modal-content">
            <div >
                <!-- demo-tabs-vertical -->
        <div id="demo-tabs-vertical people" class="tabbed-nav-flat clearfix edit-tab hover clean medium flat-peter-river flat z-icons-light z-rounded z-bordered z-spaced z-tabs vertical top-left top" data-options="{&quot;orientation&quot;: &quot;vertical&quot;, &quot;style&quot;: &quot;clean&quot;, &quot;size&quot;:&quot;medium&quot;, &quot;position&quot;: &quot;top-left&quot;, &quot;rounded&quot;:true,&quot;spaced&quot;:true, &quot;theme&quot;:&quot;flat-peter-river&quot;}">
                    <ul class="z-tabs-nav z-hide-menu tab-menu">
                        <li class="z-tab z-first z-active" onclick="javascript:validTab(event)" data-link="tab1" data-form="#basicInfoForm">
                            <a class="z-link">Basic Information</a>
                        </li>
                        <li class="z-tab" data-link="tab2" onclick="javascript:validTab(event)" data-form="#colorThemeForm">
                            <a class="z-link">Colour Theme</a>
                        </li>

                        <li class="z-tab" data-link="tab4" onclick="javascript:validTab(event)" data-form="#personalExpertiseForm">
                            <a class="z-link">Personal Expertise</a>
                        </li>
                        <li class="z-tab" data-link="tab5" onclick="javascript:validTab(event)" data-form="#pro-exp">
                            <a class="z-link">Professional  Experience</a>
                        </li>

                    </ul>

Example of input elements of one of the tabs in the modal-dialog:

   <div id="tab4" class="z-content personal-expertise">
                  <div class="z-content-inner">
                    <h3 class="title-heading">Personal Expertise</h3>
                    <form name="personalExpertiseForm" id="personalExpertiseForm" >
                      <div class="form-group clearfix">
                        <label>Tourism types</label>
                       <div class="field-input dropdown-input">
                                                <div class="field-group deleteable">
                            <input type="text" tabindex="1" class='signup-input' id="marketSegments" search="/threebaysover/tags/searchCompanyTags?realm=company.speciality" pre="[{&quot;class&quot;:&quot;com.threebaysover.meta.TourismSegment&quot;,&quot;id&quot;:2,&quot;name&quot;:&quot;Adventure Travel&quot;},{&quot;class&quot;:&quot;com.threebaysover.meta.TourismSegment&quot;,&quot;id&quot;:12,&qquot;name&quot;:&quot;Domestic Tourism&quot;},{&quot;class&quot;:&quot;com.threebaysover.meta.TourismSegment&quot;,&quot;id&quot;:17,&quot;name&quot;:&quot;Familiarisation Tours&quot;},{&quot;class&quot;:&quot;com.threebaysover.meta.TourismSegment&quot;,&quot;id&quot;:43,&quot;name&quot;:&quot;Safari Holidays&quot;},{&quot;class&quot;:&quot;com.threebaysover.meta.TourismSegment&quot;,&quot;id&quot;:44,&quot;name&quot;:&quot;Sailing Holidays&quot;}]" name="" placeholder="Start typing to see list">

                        </div>
                        </div>
                        <p>Select max. 5 types of tourism that you're an expert in.</p>
                      </div>

The problem happens only in screens which are smaller than 15 inch