Solved

Handling the alignment of the Drop down Divs

Posted on 2016-09-21
11
56 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:Howard Bash
  • 6
  • 5
11 Comments
 
LVL 54

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:Howard Bash
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 54

Expert Comment

by:Julian Hansen
ID: 41810817
Sorry - I think you lost me there - can you post a screen shot of the problem.
0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
LVL 1

Author Comment

by:Howard Bash
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 54

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
 
LVL 1

Author Comment

by:Howard Bash
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 54

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:Howard Bash
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 54

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:Howard Bash
ID: 41816566
Great stuff
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41838162
@hbash,

Do you still need assistance with this question?
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

808 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