Solved

Issue with page layout

Posted on 2014-01-17
3
290 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
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
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 Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

707 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now