CGJQTabs ignore RenderSize := False

[kattunga]

Hi,

I usually set RenderSize := False and RenderPosition := False to manually set align and position of my components using Style.
It works perfect with JQRegion but it fail with JQTabs.

To reproduce:

Code: Select all

IWCGJQTabs1.StyleRenderOptions.RenderSize := False;
IWCGJQTabs1.Style.Values['width'] := '80%';
IWCGJQTabs1.Style.Values['height'] := '80%';


With firebug you can see that IWCGJQTabs1 have two height values, one that says 80% and another that have a fixed value.

Code: Select all

<div id="IWCGJQTABS1" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style="position: absolute; left: 0px; top: 0px; z-index: 100;padding: 0;width:80%;height:80%;height:328px;border-style:none;border-width:0px;padding:0;">


Also it would be nice that if IWCGJQTabs RenderSize = false, Tabs where created with RendesSize = False too and height and width = 100% instead of a fixed size.

Regards
Christian

[Alexander Bulei]

Hi kattunga,

That is done on purpose!
Is part of the architecture of the component.
Check the published properties in object inspector, you will no find the StyleRenderOptions property because we cut it.

Yes, you can access it in runtime, but it will not take effect.

ie, no bug there....

Best Regards.

[kattunga]

Check the published properties in object inspector, you will no find the StyleRenderOptions property because we cut it.

Sorry but I post this because I found in published properties. I only post example by code to be clear.

Regards
Christian

[Alexander Bulei]

Hi kattunga,

Yes, you are right, my fault, I was thinking about IWCGJQTab....

But unfortunately, you can't do it because of nested tabs.
They will not respect the resizing (example: inside dialog).
IW works only with absolute position and size.

Best Regards.

[kattunga]

Hi Alexander,

Is there any way to use a CGJQTabs inside a html template and let the template manage the size and position?

I'm finishing an application that use a menu and a CGJQTabs in the main form and now a web designer is going to do the template for this form.
I need the size and position to be managed by styles in the template, which will change for each customer.

With best regards
Christian

[kattunga]

Hi, I found a solution modifying source code of IWCGJQTabs.

Code: Select all

function TIWCGJQCustomTabs.RenderStyle(AComponentContext: TIWCompContext): string;
begin
  Result:= inherited RenderStyle(AComponentContext);
  if StyleRenderOptions.RenderSize then  // c_pradelli, let IWCGJQTabs work in templates
  if not ClipRegion then
    Result:= Result+ 'height:'+IntToStr(ClientHeight)+'px;';
end;

function TIWCGJQTab.RenderStyle(AComponentContext: TIWCompContext): string;
begin
  // c_pradelli, let IWCGJQTabs work in templates
  if not tabs.StyleRenderOptions.RenderSize then begin
    StyleRenderOptions.RenderSize := False;
    StyleRenderOptions.RenderPosition := False;
    Result := inherited RenderStyle(AComponentContext);
    Result := Result+'position: absolute;width: 100%;height: calc((100%) - ('+IntToStr(Top)+'px));';
    exit;
  end;

  Result:= inherited RenderStyle(AComponentContext);
  if not ClipRegion then
    Result:= Result+ 'height:'+IntToStr(ClientHeight)+'px;';
end;


IWCGJQTabs1 will be included in a div in template, so in my form I set:

Code: Select all

procedure TIWForm2.IWAppFormCreate(Sender: TObject);
begin
  IWCGJQTabs1.Align := alNone;
  IWCGJQTabs1.StyleRenderOptions.RenderSize := False;
  IWCGJQTabs1.StyleRenderOptions.RenderPosition := False;
  IWCGJQTabs1.Style.CommaText := 'position:absolute,height:100%,width:100%';
end;


And everything works fine.

Regards
Christian

[Alexander Bulei]

Hi kattunga,

Thanks for sharing the code,
but I think it will not work on browser resize, I mean, components inside with align.

Best Regards.

[kattunga]

Hi kattunga,

Thanks for sharing the code,
but I think it will not work on browser resize, I mean, components inside with align.

Best Regards.

Of course not, but it's exactly the same issue if you have components with align inside any region that it's in a template.
This is how Intraweb works, if you use templates you can't use align in components.
With the conditional "if not tabs.StyleRenderOptions.RenderSize then begin" nothing it's broken and it only enable the code if I need to use it with templates.

With best regards
Christian

[Alexander Bulei]

Hi kattunga,

I will implement it asap, but first we must find alternative to this code:

Code: Select all

height: calc((100%) - ('+IntToStr(Top)+'px));

It's not a cross browser code, doesn't supported in IE8 (winXp users) and only have partial support in IE9.

Best Regards.

[kattunga]

Hi kattunga,

I will implement it asap, but first we must find alternative to this code:

Code: Select all

height: calc((100%) - ('+IntToStr(Top)+'px));

It's not a cross browser code, doesn't supported in IE8 (winXp users) and only have partial support in IE9.

Best Regards.

Partial support in IE9 refers to the browser crashing when used as a background-position value, so it's not a problem here.
The problem it's only with IE8.
May be this can be replaced with jscript in CGJQTabs onresize event.