RE: element occupy still space although CSS display: none!

Flow
1

Hi Jens,
Panel nav = getNavigation(); nav.setVisible(false); Serverside works fine, but since I’m working on a responsive webapp
I would like to display the panel depending on the current window size, and display/hide panel from css, sometime like:

.v-ui[width-range~=“0px-1000px”]
{
.menu{
display: none;
}
}

.v-ui[width-range~=“1001px-”]
{
.menu{
display: block;
}
}
Is there a simple trick to realize it clientside ?

2

In my WebApp a specific panel in verticallayout should be hidden depending from
a given context without occupying space any more, for instance:

case1:
header height 100px
menu height 50px
content height (500px = remaining height / setExpandRatio)
footer height30px

case2:
header height 100px
menu hidden
content height (550px = remaining height / setExpandRatio)
footer height30px

the css command: “display: none” is supposed to provide this feature, but unfortunately is doesn’t work
case2: a blank space having 50px is still diplayed

any ideas ?

3

Can you do it server side? if you do menu.setVisible(false) then it should at least work. Vaadin takes care of a lot of sizing issues with a layout engine, and sometimes it might not be aware of some changes to CSS without something triggering a reflow.

4

Hmm. The Bakery App Starter uses very similar code and it works well there. This is taken from that project (cleaned up for only relevant part).

[code]
.app-shell {
.activeViewName {
display: block;
}
}

.app-shell[width-range~=“601px-”]
{
.activeViewName {
display: none;
}
}
[/code]Everything seems to look correct in your code. In which way does it work? does your code change the UI in any way? Is the menu not visible but the 50px is still there, just empty? Does other properties work correctly, like background-color:red?

According to
the documentation
, you have to enable responsiveness of a command to use these responsive ranges. Have you called
Responsive.makeResponsive(ui);?

5

the init() method of my main view contains

    Panel nav = getNavigation();
    nav.setVisible(false); >>> test ok     
    mainlayout.addComponents(getHeader(), nav, contentPanel, getFooter());
    mainlayout.setExpandRatio(contentPanel, 1.0f);         
    Responsive.makeResponsive(this);   
    setContent(mainlayout); /

to be sure that no contained elements would disturb the expected behaviour I let the Navigation panel empty, but when I set the navigation style to display:none everything work as expected but and empty space having the height 50px …

6

Hi Jens,

in meantime after longer investigations I discovered an ugly reason for the present issue:
Some tests with plain html/css worked fine with firefox. Ok. Then again in my simplied Vaadin App no more.
By chance as I work with Netbeans 8.2 I realized the
behaviour
with the embedded webbrowser IDE default and embedded webkit are impredictable.

So just avoid these, since they change the style only partially (!) when the windows size is modified,
background-color font-size are ok
the switch from display: none to block and vice versa not !!!
whereas firefox, chrom, edge, IE work all fine.

Took me a couple of hours,

thank for your help