Liferay & Vaadin ComboBox...

Okay, I know I’ve got some sort of CSS conflict going on here, but I don’t know how to resolve it…

I’m running Liferay 5.2.3 and a Vaadin 6.6.0 portlet. Everything is functional, but it doesn’t display correctly…

When I hit just the Vaadin servlet (bypassing the Liferay core), my combobox is rendered with the dropdown arrow to the right of the input box. Great!

When I use the portlet, however, the dropdown arrow appears to the right but the top of the dropdown arrow is aligned to the bottom of the input box. Bummer! I even forced the use of the liferay theme in my application, but still no difference in positioning.

So I expect something like:

+---------------+
|               | v
+---------------+

But I get something like:

+---------------+
|               | 
+---------------+
                 v

Now after viewing the applied CSS, the vaadin servlet is only applying vaadin styles. Within Liferay 5.2.3, though, it’s pulling in default settings from /html/themes/classic/css/base.css:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td (line 5)
{
  margin-top: 0pt;
  margin-right: 0pt;
  margin-bottom: 0pt;
  margin-left: 0pt;
  padding-top: 0pt;
  padding-right: 0pt;
  padding-bottom: 0pt;
  padding-left: 0pt;
}

I’m sure it is this chunk that’s throwing the rendering off, but I’m wondering if there is an ‘easy’ fix to it…

Anyone have a suggestion?

Thanks!

Are you sure you have updated the shared Vaadin widgetset and themes on Liferay?
With which browser and version are you seeing this? Is the page zoomed on the browser?

Yep, I’ve got the CP in place and it reports everything is fine. I’m using 6.6.0 and have all of the components in the proper places. I’ve tested w/ Chrome, FF, and IE and all show the same thing: looks right when shown as a servlet, but odd rendering behavior when shown as part of a portlet. Same sort of thing whether the window is in normal or maximized role.

Upon further investigation I think that my problem is with the edit box rather than the dropdown. The additional CSS Liferay feeds for the dropdown is insufficient to cause the weird alignment problem, but the additional CSS Liferay feeds around the input box has more effect on the alignment…

I guess I need to figure out what rules are causing the misalignment and create my own theme to override them correctly when the Vaadin components are getting rendered…

I would have to guess that, with all of the possible CSS rules different Liferay themes can provide, that these kinds of issues might actually be more regular than what I’ve led myself to believe…

Okay, basically the margin being set around the default input text elements in Liferay 5 was causing my rendering problem. I’m outlining the solution here in case anyone else runs into it…

  1. First I created a new theme, I called it “liferay-5” and had it import the provided “liferay” theme as the parent theme.

  2. I set the theme on my main window to use the “liferay-5” theme.

  3. I then added a style to the Select and/or ComboBox guys, “liferay-5”. Specifically the classes I would need to design for would be v-filterselect-liferay-5.

  4. I added the following style definitions to the styles.css file in my theme:

.v-app div.v-filterselect-liferay-5 input[type="text"]
, .v-window div.v-filterselect-liferay-5 input[type="text"]
 {
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.v-app div.v-filterselect-liferay-5 input[type="text"]
, .v-window div.v-filterselect-liferay-5 input[type="text"]
 {
	padding-top: 5px;
	padding-right: 1px;
	padding-bottom: 5px;
	padding-left: 1px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
  1. Did the whole build, deploy, test cycle and the Select/ComboBox guys started rendering correctly. Wahoo!

Now I’m pretty sure I could have simplified the selectors down to '.v-filterselect-liferay-5 input[type=“text”]
', but once I had it working I didn’t see any reason to muck around with it further.