CODEWITHSUNDEEP
cssextjs4panel
AfanfeFana
AfanfeFana

Reputation: 169

Vertical Text no rotate extjs

i want to produce a vertical header title. Using headerPosition:'left' extjs automaticaly rotate my title, but what i want is to produce a title real vertical mode like this:

F

I

L

T

E

R

is that possibile?

Thanks anyone

Upvotes: 0

Views: 972

Answers (1)

Krzysztof
Krzysztof

Reputation: 16150

It is possible. Rotation is mady by CSS transform setting, so disabling it is also posiible by CSS. Example CSS:

#panel .x-panel-header-default-vertical .x-panel-header-text-container {
    -webkit-transform: none !important;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
    overflow: visible;
}

#panel .x-panel-header-default-vertical .x-panel-header-text-container .x-header-text {
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre;

    width: 10px;
    height: 16px;
    display: block;
    overflow: visible;
}

This works, and title look like you expect, it is invisible due to some layout positioning. I walked it around by changing inline style of title element in listener:

listeners: {
    afterLayout: function() {
        this.header.titleCmp.el.setStyle('left', '0');
    }
}

Working sample: http://jsfiddle.net/28q5N/1/

Upvotes: 2

Related Questions