[jmichelgarcia]

Hi Again IsoTeam,

You guys talked about : "use extra CSS to explicitly reverse Liferay's damaging CSS settings".

As I'm not a CSS pro, I would like to ask :

Where can I find the good values to revert those CSS settings ? I mean, how can I be sure about the new CSS rules i will need to write ?

Any help would be appreciated.

Thanks!

[Isomorphic]

You want to reset to the browser's default setting. We don't know of a single reference sheet for these, but individual values are easy to discover via Google search.

[jmichelgarcia]

Hi IsoTeam,

When I mark the SmartGWT CSS rules as !important, it seems to solve some issues but it create another ones.

A small example (check in the attachment below the "choose class" is buggy) is that marking all skin_styles.css rules as !important make it override the inline CSS. And that's not a good approach right ? Since elements customization such as padding and margin can be set using Java code and then inserted in the inline HTML (ie. VLayout.setPadding(Integer)).

Correct me if im wrong.

So, another approach without having any impact on the Liferay portal would be to :

1) Mark my outermost SmartGWT element with a custom CSS class such : my-smart-gwt-portlet
2) Add custom CSS rules to revert Liferay damages using things like :
- .my-smart-gwt-portlet * table { border-spacing:separate; border-spacing:2px }
or
- .my-smart-gwt-portlet * td { ... }

But that approach cause a problem, because of the CSS priority system.

those rules below have a specifity of :
a=0, b=1, c=1 = 011

If we take smartGWT css rule (not marked as !important) such as :
- .tabButtonLeft { .... }

this rule has a specifity of :
a=0, b=1, c=0 = 010

So, in the end of the story, my "CSS Reset to default rule" would have a higher priority than the SmartGWT ones.

So, IMHO, the only way to solve that crappy shit problem, is to change Liferay's CSS directly.

Any thoughts ?

[Isomorphic]

Wow, you're making us realize just what a bad idea it is for Liferay to have done this..

Two suggestions:
1. there may be a way to write a selector with lower specificity so that it reverts Liferay's global settings without affecting SmartGWT styles.

2. another approach is to change SmartGWT CSS so that every style that's applied to a <table> element reverses Liferay's changes, likewise for other basic elements that Liferay affects.

[jmichelgarcia]

I'm going for the solution 2 as I prefer don't rely on Liferay's CSS.

I'm experiencing some issues trying to find the origin of the "scrollbars always showing" & "scrollbars gone crazy blinking all the time" problem.

I mean, I understand the problem, but I'm unable to find the source (the HTML/CSS element/attribute) that's causing the mess.

Can you guys give me a little hint here ?

I will continue digging on my side, I do really appreciate your help.

Cheers.

[jmichelgarcia]

1. there may be a way to write a selector with lower specificity so that it reverts Liferay's global settings without affecting SmartGWT styles.

I've tried that this morning.

But, another issue appeared :

- To revert Liferay changes, without messing up with the Liferay Portal, I need a CSS rule that will only apply to my SmartGWT Portlet. So the idea here, was to modify SmartGWT CSS with something like that :
.my-sgwt-portlet * .menuTitleField { rule:value }.

At first sight, it looks amazing, my SmartGWT rule gains in CSS specifity, and everything should be OK.

BUT, SmartGWT do NOT add all its elements under the outmermost DIV, in fact, some generated HTML are added at the same level at our DIV, causing this previous CSS to not work as expected (rule not applied because menuTitleField is not a grand...child of .my-sgwt-portlet).

Im dropping this, I've tested everything, and there is no "clean" solution to solve this issue.

Only solution here, is to rebuild Liferay theme, the way it should be done.

Big thanks to the IsoTeam who helped me a lot on this.

Cheers.

[Isomorphic]

Thanks for the update. Just a note that there is another solution which we mentioned we have used in the past - modify SmartGWT skins so that eg style the is applied to eg a <table> element re- asserts the browser defaults. Just wanted to make sure this was mentioned since it provides a (laborious) fix when there is possibility of modifying third-party CSS.

[jmichelgarcia]

Thanks for the update. Just a note that there is another solution which we mentioned we have used in the past - modify SmartGWT skins so that eg style the is applied to eg a <table> element re- asserts the browser defaults. Just wanted to make sure this was mentioned since it provides a (laborious) fix when there is possibility of modifying third-party CSS.

This solution can't apply due to the CSS specifity I explained above. SmartGWT rules are overrided by Liferay, so putting more rules in the SmartGWT CSS won't solve the problem.

I was able to partially correct the problem, but I can't added in the "root" body.

Now that I'm thinking, is there a way to not allow HTML elements (also generated ones) to be injected outside my outermost DIV ? like a setParent method.

Because, if I manage to change Liferay CSS, this could be still a problem.

Thanks

[Isomorphic]

No, an SGWT rule like .someClass has higher specificity than a Liferay rule like table { some setting }. So if you modify the styles in the SmartGWT skin itself, you're fine. Again, we've done this before (with different external CSS, but same principal).

Not sure what you mean about "injection" of HTML elements.

[jmichelgarcia]

No, an SGWT rule like .someClass has higher specificity than a Liferay rule like table { some setting }. So if you modify the styles in the SmartGWT skin itself, you're fine. Again, we've done this before (with different external CSS, but same principal).

Not sure what you mean about "injection" of HTML elements.

Perfect, as you say, kind of "laborious" job. But indeed, it should work.

What is the best way to know the "good values" ? Run hosted mode and compare ?

Thks

[jmichelgarcia]

Problem solved : I made changes into the default Liferay skin (base.css), and I added this changes.

table {
      display: table;
      border-collapse: separate;
      margin-top: 0;
      margin-bottom: 0;
      -moz-box-sizing: border-box;
      text-indent: 0;
}

The GWT/SmartGWT/Portlet tutorial should be available soon.

[coryendle]

jmichelgarcia,

Thanks for this post. I ran into the same problem when I added my SmartGWT app into a Liferay portlet.

Cory

[coryendle]

Problem solved : I made changes into the default Liferay skin (base.css), and I added this changes.

table {
      display: table;
      border-collapse: separate;
      margin-top: 0;
      margin-bottom: 0;
      -moz-box-sizing: border-box;
      text-indent: 0;
}

The GWT/SmartGWT/Portlet tutorial should be available soon.

jmichelgarcia - Will you still be posting a tutorial on GWT/SmartGWT/Portlet? I would be interested in looking at this. I am currently working on a project that is integrating SmartGWT into Liferay.

Thanks,
Cory

[jmichelgarcia]

Hey,
I'm working on it, just started yesterday, the problem is that I don't have a lot of free time. So I can't provide you an estimated date. Post your problems here and I will try to advise.


Gl

[jmichelgarcia]

NEW URL :
http://www.jmichelgarcia.com/2012/gw...feray-portlet/