Comments (7)
The issue was indeed the sum of a number of things:
Vaadin Designer does not allow multiple <dom-module>
in one file, so I made my main-layout
dom-module
(in main-layout.html
) into a theme-for
in order to be able to work around the limitation with 100% height in <vaadin-app-layout>
. However, Designer automatically puts :host { display:block }
in each file, so I inadvertently applied that to <vaadin-app-layout>
before realising (later, the bug was not obvious at first).
The reason I decided to apply the theme-for
on the main-layout
because 1) that's where I needed it, 2) I wanted to minimize the amount of files for my particular case, 3) the Project Base
did not come with a suitable file (shared-styles
?) and 4) I don't actually know what the correct place is or if it's ok to do it this way.
tl;dr vaadin-app-layout requiring theme-for + no shared-styles in Project Base + lazy programmer + Designer adding display:block + Designer not allowing multiple dom-module = bugging vaadin-app-layout.
Quite a sequence of events in my case... vaadin-app-layout
could still make it harder for me to shoot myself in the foot, by making it hard to change things that should not be changed. The way the bug manifested itself (later, only at the smaller breakpoint, making it hard to find) speaks for fixing, while the fact that I have to somehow apply display:block makes this quite an edge case and speaks against fixing.
from vaadin-app-layout.
The issue is not reproduced. Designer by default sets display block only for the parent element, and that doesn't break app-layout.
The described issue happened by manual overriding display
value via theme-for="vaadin-app-layout"
module.
@jouni Should we anyway set it important?
from vaadin-app-layout.
@emarc, can you add more detail to this issue? How did you end up in the situation that app-layout was display: block
?
from vaadin-app-layout.
I made my main-layout dom-module (in main-layout.html) into a theme-for in order to be able to work around the limitation with 100% height in
Luckily such limitation no longer exists, it was fixed in #56
could still make it harder for me to shoot myself in the foot, by making it hard to change things that should not be changed
We did this as part of #59
Thanks for the feedback and the detailed explanation, hopefully these small changes will save some time and surprises
from vaadin-app-layout.
Just realized, that having display: ... !important;
means that the component can’t be hidden using display: none;
. Probably not a relevant use case for app layout, but for some other components very much a critical use case.
from vaadin-app-layout.
You probably mean "cannot be hidden"? Indeed, !important
always has fun side effects.
EDIT lol I like how I pointed out your typo and then wrote "ben (be)" myself
from vaadin-app-layout.
Yes, meant to write “can’t”. Fixed now.
from vaadin-app-layout.
Related Issues (20)
- Minor Material theme UI tweak HOT 1
- mention breaking changes in 2.0.0+ release notes HOT 1
- Material: drawer toggle does not match the style guide
- Lumo drawer toggle has arbitrary size and doesn't look nice
- Navbar does not apply vertical alignment to items
- Dark Theme is broken in Safari and Edge HOT 5
- Change argument name 'touchOptimized' to a more fitting name HOT 2
- Drawer overflow is not handled correctly HOT 1
- Convert to LitElement & TypeScript HOT 1
- [3.x] Refactor to not use position: fixed for navbar and drawer HOT 1
- Close overlay drawer on navigation HOT 12
- [3.0.0-alpha1] Lumo/Material Theme styles can be loaded after custom styles HOT 6
- [3.0.0-alpha1][doc] "content scrolling": Setting height to 100% can cause printing issues HOT 7
- Can not customize AppLayout scrollbar in Vaadin V10+ HOT 19
- Fix RTL drawer position HOT 1
- Generate TypeScript definition files for P3 HOT 1
- Convert to Polymer 3, add events type definitions
- white-space: normal break row responsive in vaadin-grid HOT 2
- [20.x] App layout does not collapse the drawer on narrow screen size
- Items are focusable when drawer is collapsed HOT 1
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 vaadin-app-layout.