TIWTabControl - change the Tab style (CSS) - Printable Version +- Atozed Forums (https://www.atozed.com/forums) +-- Forum: Atozed Software Products (https://www.atozed.com/forums/forum-1.html) +--- Forum: IntraWeb (https://www.atozed.com/forums/forum-3.html) +---- Forum: English (https://www.atozed.com/forums/forum-16.html) +----- Forum: IntraWeb General Discussion (https://www.atozed.com/forums/forum-4.html) +----- Thread: TIWTabControl - change the Tab style (CSS) (/thread-89.html) |
TIWTabControl - change the Tab style (CSS) - jorgo2018 - 04-09-2018 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 RE: TIWTabControl - change the Tab style (CSS) - jorgo2018 - 04-10-2018 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 RE: TIWTabControl - change the Tab style (CSS) - DanBarclay - 04-11-2018 (04-10-2018, 10:04 AM)jorgo2018 Wrote: Hi, I'm not a css (html) wizard, but both the IWTabControl and IWTabControlPageX have .css properties that you can get to in code. Dan RE: TIWTabControl - change the Tab style (CSS) - Alexandre Machado - 04-11-2018 (04-09-2018, 08:42 AM)jorgo2018 Wrote: Hi Alexandre, 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. RE: TIWTabControl - change the Tab style (CSS) - jorgo2018 - 04-12-2018 Oh dear, I tested following: Code: procedure TIWForm1.IWAppFormCreate(Sender: TObject); Unfortunately, that did not work. It changed nothing to "IWTabControl1". Does somebody has any idea? Best regards RE: TIWTabControl - change the Tab style (CSS) - DanBarclay - 04-14-2018 (04-12-2018, 09:11 AM)jorgo2018 Wrote: Oh dear,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/7245018/how-to-evenly-distribute-elements-in-a-div-next-to-each-other Applying the solution found there to the IWTab, I entered the following in my CSS: Code: div.IWTABCONTROL1CSS-ROW{ 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 RE: TIWTabControl - change the Tab style (CSS) - jorgo2018 - 04-16-2018 Thx Dan, it worked. Code: procedure TIWForm1.IWAppFormCreate(Sender: TObject); The upper TabControl has 100% width. The lower TabControl has 20px left and right padding. Best regards RE: TIWTabControl - change the Tab style (CSS) - genyus00 - 10-04-2019 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: |