I am new to ignition and was building my first project when I came across an issue I cannot seem to fix.
My Issue
When navigating between windows using the tab strip, everything works as expected when double clicking the tabs. When I single click the tabs, the window navigates as expected, but the highlighted tab (“selected color”) seems to vary randomly. Ex. You are on page 1 of 4. You single click the page 3 tab and it goes to page 3, but the page 4 tab is highlighted as if it was the page navigated to.
Is there a difference in functionality between single and double clicks for the tab strip (I don’t see anything in the help manual saying so)?
My process:
I created a new ignition project with four windows.
A tab strip component was created on the main window.
The remaining three windows were created by duplicating the main window, changing the name and then setting the “Open on startup” option to off.
Navigation settings on the tab strip were set to the appropriate windows. This was checked in all four windows, and all are correct. The hover, selected and un-selected color settings are the same for each tab.
Both the designer preview and launched versions exhibit the same behavior.
What I have tried:
I’ve tried saving everything and reloading the project. No dice.
I’ve tried setting the “hover” and “un-selected” colors to match to make sure I wasn’t accidentally hovering over the tab and seeing it as a “selected” tab. No dice.
I’ve confirmed no mouse action events were set.
Since you have a tab strip on all 4 windows, when you click once, you are clicking the tab strip on the open page. The new page is opened and now you are seeing the tab strip on that page, which is different than the one you clicked and has a different selected value than the one you clicked. This is why it seems random which tab is selected. It is displaying the tab that was last selected on that page when the page was closed.
When you ‘double click’, you are clicking 2 different tab strip components. The one on the first page, and then the one on the second page. This gives the appearance of double clicking the same component, but its really 2 different components.
If you put this tab strip into a docked header and removed it from all the windows, it should work as expected. Then you would only have 1 tab strip, not 4.
Is there a way to keep the docked window and root container transparent?
I have an anchored gradient image as a background on my other windows that I navigate to. When using the tab header, I get a solid color rectangle at the top of every window, even when setting the background color of the root container to transparent. Any ideas on this one?
I think even if you set the root container transparent, what you are seeing is the color on the window itself.
You might need to set the background of the docked window to match the background of your main window. The background of the main window is not actually behind your docked window. The docked window sits above the main window.