Comments (4)
Ugh.
So the CSS that is causing this comes from core/modules/system/css/menu-dropdown.theme.css, where the un-hovered CSS is at line 96:
.menu-dropdown li.has-children > a {
padding-right: 24px;
}
and the hovered state is at line 13:
.js .menu-dropdown a,
.js .menu-dropdown a:hover,
.js .menu-dropdown a:focus,
.js .menu-dropdown a:active {
/* make room for the toggle button (sub indicator) */
padding-right: 58px;
font-weight: normal;
line-height: 17px;
text-decoration: none;
}
The padding-right switches from 24px to 58px, hence the jump.
We could presumably add some really specific CSS that sets the padding-right back to 24px for just this particular case (?).
from bootstrap_lite.
My concern about fixing this issue is the potential to break existing sites that have already compensated for this problem. If we had plans for a 1.x-2.x branch, we could put this change there. But, I'm not sure if that is necessary. I'm inclined to think that it might be fine to fix this in the 1.x-1.x branch.
from bootstrap_lite.
I've found this same issue to be present with other popular themes:
- Corporate KISS (not in the main menu, but if I put a menu in the right sidebar of Moscone flipped, it happens there)
- Snazzy (ditto)
- Cleanish (both main menu and sidebar)
- Lumi (both main menu and sidebar)
All the themes that used dropdown menus (versus permanently expanded ones) and didn't display jumpiness overrode the relevant CSS in the theme.
So my conclusion is that the default CSS in core is inherently jumpy, and themes will have to override it to eliminate the jumpiness. So I think that we are fully justified in adding the CSS that you've added in the PR to the theme; I think it qualifies as "a compensation for an inconsistency in core."
And while it's possible that subthemes might have implemented their own compensation if this issue affected them, since your CSS selectors duplicate the selectors used in core, odds are that their compensation would override this CSS as well, so unlikely to break sites.
Conclusion: I think this is good to add to the next version release. In fairness to users, we should mention it in the release notes, but I think it's OK to add.
from bootstrap_lite.
So my conclusion is that the default CSS in core is inherently jumpy
...cough... see also this comment in Scenery
It's not only that, but things are even worse in RTL.
I didn't bother to open a core issue for it, because CSS changes usually stall there, anyway. So I silently fix it in every theme. At least for the main menu (but might miss special combinations).
from bootstrap_lite.
Related Issues (20)
- Support Bootswatch 4.0 themes HOT 3
- Future Plans for Bootstrap Lite HOT 1
- Release Plans HOT 4
- Move the Bootswatch tab on the theme settings to top HOT 4
- Consider providing a local copy, rather than the CDN HOT 6
- Roadmap issues: tooltips and popovers
- Roadmap issues: Different container settings for different layouts
- Fatal error on PHP 7 HOT 6
- JQuery UI issue HOT 3
- Subtheme doesn't save settings HOT 1
- Missing config options vs D7's bootstrap theme HOT 1
- Missing body classes HOT 6
- Header region abnormal output HOT 2
- Email element in webforms do not get the form-control class.
- Bootstrap broken when using custom template and bundled version of Bootstrap HOT 3
- Poor handling of site Slogan HOT 1
- Reorganize libraries, expand documentation of icons HOT 4
- Question about (lack of) responsiveness with image fields HOT 7
- Front Page with new content type
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap_lite.