0

This is my CSS-code:

div.dropdown
{
    width: 100%;
    height: 130px;
    background-color: white;
    border: solid thin #666;
    position:absolute;
    font-size: 70px;
    padding-top: 30px;
    text-align:center;
    top: calc(100% - 320px);
}

If I try to get the top-property in javascript using window.getComputedStyle(dropdown).top, I get an empty value.

How can I get the top value?

I found out that if I set the top-property to calc(100%) (just for testing), the aforementioned method works well.

This is the javascript code:

function show_dropdown(dropdown_id, dropdown_menu_id)
{
    var dropdown = document.getElementById(dropdown_id);
    var menu = document.getElementById(dropdown_menu_id);
    var menu_entries = Array.prototype.slice.call(menu.childNodes);

    var dropdown_top = parseInt(window.getComputedStyle(dropdown).top);

    ...  
}
pnuts
  • 58,317
  • 11
  • 87
  • 139
tubu
  • 11
  • 2
  • You should post your JS along with the CSS. If you can make a stack snippet that reproduces the problem, that would be ideal. – ssube Aug 20 '15 at 15:04
  • @ssube I added the JS code – tubu Aug 20 '15 at 15:15
  • @tubu I'm not able to reproduce the error with your given code. Check this fiddle https://jsfiddle.net/41mngkn0/1/ it alerts the dropdown_top as it should. – Saumil Aug 20 '15 at 15:16
  • @Saumil Soni In Safari I get the message "dropdown_topNaN" in Chrome it's "dropdown_top315". So in Chrome it's working. But what is the problem in Safari? – tubu Aug 20 '15 at 15:26
  • @tubu check out this link http://caniuse.com/#feat=calc It says that "calc" may have unexpected results in some browsers due to the expressions. I will recommend you find some alternative to calc – Saumil Aug 20 '15 at 15:28
  • @SaumilSoni Ok. Which other function could I use? Btw I'm using Safari 8.0.7 on OS X 10.10.4. – tubu Aug 20 '15 at 15:34
  • @tubu see this link http://stackoverflow.com/questions/16034397/css-calc-alternative – Saumil Aug 20 '15 at 15:48
  • Ok that worked. Thanks. – tubu Aug 21 '15 at 10:32

0 Answers0