css - Prevent div from exceeding screen -
i have div displaying under button. works file long button on left side of screen. if button on right box exceeds size of screen.
i box try display under button , right if possible. if not possible as needed screen left right edge of modal div edge of screen. preferbly jqlite if possible.
hope makes sense , can help.
the markup:
.dd-combo .dd-combo-wrapper { z-index: 10; text-align: left; background-color: #ffffff; position: absolute; max-width: 1024px; min-width: 900px; min-height:300px; max-height:600px; top: 100%; left: -250px; right:10px; width: 1700%; margin: 5px auto; box-shadow: 10px 10px 5px #888; overflow:scroll; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } .dd-combo .dd-combo-wrapper:before { content: ''; display: none; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 11px solid #bf1e4b; position: absolute; top: -10px; left: 50%; margin-left: -10px; }
i don't know of straight way css if button can anywhere on screen , not change class based on left or right position. if going in javascript i'd like:
function whenmenuopens(){ if(themenu.getboundingclientrect().right > window.innerwidth){ themenu.css({'position':'fixed', 'right':0}); //or relative offset of difference in overlap, etc }else{ //whatever doing before } }
Comments
Post a Comment