Jump to content

How To Remove Borders and Bottom Bar Of TUniPageControl?


sobakava

Recommended Posts

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:

 

fDipZWy.png

 

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.

 

 

 

 

 

Link to comment
Share on other sites

reply to myself:

 

 

this did the trick:

 

      '.mypanelstyle {            '
      '  background: #52616d;              '
      '  border-color: #ff00E8;           '
      '  color: black;                    '
      '  border-width: 0px; <<-- set width'
      '  border-style: solid;'
      ' };'
Link to comment
Share on other sites

  • 4 months later...

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.

  • Upvote 1
Link to comment
Share on other sites

  • 2 years later...
  • 2 months later...
  • 1 month later...
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.

post-202-0-48156800-1521064671_thumb.png

post-202-0-08034500-1521064678_thumb.png

post-202-0-43906800-1521064941_thumb.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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.

post-5885-0-47609800-1522130509_thumb.jpeg

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 4 months later...

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'

post-191-0-21633900-1534229353_thumb.png

post-191-0-76010600-1534229368_thumb.png

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...