0

The issue is this:

In my APP, I need to knw if a SELECT element is visible or not in the DOM under the MATERIALIZE framework. (Please do not mark this question as already discussed in here until you read it until the end.

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>

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

I have already 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?

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.

Does anyone have the same problem?

Abraham Petit
  • 1
  • 1

1 Answers1

0

The workaround that I found for materializecss 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"

Abraham Petit
  • 1
  • 1