How To Remove Borders and Bottom Bar Of TUniPageControl?

[sobakava]

I want to use TUniPageControl 'secretly' on my form. I'll change pages by the code so I also want to hide tab-bar at the top of the control. I found how to do this in the forum:

 

procedure HideUniPageControlHeader(PC: TUniPageControl);
begin //hide UniPageControl header


  UniSession.AddJS(Format('%s.items.getAt(0).tabBar.hide();', [PC.JSName]));


end;

 

Well, this is working fine but still, there is border and gray bar at the bottom:

 

 

I have tried to add many CSS params :

  CustomCSS.Strings = (
    '.pagecontrol { background-color: #52616d;'+
    '               color: #52616d !important;'+
    '               padding: 0px 0px 0px;'+
    '               width: 0px'+
    '               frame: false'+
    '               border: false'+
    '               bodyPadding: 0'+
    '               plain: true'+
    '               bodyBorder: false'+
    '               line-height: 0; }'....

I've tried to apply this to both TUniPageControl and even its childs (TUniTabSheet) but nothing changes.

 

Only thing that worked is placing a TUnilabel on each TUnitabsheet with "pagecontrol" CSS string to change background color:

 

function added(sender, container, pos, eOpts)
{
    sender.addCls('pagecontrol');
}

But I really want to get rid of the border. Any ideas?

 

 

 

By the way, 

 

function added(sender, container, pos, eOpts)
{
    sender.addCls('myglow');
}

works for TUniPageControl.

 '.glowfilter { -webkit-filter: drop-shadow(0px 0px 7px rgba(0,210,220,0.5));'    #9'filter: url(shadow.svg#drop-shadow); }'

I can see glow effect. So I just don't know what to do in customcss string to remove the border and bottom bar.

 

Thanks a lot.

 

 

 

 

 

[sobakava]

reply to myself:

 

 

this did the trick:

 

      '.mypanelstyle {            '
      '  background: #52616d;              '
      '  border-color: #ff00E8;           '
      '  color: black;                    '
      '  border-width: 0px; <<-- set width'
      '  border-style: solid;'
      ' };'

[NelsonFS]

please sobakava,

 

Post sample project.

[DoiSuthep]

I can remove PageControl header by first mentioned HideUniPageControlHeader but still haven't bee able to hide frame.

 

So how to hide PageControl border/frame?

[Sherzod]

So how to hide PageControl border/frame?

 

Hi,

Perhaps you meant it, try:

function tabPanel.beforeInit(sender, config)
{
  sender.border = false
}

 

Best regards.

[DoiSuthep]

Thanks for the answer Delphi developer.

That was almost what I was trying to do. It removed left, right and bottom border but top border still remains. Anyway your approach is useful also (before I didn't understand to select tabPanel as you pointed in screenshot).

 

Reading forum (this and other pages) I was able to remove borders by:

1. Creating customCSS

.myNoBorderCSS .x-panel-body-default 

{

   background: #ffffff;

   border-color: #ffffff;

   color: black;

   border-width: 0px; 

   border-style: solid;

}

2. adding cls in ExtJS-events

function added(sender, container, pos, eOpts)

{

   sender.addBodyCls('myNoBorderCSS');

}

 

 

I also hide UniPageControl header by:

UniSession.AddJS(Format('%s.items.getAt(0).tabBar.hide();', [PC.JSName]));

 

All working well except that tab panel height will be too small (= - header height), but that does not disturb me so much.

[ksawebsoft]

Hi,

Perhaps you meant it, try:

function tabPanel.beforeInit(sender, config)
{
  sender.border = false
}

tabPanel.png

 

Best regards.

 

Perfect. That work for me! =)

[araujoadanr]

Hello everyone,

I need help to locate the event.

 

 

[Sherzod]

Hi,

 

Can you clarify your question please ?!

[Sherzod]

Ok,

 

Sorry, you need to look here:

 

ClientEvents -> UniEvents...

[araujoadanr]

thank you very much....   i'm sorry. 

[araujoadanr]

I'm pretty sure this worked well,

But right now it does not work for me, I prepared a test case,

 

Delphi Tokyo 10.2

FMSoft_uniGUI_Complete_Professional_1.0.0.1425

 

You could check it when you have a few minutes.

Thank you very much.

 

Project1.zip

[Sherzod]

Hi,

 

 

?

[araujoadanr]

Hello Delphi Developer,

 

I look like a fool, but I do not know what I'm doing wrong.

The same project, you will see how I get the result with the edges.

 

I'm almost sure that in the past it worked for me.

 

It has worked well for you.

[araujoadanr]

Hi Delphi Developer

 

 

Works Fine

FMSoft_uniGUI_Complete_Professional_1.0.0.1414 

FMSoft_uniGUI_Complete_Professional_1.0.0.1422

FMSoft_uniGUI_Complete_Professional_1.0.0.1424

 

Error with

FMSoft_uniGUI_Complete_Professional_1.0.0.1425

 

BR

Adan

[Sherzod]

Hmm,

 

I couldn't reproduce this, it works for me.

 

Are you using only this config, or CustomCSS too?!:

 

tabPanel.beforeInit

function tabPanel.beforeInit(sender, config)
{
    sender.border = false
}

[araujoadanr]

I only use that configuration.

 

I prepared a small video where I show you the case.

 

https://www.youtube.com/watch?v=JSaY30HceNs

[HISPhilip]

Hi I've tried a few of this solutions and nothing seems to help.

 

My issue is the dark blue line that surrounds each tag sheet and I'm not sure whether it's the tabsheet or the pagecontrol that is causing it. You can see above the red lines another instance of the page control having a similar issue mostly just the top border.

[HISPhilip]

edit: sorry double post can't figure out how to delete

[Sherzod]

Hi,

 

Which build and theme are you using ?!

[HISPhilip]

1.0.2.1426 and Neptune theme

 

edit: For example the 'Server Statistics' on the uniGUI demo is a pagecontrol I'm wondering how to get rid of the blue border

 

edit2: Nevermind I realised it's still BorderStyle..... but it doesn't appear for TPageControl on the Object Inspector

[Sherzod]

Hi,

 

1.0.2.1426 and Neptune theme

 

edit: For example the 'Server Statistics' on the uniGUI demo is a pagecontrol I'm wondering how to get rid of the blue border

 

edit2: Nevermind I realised it's still BorderStyle..... but it doesn't appear for TPageControl on the Object Inspector

 

Sorry, can you clarify your question?

[donlego]

how to remove pagecontrol tab header border

 

i set on client event uni

sender.border = false;

but the border of tab header is still exist

 

and how to set tab header font color if active font color red else gray

 

delphi xe7

unigui 1472 pro

 

thanks'