Padding between tab title and closing icon

Hi there.

As far as i can see within the dhx_skyblue theme for a tabbar there’s no
padding between the title text and the closing icon. Is this right?
How can that be changed?

And, tabbar doesn’t support an tab icon? That’s strange. Is that right?
And if are there any plans to support this?

Thanks in advance,
Alexander

Hi
There is no padding, because “close” image has z-index “11px”, which is more then a tab.
You can add icon manually.
I put a code snippets and a picture with result below:

tabbar.addTab("a1", "<div style='margin-left: 5px; width: 125px; height: 24px'><img src='../___img/settings.gif'><span style='left: 2px; vertical-align: top; line-height: 14px'>aaaaaaaaaaaaaaaaaaa</span></div>", "150px");


Oh man.
Why are little things always that complicated.
The application i build updates the tab title every 2 minutes.
Happens when user works with it.
With every reload or action event icon changes and title changes.
Yes indeed, its an application.
Do i really have to code all this ???

tab.setIcon() – thats all.

:frowning:(((((((((((

Unfortunatelly, the described way is unique.
There is no such functionality in the development plan.

Oh man.
Coming from Bindows over Ext to DHTMLX.
But its ok.
There’s a prof license and good is.
TvM.
Alexander

Hi,

As far as i can see within the dhx_skyblue theme for a tabbar there’s no padding between the title text and the closing icon.

Tab title is centered in tab. When you set auto width for a tab ("*"), the tab size is adjusted to text width + 20 px paddings. If tabs are inactive, there will be a 10px space between text and close icon. However, an active tab gets bold font. In this case the size of tab text is increased, and it means that space between text and close icon is decreased - it is about 1px. You may increase the paddings with the following code modification in dhtmlxtabbar.js:

  • locate
    (this._close?20:0)
  • and replace with
    (this._close?30:0)

The main problem for me is indeed the bold font.
Without everything is fine, but when selected and getting bold the look gets unclean.

I have to take a look at ExtJs as there i never had problems.
They have found the perfect way towards a clean rendering.

At the moment i’m deeply in finishing keyboard support for menu.
Will fall back to tab design later.

But best regards and thanks for your help,
Alexander

Hello
If you don’t like bold - apply the next CSS rule:

.dhx_tab_element_active { font-weight: normal !important }

Hi hi.
Bold itself is perfect.

Had a look over to a similiar framework and MS Windows and
came to the conclusion that only a dynamic tab size calculation
will bring a pixel perfect layout.

I add this point add to personal agenda and work on it sometime later.
I will report efforts here so far s.o. is interested.