Issue with page layout

Hi Experts,

I have 1 main div and 6 sub divs and am using HTML5,AngularJS and Bootstrap for the page.I have a dropdown in the 1st sub Div and will show the content based on dropdown value .When the page loads  default selected to "none" and  will not show any content.If user selects "option1" from dropdown  will show 3,5, 6 sub divs and if it is "option2" will show 2 and 3 sub divs and so on.My problem is when the page loads, the page layout shrinks as the dropdown value is "none" ie.no content to display. For other options will get verticall scroll bar.

What is best way to resolve this issue so that the page layout should be consistent at all times(1 sub div,2 sub divs, 3 sub divs ,none etc).

Sample html code for my page:

<form name="myform">

<div class="row"> //Main DIV

 
<div class="row"> //sub div 1
     <label class="col-lg-2">
         Status</label>
     <div class="col-lg-5">
         <select class="input-sm" ng-model="option" >
    
       <option>None</option>
       <option>option1</option>
       <option>option2</option>
       <option>option3</option>
       <option>option4</option>    
       <option>option5</option>  
       <option>option6</option>              
         </select>
     </div>
 </div>


 <div class="row"> //sub div 2
     <label class="col-lg-2">
         Row1</label>
     <div class="col-lg-5">
     
     </div>
 </div>


 <div class="row"> //sub div 3
     <label class="col-lg-2">
         Row2</label>
     <div class="col-lg-5">
            
         </select>
     </div>
 </div>

 
<div class="row"> //sub div 4
     <label class="col-lg-2">
         Row3</label>
     <div class="col-lg-5">
                       
         </select>
     </div>
</div>

</div>

<form>

Open in new window

ksd123Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Sar1973Connect With a Mentor Commented:
You should give to each div an ID (such as myDiv1, myDiv2, etc.) and add this script that fires associated to the main div/page onload event and to the dropdown onchange event:
for (i = 0; i < N; i++) {
	if (document.getElementsByName("myCombo")[0].selectedIndex<=i) {
		eval("document.getElementById('myDiv"+i+"').display='inline';");
	} else {
		eval("document.getElementById('myDiv"+i+"').display='none';");
	}
}

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
There is not enough information in your post to answer your question. Please post a link to the page you are referencing.

(as a side note: this is not a simple yes or no answer - you are not motivating many people to help you by assigning a mere 200 pts to it. On what basis did you make that decision? I never understood why anyone would not assign the full points, it's not in your interest.)
0
 
ksd123Author Commented:
Thank you
0
All Courses

From novice to tech pro — start learning today.