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.
how to customize PopupDateField
Hopefully a simple question.
How would one go about displaying the PopupDateField's icon on the left side of the text input rather
than the right?
Thank you.
Hi,
Might be trickier than you think, but I'd go and try the following CSS:
.v-datefield-button {
float: left;
}
You'll probably need to tweak the styles a bit more to make it look OK, but otherwise the button should now be on the left side of the widget.
Be sure to test it on as many browsers you can ;) (read: IE gives me the "heebie-jeebies").
Thanks for your response.
Like you stated, this does not render nicely in all browsers and I seem to need a different image/resource now.
Shouldn't this be supported by the component?
How could I extend the component to support this?
As I suspected.
But I just realized it would work better across browser like this:
.v-datefield-textfield {
float: right;
}
In order to correct the other style problems you need to mirror these two images, popup-btn.png and popup-btn-pressed.png, and add some more CSS (assuming a stylename "foo" is used to alter the look):
.v-datefield-foo .v-datefield-textfield,
.v-readonly .v-datefield-textfield {
border-right-width: 1px;
}
.v-ff .v-datefield-foo .v-datefield-textfield,
.v-ff .v-readonly .v-datefield-textfield {
border-radius: 3px;
-moz-border-radius: 3px;
}
.v-sa .v-datefield-popupcalendar .v-datefield-textfield,
.v-sa .v-datefield-popupcalendar .v-textfield-readonly {
border-width: 3px;
}
.v-datefield-foo .v-datefield-button {
background-image: url(path/to/mirrored-popup-btn.png);
}
.v-datefield-foo .v-datefield-button:active {
background-image: url(path/to/mirrored-popup-btn-pressed.png);
}
I didn't test any of this, but in theory those should cover it.
No problem, glad I was of help!
PS. All theme related questions, such as this, should go to the "Themes" category. But I guess it's not always easy to know if it's a theme issue or not.