lundi 30 mars 2015

Conditional positioning with Sass of relative div, based on absolute psoition

I have the equivalent of a dropdown menu that is attached to a button. The button can be moved around the page. I currently have it so that you can specify if the dropdown flows left or right from wherever the button is



Right:

BUTTON
_/\______
|Dropdown|

Left:
BUTTON
______/\_
|Dropdown|


That's all fine except for when it gets too close to the right of left edge of the containing div, in which case it gets cut off (overflow:hidden).


What is the best approach to having it default to Left or right, but switch or adjust / offset its final position were to be too close to the edge?


The dropdown can also vary in width depending on the content.


My inital idea of how to approach this problem would be:



  1. Calculate the width of the dropdown

  2. Find the initial x position dropdown based on its parent's position

  3. Calculate final edge locations based on x + width

  4. Adjust x with a simple min or max type of equation


I just not sure how to do 1,2, or 3 :)


Thanks for your help!





Aucun commentaire:

Enregistrer un commentaire