textfield formatting issues

Vaadin 6 / 7 / 8 Framework UI
1

Kindly consider the following images

FF35
 is what I am aiming for

IE8
 background overlaps border, textfields overlap one another

Chrome
 background does not show

I have looked at Reindeer textfield.css and noticed there is Safari-specific code, but nothing for Chrome.

Here is the CSS I am using for the red cells (others are the same)

.v-textfield-fail {
	background-color: #FF7B7C !important; /* desaturated red */
	outline: none;
	background-image: none !important;
}

Questions
a) how does one get the background to show in a TextField in Chrome
b) how does one fix IE8 overlaps.

thx!

2

Hi.

I suggest that you try to fix it with chrome build in element inspector. Try positioning on top of uncorrectly displayed element and see what computed css are. Then put missing stuff inside your theme.

This way, I solved some minor theme problems.

bye,ivan

3

Your observations are intuitive, but not quite right. We currently treat all WebKit based browsers the same, they all apply the ‘v-sa’ selector for the body element. Chrome also gets an additional ‘v-ch’ selector, for more flexibility. So the Safari specific code you found in Reindeer also applies to Chrome.

In Safari/Chrome we use a little bit more advanced CSS to present textfields: border-images. That’s because I’m such a nitpick, and absolute wanted to have that one pixel semi-transparent hilite below the textfield, silly me.

I guess I could’ve used box-shadow as well, but I suppose I was trying to make it work in FF3.5 as well (but since we don’t have a specific selector for FF3.5, only FF3, I’m not able to use border-images in FF3.5).

Anyhow, in order to change the background in Safari/Chrome, you need to remove the border-image, and specify the borders and background again. I must admit, this is really cumbersome, and needs more thought, since changing the background color of a textfield probably shouldn’t be this hard.

input.v-textfield-fail,
.v-sa input.v-textfield-fail {
	-webkit-border-image: none;
	-webkit-border-radius: 3px;
	background: #FF7B7C;
	/* Copied from reindeer/textfield/textfield.css */
	padding-top: 3px;
	height: 19px;
	border: 1px solid #bcbdbe;
	border-top-color: #a2a3a4;
	border-bottom-color: #d2d3d4;
}

.v-sa input.v-textfield-fail.v-textfield-focus {
	-webkit-border-image: none;
	-webkit-border-radius: 3px;
}

This is actually a bug in Vaadin, and has an open ticket (that you filed :slight_smile:
#3560
) that will be fixed in 6.1.4 and 6.2.

In the mean time, you can fix this by adding the following CSS to your theme

.v-ie8 input.v-textfield {
	margin-top: 0 !important!;
	margin-bottom: 0 !important!;
}