I have created one macro for vertical headers when heading goes long header go wider

Shreeyansh Singh August 19, 2019

HI ,

 

I have macro for vertical headers but when i increase the length of heading the width goes wider , how i can reduce the width of the header column . 

 

 

<style>
/** @see: http://css-tricks.com/snippets/css/text-rotation/ */
.rotate-headers th div.tablesorter-header-inner {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=6); /* Internet Explorer */
}
.rotate-headers th {
vertical-align:middle;
height: $paramheight;
}
</style>

<div class="rotate-headers">$body</div>

1 answer

0 votes
DPKJ
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
August 19, 2019

Here is answer from `Superuser` which I have used it earlier

## @param height:title=Height|type=int|required=true|desc=Header height in 
pixels|default=100
## @param width:title=Width|type=int|required=true|desc=Header width in 
pixels|default=30

#set( $Integer = 0 )
#set( $height = $Integer.parseInt($paramheight) )
#set( $width = $Integer.parseInt($paramwidth) )
#set( $shift =  $height - $width )

<style>
    /** @see: http://css-tricks.com/snippets/css/text-rotation/ */
    .rotate-headers th div.tablesorter-header-inner {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: translate(0px, ${shift}px) rotate(270deg);
    width: ${width}px;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* 
Internet Explorer */
    }
    .rotate-headers th {
        height: ${height}px;
        white-space: nowrap;
    }
    .rotate-headers th div {
        transform: translate(0px, ${shift}px) rotate(270deg);
        width: ${width}px;
    }
</style>

<div class="rotate-headers">$body</div>

 

Here is link to post - https://superuser.com/questions/741451/how-do-i-create-vertical-table-headings-in-confuence%C2%A0

 

You can try different one if that works for you.

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events