Clever Geek Handbook

ExtJS 4 panel - text direction when collapsed

I have a panel that collapses to the left, and when collapsed, the title is written vertically from top to bottom. Is there a way to make the title appear in the same place but written from bottom to top?

Thank!

+3


source to share


2 answers


Ok I think I found a solution (left margin is optional):

.x-panel-header-body-default-collapsed-left span.x-header-text{
   transform:rotate(180deg);
   position:relative;
   bottom:0;
   text-align:right;
   display:block;
   margin-left: 4px;
}


jsFiddle

0


source


I managed to get rendering from bottom to top by overriding the extjs class: -

.x-panel-header-default-vertical .x-panel-header-text-container {
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
  -moz-transform: rotate(-90deg);
  -moz-transform-origin: 0 0;
  -o-transform: rotate(-90deg);
  -o-transform-origin: 0 0;
  transform: rotate(-90deg);
  transform-origin: 0 0;
  display: block;
  position: absolute !important;
  top: 85px !important;
  left: 0px !important;
}


Working demo at jsFiddle

+2


source






More articles:


All Articles