Rotating text in label

[blazej]

Hi,

I'm trying to use CSS styling to rotate text in a label. It generally works, i.e. the text gets rotated, but the label becomes much larger at the same time, making it very difficult to use this in layouts.

I'm testing it in Chrome.

Here's my CSS:

.rotateFull {
  /* Firefox */
  -moz-transform: rotate(-90deg) translate(0, 100%);
  -moz-transform-origin: 0% 100%;
  /* Opera */
  -o-transform: rotate(-90deg) translate(0, 100%);
  -o-transform-origin: 0% 100%;
  /* Safari + Chrome */
  -webkit-transform: rotate(-90deg) translate(0, 100%);
  -webkit-transform-origin: 0% 100%;
  /* IE */
  -ms-transform: rotate(-90deg) translate(0, 100%);
  -ms-transform-origin: 0% 100%;
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

And my Java:

        final Label sampleNameLabel = new Label( "....." );
        sampleNameLabel.setWidth( 19 );
        sampleNameLabel.setHeight( 70 );
        sampleNameLabel.setStyleName( "rotate" );
        sampleNameLabel.setShowEdges( true );
        sampleNameLabel.setEdgeSize( 1 );

The generated HTML looks like this when THERE IS NO ROTATION:

<div id="isc_5Q" eventproxy="isc_Label_8" style="position: absolute; z-index: 200702; margin-left: 1px; margin-right: 1px; margin-top: 1px; margin-bottom: 1px; overflow-x: visible; overflow-y: visible; width: 36px; height: 68px; left: 0px; top: 0px; cursor: default; " onscroll="return isc_Label_8.$lh()">
  <div id="isc_5R" eventproxy="isc_Label_8" style="position: relative; visibility: inherit; z-index: 200702; cursor: default; ">
    <table cellspacing="0" cellpadding="0" width="17" height="68">
      <tbody>
        <tr>he rotation, 
          <td class="normal" align="left" valign="center">662715</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

After applying the "rotate" style, the code remains almost the same - with the following difference: the width and height of the outermost div become 54 and 138, respectively.

Any idea why this happens and how to possibly fix it?

Best,
Michał

[Isomorphic]

A Label sizes to fit to the text, taking it's configured width and height as minimums. You haven't mentioned whether the size is too wide or too tall, but you may either have minimum set too high, or the browser could be misreporting the size of rotated text.

[h-tomek]

I have to report that I have the very same problem as blazej described. The problems is that width remains as it was before text rotation occurs.

I presume that SmartGwt does its layout magic before CSS is applied, and before rotation text is horizontal taking certain amount of space (width). Once text is rotated, Label width should changed to autofit the content (autofit is set to true) but that does not happen.

I've even used scheduleDeffered to set the width manually once layout has been done, but that hasn't helped.

Is there any solution for this? Workaround? How to make it work as expected?