Hie i have a web page say index.html
In this page i embed a Vaddin component using iFrame approach.
My Vaddin Component basically is a button and clicking on it a popup/window comes up.
Now the problem I see here is: When i click on the button the popup comes with in that iFrame area.
I cannot increase the size of iframe big enough to show the popup properly because in that case my web page will look horrible with a small button and a large blank area around it,
So, whats the solution here?
The solution is not to use an IFRAME to embed the app, but to embed it using the plain DIV approach:
11.3.1 Embedding Inside a div Element
Yes, iframe crops it’s content. I think, what you can do is to align application background with the web page background to hide the borders of two parts.
But can you use div technique instead of iframe ? This should solve the cropping issue.
but i read that i cannot use div in case i have more than 1 vaddin component to insert in a wab page
Well yes, seems like so, reading the documentation myself too 
What about using the DIV approach for the app that needs a popup window, and others with IFRAME?
Or, instead of adding a sub-window in the IFRAME (which will get clipped), add a new native window to the app, which will function like a normal browser window (you can still hide menus, statusbars etc.)?
found something useful from thread http://vaadin.com/forum/-/message_boards/message/83501