How to tell if a Select element is visible in the DOM? (in Materializecss Framework)

Question

I need to know if a SELECT element is visible or not in the DOM. So far I have been using document.getElementById('xx').offsetParent!==null to check that, and it has worked fine for me so far.

However, since I migrated my HTML code to Materializecss, my visiblity checking function does not work anymore.

This piece of code works perfectly in pure HTML

<div class='input-field col s12'>        

    <select  name='V18' id='V18'   />
        <option value='' disabled selected>Select</option>
        <option id='V18_1'  value='1'>Choice 1</option>
        <option id='V18_2'  value='2'>Choice 2</option>
        <option id='V18_3'  value='3'>Choice 3</option>
    </select>

</div>
<script>

if
    (document.getElementById('V18').offsetParent!==null){  
        alert('Select is visible');
    }else{
        alert('Select is NOT visible');
 }

</script>

But once I initialize the Selects in Materialize css, by calling the function $('select').material_select(), my visibilty checking function does not work anymore.

My, question is...How can I check if a SELECT element is visible or not within the Materialize Framework? Seems that after initializing the selects, they loose some critical Javascript properties, somehow.

I have tested all the options discussed on these links, and none of them work for Materialize selects:

Check if element is visible in DOM

How do I check if an element is hidden in jQuery?

[`window.getComputedStyle`](https://stackoverflow.com/a/41698614/3757232) *will* tell you if an element is visible. Frameworks do not change the way the underlying technology works. Voting to close. — Jared Smith, Jun 08 '17 at 20:30
Possible duplicate of [Check if element is visible in DOM](https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom) — Jared Smith, Jun 08 '17 at 20:30
No no, this is not a duplicated question. My question is specifically to Materializedcss. None of the methods that runs perfecly on pure HTML seems to work on materialized selects.. — Abraham Petit, Jun 09 '17 at 13:46

score 0 · Answer 1 · answered Jun 09 '17 at 14:08

The solution that I found was to treat selects in a different way from radion buttons and texts,

For selects I detect visibility by using: window.getComputedStyle(element)).display === 'none'

For the rest kind of elements I detect visibility by using: "document.getElementById(element).offsetParent!==null"

How to tell if a Select element is visible in the DOM? (in Materializecss Framework)

1 Answers1