I have my menu working the way I want with the exception that menu elements are displayed from the top down as supposed to bottom up. I tried changing the CSS properties, but still can't get it working. I need my DIV container to be align on the bottom of the parent container. I used 'bottom: 0' CSS property but that doesn't have any affect using both 'position: absolute' and 'position: relative'.
How can I align all the elements within the parent DIV be displayed at bottom: 0 (bottom up)?
Then click on the Projects bottom link (refresh if you need to reset the menu items). I need that same behaviour I already have, just the menu items should start from the bottom up and be aligned all the way to the bottom.
Any suggestions?
Thanks,
Partizan
The best way to accomplish this is to either put the divs inside the sought after parent element. Ergo the <li> you want to associate these links with. Give the parent <li> a style of position:relative. The on hover set the position of the child div or li to abosulte and left:0;top:0;. Then from there you can style it closer or farther with margin.
Try using padding-top to push them down with an id or class on each sub menu.
Then if that fails, try using min-height: auto; on each parent.
Related
I have a parent div which contains many child divs and child divs can also have child.my top parent div contains a scroll bar , if any of the child div grows i want the scroll bar of the parent one to come down to make the grown content visible to the user with out scrolling down.the scroll bar should automatically come down when any of the div grows to make the coontent visible using css.this is the css which i applied on the parent div.
.parent{
width:100%;``
height:95%;
overflow-x:auto;
position:relative
}
Suppose you want scroll down to the copyright section of this page.
just right click on this page, click view source and find out the id of the copyright section div.
which is "copyright".
now add this to the current url.
http://stackoverflow.com/questions/32494082/auto-scroll-down-parent-div-when-div-grows-using-css#copyright
now hit this url in the browser and see the magic.
I have a drop down menu created with CSS. The menu is in Dropdown Menu. The problem is that when I try to access the child element , they are not coming properly. I have given some margin between the parent and the child elements,and when the mouse cursor points to that gap, the drop down menu hides. Is there any way I can maintain a margin and still able to see the child list,like in jquery.
As Morpheus suggested, set the padding on the container div. To get the margin effect, move the background style to the child div.
I have a div (it's a popup for an openlayers map, but it could pretty much be any fixed size div), that contains a jquery ui menu (which is wrapped in a ul). The menu doesn't fit inside the div very well, so I'd like to make the menu float above it so that as the menu grows I don't have to grow the size of the containing div. Is this possible?
The containing div is itself positioned absolutely, I've tried setting the ul that represents the menu to position:absolute;z-index:100 but that doesn't work. I've also tried setting overflow:visible with no joy.
This screenshot shows the issue I have:
I've added a jsfiddle that opens a popup when you click the small orange circle, and you can see that the menu inside there is bigger than the containing div.
If you tell me that my answer is not what you mean I will delete it cause I am not sure what you really need to do. You want this scrolls to disappear and if the text is bigger than the popup just to float over no matter it is going outline ?
If this is what you want you have to remove the overflow: auto from .olFramedCloudPopupContent and again to remove overflow: auto from inline style of the element #chicken_contentDiv (I am not sure that you add it with jQuery).
I'm working on an interface that utilizes a list of items within a scrollable div, some of which utilize a rollover menu on hover that extends outside of the div. Disabled scripting compatibility is a priority for the site, so I'm trying to see if the interface can be done with only CSS before I start getting into other compromises.
I've got some examples below. The menu in question is on the right side with heading 'select projects'. The third list item from the top in each page contains a rollover menu.
In order to keep the rollovers positioned relative to the their parent when scroll position changes, I positioned the parent li's relative and the child ul's positioned absolute.
EXAMPLE 1
Of course, once overflow:auto is on and the scroll in place, the rollovers are cut off from displaying.
EXAMPLE 2
I tried removing the relative positioning of the parent li's, and retaining the absolute positioning of the rollovers to free them from the div, but then they do not position properly when scroll position is changed.
I can only post two links but if you want an illustration, it's here: eypaedesign.com/markets-rollover-issue-no-relative.htm
With the exception of changing the UI, is there a combination of properties I'm not seeing here that can be used to make this interface work on CSS? I could position the entire div as absolute, and add a large amount of left padding for the rollovers to appear in, but that seems pretty inelegant.
Thanks folks -
With only CSS, you are limited to only one or the other: overflow: auto or overflowing hover-menus. Using separate visible and auto properties for overflow-x and overflow-y doesn't work, so I think your best bet is to go with the padding solution you were considering.
With proper use of absolute positioning and z-index (in case you are concerned about padded menu container hit-blocking any elements under the padding), you should be able to do it without destroying the rest of your layout. You'll have to control the size of all child elements inside the scrollable container of course, so that they don't extend to the full width of their padded parent.
Adding these properties - with no other changes - seems to work on your site, so perhaps you can get away with it easily:
#project_menu {
padding-left: 300px;
margin-left: -300px;
}
.center {
position: relative;
z-index; 10;
}
if you put a height of 293px in your class nav it should be ok.
Or in you project_menu ID, As I can see that ID has a height of 218px and your UL is 293px.
By changing one of those 2 you should be ok. It depends on how you set it affect other element.
But using project_menu ID should be just good.
I have a menu bar that has some child elements (including an input box, 2 dropdown menus, and 1 link to show a divbox under the menu bar). http://jsfiddle.net/thapar/GLwRr/
The menu bar currently conforms to the height of the child element with the greatest height. I would like to have the menu bar's other child elements to also respect the height of the largest child element. However, unless I give the menu bar an explicit height, height:100% on any of the children doesn't work.
Is there any way to have the child elements fill the height of the menu bar without using explicit heights in pixels/em's?
Setting the CSS on the container to display: table; and the child elements to display: table-cell; may give you the desired result.
If your container is relative, and your children are relative, you can do that by using the top: and bottom: css attributes.
Check out this jsbin project for what I'm talking about. Most projects have a well defined head section that maintains its height, so this solution would work in that case. If your layout is completely dynamic, I'm not sure how you can do that without a javascript solution.
http://jsbin.com/onubed/1/