TIWTabControl - change the Tab style (CSS)

[jorgo2018]

Hi Alexandre,

you promised "Joao Lira" on Feb 9, 2017 12:30 AM to create a CSS TIWTabControl demo.

Have you done it?
Where can I find the demo?

1.) I want have different values for horizontal and vertical padding of the Tabs.

2.) During runtime the Tabs Top-position are some Pixel higher than the rest of the TIWTabControl.
    I want to have the same Top-position for both (like designtime).

Best regards

[jorgo2018]

Hi,

how can I use my own Css class?
Problem is that TIWTabControl component has no Css property.

I want to change padding-left and padding-right.
The default values are too small.


Best regards

[DanBarclay]

Hi,

how can I use my own Css class?
Problem is that TIWTabControl component has no Css property.

I want to change padding-left and padding-right.
The default values are too small.


Best regards

I'm not a css (html) wizard, but both the IWTabControl and IWTabControlPageX have .css properties that you can get to in code.

Dan

[Alexandre Machado]

Hi Alexandre,

you promised "Joao Lira" on Feb 9, 2017 12:30 AM to create a CSS TIWTabControl demo.

Have you done it?
Where can I find the demo?

1.) I want have different values for horizontal and vertical padding of the Tabs.

2.) During runtime the Tabs Top-position are some Pixel higher than the rest of the TIWTabControl.
    I want to have the same Top-position for both (like designtime).

Best regards

CSS class is available at runtime. Not at design time.

By default it uses NAME + 'CSS' one of the suffix below, indicating which element of the tab control it refers to. So, if your tab control is named IWTabControl1, these are the CSS classes required/rendered:

.IWTABCONTROL1CSS 
.IWTABCONTROL1CSS-ROW
.IWTABCONTROL1CSS-ACTIVE-TAB
.IWTABCONTROL1CSS-INACTIVE-TAB
.IWTABCONTROL1CSS-PAGE

I suspect the demo is not available. I'll check and let you know.

Anyway, tab top position can be aligned if you set TabBorderRadius, TabMargin and TabPadding all to zero, no? Just like when you create a new IWTabControl. They are all aligned, although small.

[jorgo2018]

Oh dear,

I tested following:

Code:

procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
 with ExtraHeader do
 begin
   Add('<style type="text/css">');
   Add(' .IWTABCONTROL1CSS-ACTIVE-TAB {cursor: pointer; font-family: Arial, Sans-Serif, Verdana; font-weight: normal; font-style: normal; font-size: 16px; text-decoration: none;color: #000000; background-color:#F0F0F0; height: 24px; padding: 8px; border: 1px ; }');
   Add('</style>');
 end;
end;

Unfortunately, that did not work. It changed nothing to "IWTabControl1".
Does somebody has any idea?

Best regards

[DanBarclay]

Oh dear,

I tested following:

Code:

procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
 with ExtraHeader do
 begin
   Add('<style type="text/css">');
   Add(' .IWTABCONTROL1CSS-ACTIVE-TAB {cursor: pointer; font-family: Arial, Sans-Serif, Verdana; font-weight: normal; font-style: normal; font-size: 16px; text-decoration: none;color: #000000; background-color:#F0F0F0; height: 24px; padding: 8px; border: 1px ; }');
   Add('</style>');
 end;
end;

Unfortunately, that did not work. It changed nothing to "IWTabControl1".
Does somebody has any idea?

Best regards

I played with this some, and it seems to work as advertised for me... even though I don't know what I'm doing <g>.

I wanted my tabs to be equal size across the top.  Not knowing the html/css to do that, I found
  https://stackoverflow.com/questions/7245...each-other

Applying the solution found there to the IWTab, I entered the following in my CSS:

Code:

div.IWTABCONTROL1CSS-ROW{
  display:table;
  width: 100%;
  table-layout: fixed;
}
div.IWTABCONTROL1CSS-ROW span {
  display: table-cell;
  text-align: center;
  }

I have NOT done anything else with the form or tab control so I may have some tweaks to do if I broke something else... but the tabs were modified as advertised.  So, you might want to try that approach again.

Dan

[jorgo2018]

Thx Dan,

it worked.

Code:

procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
 with ExtraHeader do
 begin
   Add('<style type="text/css">');
   Add(' div.IWTABCONTROL1CSS-ROW {display: table; width: 100%; table-layout: fixed; }');
   Add(' div.IWTABCONTROL1CSS-ROW span {display: table-cell; padding: 0px; text-align: center; vertical-align: middle; }');
   Add(' div.IWTABCONTROL2CSS-ROW {display: table; table-layout: fixed; }');
   Add(' div.IWTABCONTROL2CSS-ROW span {display: table-cell; padding: 0px 20px 0px 20px; vertical-align: middle; }');
   Add('</style>');
 end;
end;

The upper TabControl has 100% width.
The lower TabControl has 20px left and right padding.

Best regards

[genyus00]

En mi caso los  títulos de cada TabPage (TSTRIBUTA, TSBANCA, TSGMF, TSCOMPRO, TSASISTE) los coloque como (5 espacios Titulos 5 espacios), en diseño se vio como esperado, pero en ejecución se eliminan   los espacios, al mirar el código fuente tenía siempre la propiedad "  white-space = wrap" y la única forma era buscar la forma de hacer que cambiara a "pre! importante", así que lo solucione asi:

1. Crear un archivo myfile.css 
2. P  ara   cada   TiwTabPage del   TIWTabControl en el css le defini. 

 #PAGETITLE_ [TiwTabPage.Name] {espacio en blanco: pre! Importante; [otras propiedades]}

3. En el Render de la forma principal, coloque esta línea para incluir los archivos css: StyleSheet.Filename: = 'myfile.css';
     
Espero les sea de ayuda ... 

: bueno: