New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS issue with horizontal tabs nested inside vertical tabs #38289
Comments
the css of the site and admin templates is not identical |
When I look at the styles being applied the only file that is applying the CSS is joomla-tab.css and it is the file site and admin. This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38289. |
But yes, the templates are different but I don't see how the template can affect the orientation=vertical part being applied. But I am no CSS expert by any stretch. This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38289. |
I note that com_config has a similar structure to what I am attempting to accomplish. The lefthand navigation bar is created manually rather than through a vertical tabset. Might that be because the combination of vertical and horizontal was not working as I am seeing, or that they wanted to do something beyond the capabilities of the HTMLHelper uiTab system? This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38289. |
What you call vertical tab set (the left sidbar) in the backend is an accessible dropdown menu, not a tabset. This was quite another concept. |
Steps to reproduce the issue
I have a vertical tabset and on each tab of this vertical tabset I have a horizontal tabset. The CSS rules appear to be applied differently between the site view and the admin view. On the admin view parts of the vertical CSS is being applied to the horizontal tabs.
Expected result
The tabs should be rendered the same in both views.
Actual result
They are not. The styling of the horizontal tabs tabs do not match the vertical ones. Furthermore, on the site view there is a gap between the vertical tabset and the tab data that it points to.
System information (as much as possible)
Basically a vanilla version of Joomla 4.1.5. I am working on modifying a component from J3 to J4.
Additional comments
I am attaching a number of screen images of the resulting rendering. Below is the actual markup I am using in both cases:
Site View.png : Note that the tab for V1 Horizontal 1 is styled correctly. Also note the gap between the vertical tabset and the tab data to the right of it.
Site View Styles.png : Note the styles
Admin View.png : Note that the tab for V1 Horizontal 1 is styled incorrectly. Also note there is no gap as there was on the Site View.
Admin View Styles.png : Note the styles. You will see that on the button of the selected Horizontal tab on the third style down it is showing orientation=vertical. This can't be right.
The text was updated successfully, but these errors were encountered: