Solved

Issue with page layout

Posted on 2014-01-17
3
308 Views
Last Modified: 2014-01-22
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

0
Comment
Question by:ksd123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39788330
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
 
LVL 9

Accepted Solution

by:
Sar1973 earned 200 total points
ID: 39790801
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
 

Author Closing Comment

by:ksd123
ID: 39799323
Thank you
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question