Some Eclipse Foundation services are deprecated, or will be soon. Please ensure you've read this important communication.

Bug 403876

Summary:

Problem with height of elements in Firefox

Product:

[RT] RAP

Reporter:

Ilya Bochkarev <tesei7>

Component:

RWT

Assignee:

Project Inbox <rap-inbox>

Status:

RESOLVED WONTFIX

QA Contact:

Severity:

normal

Priority:

CC:

tbuschto, tesei7

Version:

2.0

Target Milestone:

---

Hardware:

OS:

Windows 7

Whiteboard:

Attachments:

Description	Flags
date widget in chrome	none
date widget in firefox	none
datetime widget in firefox2	none

Description Ilya Bochkarev

2013-03-20 07:06:32 EDT

in http://rap.eclipsesource.com/rapdemo/examples#input height of text "Simple Input Widgets" in firefox is 20px, while in other browsers (IE, Opera, Chrome ) is 19px. Same problem with <input> tag inside text widget (cobmo, spinner, etc.). In demo example in firefox is 18px, in other browsers is 17px. 

I have custom theme in my application and all widgets in Firefox now look weird. 

firefox version is 19.0.2.

Comment 1 Tim Buschtoens

2013-03-20 12:23:11 EDT

Yes, firefox seems to add one px to the input elements height, but the widget size itself is not changed by that, and the text is still centered correctly. 

So how does this cause your widgets to look "weird", and what does "weird" mean exactly? Can you give a screenshot and/or example project?

Comment 2 Ilya Bochkarev

2013-03-21 06:51:53 EDT

Created attachment 228832 [details]
date widget in chrome

Comment 3 Ilya Bochkarev

2013-03-21 06:52:39 EDT

Created attachment 228833 [details]
date widget in firefox

Comment 4 Ilya Bochkarev

2013-03-21 06:56:51 EDT

Created attachment 228835 [details]
datetime widget in firefox2

Comment 5 Ilya Bochkarev

2013-03-21 07:02:39 EDT

Height of DateTime-Field div in Firefox is 18px, while in other browsers is 16px.

my css styles are:

* {
	font: 13px Calibri, Arial, sans-serif;
}

...

/* DateTime */
DateTime {
	background-image: gradient(linear, left top, left bottom, from(#dddbd1),
		color-stop(40%, #ffffff), to(#ffffff) );
	border-radius: 0px;
	color: #333333;
}

DateTime[BORDER]:focused {
  border: 1px solid #ffae00;
}

DateTime:disabled {
	color: #999999;
}

DateTime-Field {
	border-radius: 0px;
	padding: 2px 3px 1px 3px;
	background-color: transparent;
}

DateTime-Field:selected {
	background-color: #862012;
	color: white;
}

...

Comment 6 Ivan Furnadjiev

2013-09-27 04:43:24 EDT

Using images for DateTime drop-down button background is not a good idea. Use background gradient instead. Another possible solution will be to add support for background-position/background-repeat to DateTime-DropDownButton element (or other). I will close it as WONTFIX. Please reopen if you disagree.