How To Vertically Align Text And Remove Gap At Right In TUniStatusBar?

[Frederick]

I have a TUniStatusBar which I set as follows in the OnShow event of the form:-

      with staBar.JSInterface do begin
         JSCode(#1'.getRefItems()[0].setStyle("font-weight", "bold");');
         JSCode(#1'.getRefItems()[0].setStyle("color", "black");');
         JSCode(#1'.getRefItems()[0].setStyle("background-color", "powderblue");');
      end;

When the program is run, the "Ready" text in the panel is hugging the top (1) and there is a white gap on the right (2).

How do I get the text to align vertically in the centre and how do I get rid of the white gap on the right?

--
Frederick
(UniGUI Complete - Professional Edition 1.90.0.1534)
 

[Sherzod]

Hello,

Can you please attach a testcase?

[Frederick]

6 hours ago, Sherzod said:

Hello,

Can you please attach a testcase?

Please find attached.

Hint: The problem occurs when the theme is uni_flat_black and not classic.

statusbar2.zip

[Sherzod]

Thanks, 

I will check. 

[Frederick]

Thank you

[Sherzod]

7 hours ago, Frederick said:

statusbar2.zip

Can you try to use this approach?

1. UniStatusBar.ClietnEvents.UniEvents -> beforeInit:

function beforeInit(sender, config)
{
    config.cls = 'customBar';
}

2. CustomCSS:

.customBar .x-box-inner {
    top: -1px;
}

.customBar .x-toolbar-item {
    width: 100% !important;
}

 

[Frederick]

The CustomCSS code for vertically aligning the text seems to do nothing.

However, the gap is now gone.

[Sherzod]

9 minutes ago, Frederick said:

The CustomCSS code for vertically aligning the text seems to do nothing.

.customBar .x-box-inner {
    top: -1px;
}

.customBar .x-toolbar-item {
    width: 100% !important;
    line-height: 1.9em;
}

 

[Frederick]

The text is now vertically aligned.

Thank you.