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.

currenty

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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -