Template and inline styles

[joelz]

I tried to examine Result.Contents with the following but the Result.Contents.Count always = 0. I can't imagine that there is nothing in the result.Contents.

for i := 0 to Result.Contents.Count - 1 do
begin
a := Result.Contents.Items[i].classname;
if Result.Contents.Items[i].classname = 'TIWHTMLTag' then
TIWHTMLTag(Result.Contents.Items[i]).Params.Values['style'] := '';
end;

Anyway, I will look for your next release on the issue since you said you are fixing it.

[Jorge Sousa]

Hi Joel

You're very right.

Both TIWCGJQEdit and TIWCGJQLabelEx have inner TIWEdit and TIWLabel respectively, so what is render by the first two is only the container.

We're currently fixing this with higher priority.

[Jorge Sousa]

Hi again

It's only TIWCGJqEdit, not TIWCGJQLabelEx, sorry about that.

Two work arounds, both called OnCreate:

1- What I thnk you want, strip only what is affected by StyleRenderOptions:

Code: Select all

  IWCGJQEdit1.InnerEdit.StyleRenderOptions:= IWCGJQEdit1.StyleRenderOptions;


2- To clear the inline style completelly of any children of an edit (or other), using jQuery:

Code: Select all

var
  js: string;
begin
  js:= Format('$("#%s").children().attr("style","");',[IWCGJQEdit1.HTMLName]);
  PageContext.AddToOnReady(js);
end;


[joelz]

I assume that you are referring to the oncreate of the component (not the form).

The first work around partially worked, but it still left the padding, the width, and the height. You also do not have innerEdit on your other controls so even if it worked for IWCGJQEdit it is not a good fix for everything else.

The 2nd work around did not work at all. (Maybe I just need to spend some more time trying to get it to work.)

I am using iw.0.24 and cg 3353.

[Jorge Sousa]

Hi Joel

I assume that you are referring to the oncreate of the component (not the form).

I'm refering to form's oncreate

The first work around partially worked, but it still left the padding, the width, and the height

width and height is controlled by StyleRenderOptions.RenderSize

You also do not have innerEdit on your other controls so even if it worked for IWCGJQEdit it is not a good fix for everything else.

No, we don't, only MemoEx as well, but the other's don't have this kind of style: left:X px, top: Ypx;

There is the jqbutton, that has an internal tag width:100% height:100%, but if we remove it, it gets wrongly displayed.

But these other controls, can be controller by OnAfterRenderHTML, only TIWCGJQEdit and TIWCGJQMemoEx, have an inner control has children.

I must exclude fro this discussion the simple IW native descendants, like TIWCGJQMemo, TIWCGJQCombo, TIWCGJQRadio, TIWCGJQCheck, that only implement ui-themes classes.

The real jquery controls have an Ex at the end, like TIWCGJQComboEx.

The 2nd work around did not work at all. (Maybe I just need to spend some more time trying to get it to work.)

What do you mean by didn't work exactly? it surely strips the inline style, of inner tags, you can see it inspecting the HTML in browser, and that's what you were asking for at first place. I think that all you need is to not include any css properties that affect the position and size, all the other's are needed, that's we render it. However we should pass them to external css soon, only to reduce upstream size.

[joelz]

I made some progress and using IWCGJQEdit1.InnerEdit.StyleRenderOptions:= IWCGJQEdit1.StyleRenderOptions; I was able to remove the unwanted inline styles from my IWCGJQEDIT and IWCGJQMEMOEX.

Now I would like to get the 2nd work around to work so I can deal with any other issue.

I have a IWCGJQLABELEX and the html source looks like this.

<div class="ui-widget" id="LBNAMELAST">
<label id="LBNAMELAST_JQ" style="white-space:normal;width:100%;height:100%;top:0;left:0;" class="cc-ui-label-la req ui-corner-all ui-widget">Last Name :</label></div></div>

I am trying to completely strip the inline style so I used the following in the oncreate of the form

js:= Format('$("#%s").children().attr("style","");',[LBNAMELAST.HTMLName]);
PageContext.AddToOnReady(js);

In the html source it produced the following line.

$(document).ready(function(){$("#LBNAMELAST").children().attr("style","");});

But the html source output of the control is the same and the style is not removed. It still looks like this:

<div class="ui-widget" id="LBNAMELAST">
<label id="LBNAMELAST_JQ" style="white-space:normal;width:100%;height:100%;top:0;left:0;" class="cc-ui-label-la req ui-corner-all ui-widget">Last Name :</label></div></div>

I am not a JQuery expert, but shouldn't the $(document).ready ..... function automatically be called when the page is loaded?

Thank you in advance for helping me understand what I am doing wrong.

[Jorge Sousa]

Hi Joelz

You have to execute this

[code]js:= Format('$("#%s").children().attr("style","");',[LBNAMELAST.HTMLName]);
PageContext.AddToOnReady(js);
[/code]

in IWForm.OnRender, if you call this OnCreate it will be execute at first place, before LBNAMELAST get's rendered.

[joelz]

I tried to move it to the onrender but it still does not seem to work.

It puts this line of code in the source

$(document).ready(function(){$("#LBNAMELAST_JQ").attr("style","");});

But the label still looks like this.

<div class="ui-widget" id="LBNAMELAST">
<label id="LBNAMELAST_JQ" style="white-space:normal;width:100%;height:100%;top:0;left:0;" class="cc-ui-label-la req ui-corner-all ui-widget">Last Name :</label></div>

Do you have any other ideas as to why it is not working?

[Jorge Sousa]

Hi Joel

As you can see in the attached demo, it works!

See Unit2, label IWCGJQLabelEx1

[joelz]

Sorry to be such a pain, but here is the output from the Demo. It still has the inline styles. I am using XE5 and cg 1.9.0.3358 and I tested it in FF, Chrome, and IE8.

$(document).ready(function(){$("#LBBIRTHDATE").children().attr("style","");$("#IWCGJQLABELEX1").children().attr("style","");});

But the code is

<div class="ui-widget" style="border-style:none;border-width:0px;padding:0;position:relative;z-index: 100;width:100px;height:16px;padding: 0;overflow:auto;" id="IWCGJQLABELEX1">
<label id="IWCGJQLABELEX1_JQ" style="white-space:normal;width:100%;height:100%;top:0;left:0;">Label</label></div></br>

Ideas?