Question
Air Force Office of Scientific Research
US
Last activity: 13 Feb 2020 19:26 EST
Tab Nav Controls and Misalignment of last tab on screen resize
We are experiencing an issue in our application with the resizing of our screen. When we make the window smaller, the controls push the last tab (in this case, Attachments) to below the main content section, until you reach a certain point, at which it then pulls the tab back up to the top and adds tab-nav-controls.
When you resize the screen larger at this point, it does not move the final tab, and simply removes the side scroll tab-nav-controls and returns the tab structure to it's original state.
We believe this to be somewhere in the javascript that checks for the total width of the tabs and changes the tab-nav-controls from display:none to display:inline-block, but are unable to find where those may be or even if that's the problem.
We have tried using the breakpoints in the layout group we are using, but again, this has provided no change.
I did see an old post about this situation. The only possible solution given was turning on Defer Load for each tab section, this did not resolve the issue.
Attachment descriptions:
1. Normal full view. Tabs are all in line and where they should be.
2. Window is smaller than full adjusting width of screen. Attachments tab pushes below the content section.
3. Continued decrease of window triggers css change adds scroll buttons and returns attachments back to the main line of tabs.
We are experiencing an issue in our application with the resizing of our screen. When we make the window smaller, the controls push the last tab (in this case, Attachments) to below the main content section, until you reach a certain point, at which it then pulls the tab back up to the top and adds tab-nav-controls.
When you resize the screen larger at this point, it does not move the final tab, and simply removes the side scroll tab-nav-controls and returns the tab structure to it's original state.
We believe this to be somewhere in the javascript that checks for the total width of the tabs and changes the tab-nav-controls from display:none to display:inline-block, but are unable to find where those may be or even if that's the problem.
We have tried using the breakpoints in the layout group we are using, but again, this has provided no change.
I did see an old post about this situation. The only possible solution given was turning on Defer Load for each tab section, this did not resolve the issue.
Attachment descriptions:
1. Normal full view. Tabs are all in line and where they should be.
2. Window is smaller than full adjusting width of screen. Attachments tab pushes below the content section.
3. Continued decrease of window triggers css change adds scroll buttons and returns attachments back to the main line of tabs.
***Edited by Moderator Marissa to update platform capabilities; change from General to Product***