Haver you ever seen dropdownlist bug in textarea?

[Min ji Kim]

Hello, guys.

​

While creating a dashboard with dropdownlist in textarea, I found a bug like a picture.

Is this a bug? Or.. did I do something wrong?

Does anyone know how to solve this problem?

​

[Fredrik Rosell]

Hello!

Would it be possible for you to share (attach) that dashboard here (or in a support case)? Having access to the analysis should make it easier to troubleshoot/find an explanation/possible workarounds.

[Min ji Kim]

I attached it!

[Fredrik Rosell]

Hello again,

I just did a quick test and I can also reproduce the behavior your described (I tested using 12.0 HF-017 - the analysis appears to have been created/last saved using 11.4.2 HF-011).

After removing everything but the SpotfireControl elements, the controls are correctly formatted, so the issue does not appear to be with the controls themselves but with how they are used in the page.

Note: There are a number of elements - button, style, script - used in the Text Area that are not permitted with HTML Sanitation enabled. Having it enabled is recommended.

I have not been able to find a solution yet, but I have reached out to someone more experienced with this type of issues who may have some ideas.

 

[Jose Leviaguirre]

Hello Min Jim Kim

Try using the hidden atribute, avoid using the <script> tag on the html markup directly and add it as a JavaScript file instead. Also, try not to use global objects like window and try to stick to these best practice guidelines.

Here is the revised code:

	function openTab(tabId) {
			// Hide all tab content
			const tabContents = document.querySelectorAll('.tab-content');
			tabContents.forEach(content => {
				//content.classList.remove('active');
				content.hidden=true;
				console.log(content)
			});
			const tabButtons = document.querySelectorAll('.tab-button');
			tabButtons.forEach(content => {
				content.classList.remove('active');
			});
 
			// Show the selected tab content
			const selectedTab = document.getElementById(tabId);
			//selectedTab.classList.add('active');
			selectedTab.hidden=false;
 
 
			const selectedTabBtn = document.getElementById("btn"+tabId); 
			selectedTabBtn.classList.add('active');
		}
		//window.onload = () => { 
			openTab('tab1');
		//} 

 

[Min ji Kim]

Thank you very much for your reply Fredrik!

I set it up like the picture below. Is this all I have to do? 

Are you saying that I have to set up other settings than this?

[Min ji Kim]

Thank you very much for your reply Jose :)

We will apply it by referring to the best practices you have told us.

[Min ji Kim]

The same happens without the css style. Attach an example dxp file. I'd appreciate your help.

[Jose Leviaguirre]

In that case, we need to keep the items visible , but outside the screen by positioning them as fixed and offset -1000px

 

function openTab(tabId) {
 
            // Hide all tab content
            var tabContents = document.querySelectorAll('.tab-content');
            tabContents.forEach(function (content) {
                content.style.position="fixed"
		content.style.left="-1000px"
            });
 
            // Deactivate all tab items
            var tabItems = document.querySelectorAll('.tab-item');
            tabItems.forEach(function (item) {
                item.classList.remove('active');
            });
 
            // Show the selected tab content and activate the tab item
            content = document.querySelector('#' + tabId);
            content.style.position="unset"
 
        }
 
        // Show the initial tab (e.g., Tab 1)
        openTab('tab1');