Solved

Handling the alignment of the Drop down Divs

Posted on 2016-09-21
11
50 Views
Last Modified: 2016-10-14
I had this question after viewing Positioning of the DIVs.

So,  all that was suggested works as stated.  However,  the dilemma is that the drop downs can exceed the page width (the rightmost 1 or 2 at the moment) and the dropdown for those cases cannot display the links in columns and has the displayed vertically.  How can I change my CSS to handle that in a generic way?

If not,  what kind of post generation jQuery statements might I use to cause the rightmost dropdowns to instead of dropping down and to the right,  to drop down and to the left?
0
Comment
Question by:hbash
  • 6
  • 5
11 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41810090
I am not sure I understand. In this sample - the menus are all aligned to the left - as you add top level items to the right the sub menu will still be left aligned?
Can you show us a link / screen shot of the problem?
0
 
LVL 1

Author Comment

by:hbash
ID: 41810704
I think we had discussed that the requirement was to have these dropdowns align with the toplevel link on dropping down.

I agree that a solution would be to have them all left align.  But commenting out the left:0 attribute satisfied the original requirement but surfaced this issue when there are too many items with multiple columns, causing the drop down to be two wide.

It would be great if I could determine the widths of all the drop downs (jQuery?) and change the drop downs for the drop downs that would not display the multiple columns due to the page width constraint.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41810817
Sorry - I think you lost me there - can you post a screen shot of the problem.
0
 
LVL 1

Author Comment

by:hbash
ID: 41810866
Sorry for the poor description.  Here is a figure that hopefully will be clearer.  I took a good case and marked and commented it up.  Thanks.

DropDownWidthIssue.png
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41810975
Ok and how would you like it to look - not sure I am understanding the problem here.

Either you left align all the menus or you making the relative to the parent - in which case wide sub menus are not going to work due to the Right Hand border issue.

Can you show me how you would like it to look and we can take from there (apologies but we are often dealing with multiple questions, on volunteered time - the more you can spoon feed us the easier it is to find a solution).
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 1

Author Comment

by:hbash
ID: 41811135
In the figure above, with the "too small border" in affect,  I would want only that rightmost dropdown to be shifted left enough that it would display the columns in their containing div as they do in the "actual width" case (fitting in available space).  

Without special handling for those dropdowns that collide with the "too small border"  the dropdown doesn't look as desired and displays all the links in one column.

Either a shift the transgressing dropdown(s) by only what it needs, or centering it under the navigation panel or leftmost as all the dropdowns would appear with this:

.sub-menu {
  background: #fff;
  border: 1px solid black;
  display: none;
//  left: 0;
  position: absolute;
}

Open in new window


and the "left: 0" uncommented.  

I would think that somehow in javascript/jQuery it would be possible to adjust the attribute(s) of the offending sub-menu(s) by querying the total width, their position on the screen and the sub-menu(s) widths in the document ready event.  I'm not sure of the details of how, but it seems like programmatically something like that could work.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41811390
Do you mean something like this

http://www.marcorpsa.com/ee/t1578a.html

Basically you position the left: auto but the last menu item's submenu you make right 0
.sub-menu {
  background: #fff;
  border: 1px solid black;
  display: none;
  left: auto;
  position: absolute;
}
.item:last-child .sub-menu {
	right: 0;
}

Open in new window

0
 
LVL 1

Author Comment

by:hbash
ID: 41811420
Pretty cool.  But not exactly.  Because the DIV structure is generated from a JSON file and that there is no way to no before you generate the DIVs which dropdown will have two many columns, the solution you have shown (which again is cool) doesn't know which is the rightmost DIV that can pop below the top level link before it needs to be shifted.

By the way,  using left:0 for the last-child is closer, but again is a hardcoding of which sub menu needs special treatment.  For example,  if the 2nd DIV had enough columns, it would need to have the "LEFT:0" setting.
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41811465
I think you are making this more complicated than it needs to be. The permutations of menu's and screen sizes and having to calculate widths probably can be done with some javascript but when you start getting into that level of detail for a menu you should be reconsidering what it is you are trying to do.

The type of menu you are describing (a multicolumn drop-down) is in wide use but typically results in a dropdown panel  that spans the entire width of the menu bar - not selectively left / right or under its parent depending on content.

Two samples I found
1. Oracle
https://www.oracle.com/index.html

2. This one is probably what you are trying to do ?
http://www.cssplay.co.uk/menus/multi-column.html
0
 
LVL 1

Author Comment

by:hbash
ID: 41816566
Great stuff
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41838162
@hbash,

Do you still need assistance with this question?
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Change properties of a dialog box 1 19
Urgent Help with HTML CSS Positioning 9 20
Login area of a page 4 19
jqplot Pie Chart 2 12
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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 …

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

13 Experts available now in Live!

Get 1:1 Help Now