Posts

Showing posts with the label drop-down-menu

webcomponents - hide dropdown menu on window.onclick

Image
Clash Royale CLAN TAG #URR8PPP webcomponents - hide dropdown menu on window.onclick dropdown menu is created in shadowDOM almost perfect, but the problem is how to hide the dropdown menu when click on any where else in window class NavComponent extends HTMLElement { constructor() { super(); let template = document.currentScript.ownerDocument.querySelector('template'); let clone = document.importNode(template.content, true); let root = this.attachShadow({ mode: 'open' }); root.appendChild(clone); } connectedCallback() { let ddc = this.shadowRoot.querySelectorAll('.dropdowncontainer') let dd = this.shadowRoot.querySelectorAll('.dropdown'); let ddc_length = ddc.length for (let index = 0; index < ddc_length; index++) { ddc[index].addEventListener('click', e => { dd[index].classList.toggle('show'); }); } ...

Unwanted repositioning effect in dropdown menu

Image
Clash Royale CLAN TAG #URR8PPP Unwanted repositioning effect in dropdown menu I've created website with a dropdown menu with different field in it. The problem is on the step 2: as you can see, the fields in that menu are not positioned and positions theirselves in less than a second after . This website is developped in Webdev22, a developping tool which translate "WLanguage" into html/CSS/Jquery. Because of this , I cannot access to the compiled/created JS made by the this software. Most developping is done via the graphic interface but I can add some css, JS etc. manually. It would be helpful if you can share some code which needs correction or we can look after. – AKNair 1 hour ago If you can, please add the compiled CSS/HTML that associated with your question. Before using any WYSIWYG or compi...