Web Component (TimePicker), toggle visibility

[gcatellier]

Hi,
Trying to retrofit html web components into a internal tool at my company and I am having a hard time on a simple task where we click a “click Icon” and the Timepicker shows but this happens. (See below)
Any Ideas Why I cannot simply (show/hide) the entire element and show it when a user clicks on a button/icon/trigger ?
Any help would be awesome.

 
Thank you.

[yavordashew]

Hi gcatellier,
Unfortunately I was not able to reproduce the issue you have if you can create a code example for us it will be the best in order to give you the best solution.
However I have made a little code snippet which showcases how to have similar functionality:
In your HTML file:

    <smart-date-time-picker calendar-button enable-mouse-wheel-action drop-down-position="center-bottom" spin-buttons spin-buttons-position="left"></smart-date-time-picker>
    <button id='toggleElement'>  Toggle element</button>
    <!-- scripts -->
    <script type="module" src="../../../source/modules/smart.datetimepicker.js"></script>
    <script type="module" src="index.js"></script>
	

In your JS file:

window.onload = ()=>{
    const button = document.getElementById('toggleElement'),
          datePicker = document.querySelector('smart-date-time-picker');
    button.addEventListener('click', () => {
        if ( datePicker.style.visibility === 'hidden' ) {
            datePicker.style.visibility = 'visible';
        }
        else {
            datePicker.style.visibility = 'hidden';
        }
    })
}

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts