UI design shows differently under servlet and portlet mode

I have a problem about the UI.

I deploy the web application as a servlet on local which publish correctly. But when I deploy it to our production server which is in the liferay-6.1.1, some elements are some pixels higher than the design, for example, table header including icon and caption.

Furthermore, I cannot choose the table elements from web browser debut tool(firefox, chrome) at portlet mode, so cannot search for the reason.

Would you please give me some information about the possible reasion for this kind of mismatch and how to search for the reason? Any information would be appreciate, thank you.

Hi,

This is propably a CSS collision issue. There are dozens of reasons why this could happen. Are you deploying your app as a portlet or embedding it manually? Which theme are you using?

I’d suggest to go with a Valo based theme which probably has less collision issues because of stronger selectors.

cheers,
matti

Hi,
Thank you for the reply.

We deply it as a portlet at liferay but the version we use is Vaddin 6, a bit out of date … and we cannot update to 7 for the moment.

looking forward for your response.

bon weekend

M

Then I see no other way to solve this but to let somebody with decent css skills to look into it and see what is the issue. If you can’t share to example here for inspection, and you don’t know one yourself, try contacting our sales for some consulting.

cheers,
matti

Hi, I have a problem with vaadin table headers and liferay.
Container header size is 900000px then shows only the first header column. Table instead show correctly.
Another error is the css style of textfield. It takes liferay css instead valo theme.
I use vaadin 7.6.8 and liferay 6.2 GAE5

Thank you

31920.png

Hi,

Are you using
self-contained
or portal wide strategy to include Vaadin libraries? It looks to me that you have both “liferay theme” and “valo theme”. With Valo theme you shouldn’t use the “liferay” theme at all.

cheers,
matti

Hi,
I am using self-contained strategy. I use valo theme for vaadin application but liferay theme override my textfield and table css of vaadin.

I followed this blog : https://web.liferay.com/it/web/matti/blog/-/blogs/adapting-valo-theme-to-fit-the-liferay-6-2-defaults
and I resolved the textfields height bug.
Now remained the problem of the size of the table header