AbsoluteLayout and Scroll

Vaadin 6 / 7 / 8 Framework UI
1

AbsoluteLayout is by default: overflow: hidden, if you add many component into it, you may want it to scroll.
As AbsoluteLayout is more used by CustomComponent. These requirement is quite general.
Here is the solution for Vaadin 7.0.

  1. in your theme, overwrite:

.v-absolutelayout-margin {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: visible !important;
}

Notice: visible only, otherwise two scrollbar will show.

  1. create a scroll css, like,
    .my-scroll {
    overflow: auto;
    }

  2. add this css to your AbsoluteLayout.

Here we go!

2

Thank you, I’ve been banging my head trying to figure out why my image doesn’t show up in an AbsoluteLayout. This worked… But I think it’s still very odd that the div for “v-absolutelayout-margin” does not have sizes and has overflow: hidden. It seems like a bug to me, or I’m doing something wrong. Because without your CSS, I can’t anything to show up in an AbsoluteLayout…

<div class="v-customcomponent v-widget v-has-width" style="width: 100%;">
 <div class="v-absolutelayout v-layout v-widget v-has-width v-has-height" style="height: 100px; width: 50px;">
  <div>
   <div style="position: relative; overflow: hidden;" class="v-absolutelayout-margin">
    <div class="v-absolutelayout-wrapper" style="top: 0px; left: 0px;">
     <img class="v-image v-widget v-has-width v-has-height" style="height: 100px; width: 50px;" src="xxx.png" alt="">
    </div>
   </div>
  </div> 
 </div>
</div>