Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Styling Modal Window
I am trying to achieve a modal window that looks like the one in this webpage: modal style,
The problem i am having is that the window object,
.v-window
doesn't get modified when a border is set. I want to create a round border for the modal window or add a panel with a round border that has my information in it. How can i create a round border on the window
This CSS code did not work:
.v-window-mywindow{
/* css3 border radius */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
The window consists of several nested divs, which all need the border-radius setting depending on the background color they have. For reindeer theme I had to put at least these
.v-window-wrap {
border-radius: 14px;
}
.v-window-outerheader {
border-top-right-radius: 14px;
border-top-left-radius: 14px;
}
.v-window-footer {
border-bottom-right-radius: 14px;
border-bottom-left-radius: 14px;
}
.v-window-resizebox {
border-bottom-right-radius: 14px;
}
For base theme even more is needed.
@Johannes
Thanks for the quick reply, when i applied the suggested CSS to my modal window, i did achieve what i needed to but only for the top
outerheader and footer
,
I also added the border-bottom-right/left radius properties to the
.v-window-counters
, how can i apply this styling to all the div's?
You could use a Window.Notification, set to TYPE_ERROR_MESSAGE. That might be easier, no?
Christopher P: You could use a Window.Notification, set to TYPE_ERROR_MESSAGE. That might be easier, no?
But i want to create a custom window, the Window.Notification does have somewhat of the same border radius i am looking for but i want to add my own content to the modal window (ie. panels, labels ...)
@warsame bashir : I am facing your older problem, I included what Johannes Häyry has mentioned but unable to see the differnece,. No CSS is being applied on to the window, i am using Vaadin 7.0.
It is working in firefox but not in chrome ...i want it to work on Chrome
My Scss file contain
@import "../reindeer/reindeer.scss";
@mixin vaadintest {
/* Include all the styles from the reindeer theme */
@include reindeer;
.v-window-wrap {
border-radius: 100px;
background: lightblue;
color: red;
}
.v-window-outerheader {
border-top-right-radius: 100px;
border-top-left-radius: 100px;
background: lightblue;
color: red;
}
.v-window-footer {
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
background: lightblue;
color: red;
}
.v-window-resizebox {
background: lightblue;
color: red;
border-bottom-right-radius: 100px;
}
}