css style doesn't work on top menu across all dashboards and charts #29826
Comments
|
Hey @pengpengSir! 👋 I'm here to help you with any bugs, questions, or contributions you have for the repository. Let's squash those bugs together! To resolve the issue where the CSS style for the top menu in Superset has changed from horizontal to vertical after updating from version 2.0 to 4.0, you need to ensure that the The Here is the relevant part of the code: useEffect(() => {
function handleResize() {
if (window.innerWidth <= 767) {
setMenu('inline');
} else setMenu('horizontal');
}
handleResize();
const windowResize = debounce(() => handleResize(), 10);
window.addEventListener('resize', windowResize);
return () => window.removeEventListener('resize', windowResize);
}, []);Additionally, ensure that the import { styled } from '@superset-ui/core';
import { Menu as AntdMenu } from 'antd';
const MenuItem = styled(AntdMenu.Item)`
> a {
text-decoration: none;
}
&.ant-menu-item {
height: ${({ theme }) => theme.gridUnit * 8}px;
line-height: ${({ theme }) => theme.gridUnit * 8}px;
a {
border-bottom: none;
transition: background-color ${({ theme }) => theme.transitionTiming}s;
&:after {
content: '';
position: absolute;
bottom: -3px;
left: 50%;
width: 0;
height: 3px;
opacity: 0;
transform: translateX(-50%);
transition: all ${({ theme }) => theme.transitionTiming}s;
background-color: ${({ theme }) => theme.colors.primary.base};
}
&:focus {
border-bottom: none;
background-color: transparent;
@media (max-width: 767px) {
background-color: ${({ theme }) => theme.colors.primary.light5};
}
}
}
}
&.ant-menu-item,
&.ant-dropdown-menu-item {
span[role='button'] {
display: inline-block;
width: 100%;
}
transition-duration: 0s;
}
`;
const StyledNav = styled(AntdMenu)`
line-height: 51px;
border: none;
& > .ant-menu-item,
& > .ant-menu-submenu {
vertical-align: inherit;
&:hover {
color: ${({ theme }) => theme.colors.grayscale.dark1};
}
}
&:not(.ant-menu-dark) > .ant-menu-submenu,
&:not(.ant-menu-dark) > .ant-menu-item {
&:hover {
border-bottom: none;
}
}
&:not(.ant-menu-dark) > .ant-menu-submenu,
&:not(.ant-menu-dark) > .ant-menu-item {
margin: 0px;
}
& > .ant-menu-item > a {
padding: ${({ theme }) => theme.gridUnit * 4}px;
}
`;
const StyledSubMenu = styled(AntdMenu.SubMenu)`
color: ${({ theme }) => theme.colors.grayscale.dark1};
border-bottom: none;
.ant-menu-submenu-open,
.ant-menu-submenu-active {
background-color: ${({ theme }) => theme.colors.primary.light5};
.ant-menu-submenu-title {
color: ${({ theme }) => theme.colors.grayscale.dark1};
background-color: ${({ theme }) => theme.colors.primary.light5};
border-bottom: none;
margin: 0;
&:after {
opacity: 1;
width: calc(100% - 1);
}
}
}
.ant-menu-submenu-title {
position: relative;
top: ${({ theme }) => -theme.gridUnit - 3}px;
&:after {
content: '';
position: absolute;
bottom: -3px;
left: 50%;
width: 0;
height: 3px;
opacity: 0;
transform: translateX(-50%);
transition: all ${({ theme }) => theme.transitionTiming}s;
background-color: ${({ theme }) => theme.colors.primary.base};
}
}
.ant-menu-submenu-arrow {
top: 67%;
}
& > .ant-menu-submenu-title {
padding: 0 ${({ theme }) => theme.gridUnit * 6}px 0
${({ theme }) => theme.gridUnit * 3}px !important;
span[role='img'] {
position: absolute;
right: ${({ theme }) => -theme.gridUnit -2}px;
top: ${({ theme }) => theme.gridUnit * 5.25}px;
svg {
font-size: ${({ theme }) => theme.gridUnit * 6}px;
color: ${({ theme }) => theme.colors.grayscale.base};
}
}
& > span {
position: relative;
top: 7px;
}
&:hover {
color: ${({ theme }) => theme.colors.primary.base};
}
}
`;
export const Menu = Object.assign(AntdMenu, {
Item: MenuItem,
});
export const MainNav = Object.assign(StyledNav, {
Item: MenuItem,
SubMenu: StyledSubMenu,
Divider: AntdMenu.Divider,
ItemGroup: AntdMenu.ItemGroup,
});Ensure that these styles and the |
|
Sorry, I'm not quite understanding the issue. Are you saying you have some customized CSS that's no longer supported after the upgrade? |
|
@rusackas thanks for your replay! yesterday it works well, however, I try to add this piece of code (as shown in the picture) in superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx, then the top menu turns in to mess. |
Screenshot
Description
css style should be horizontal, but now it turns into vertical. I don't know where I just modified because I am updating superset from 2.0 to 4.0, can you tell me how to solve this , Thanks!
Design input
[describe any input/collaboration you'd like from designers, and
tag accordingly. For design review, add the
label
design:review. If this includes a design proposal,include the label
design:suggest]The text was updated successfully, but these errors were encountered: