How to make text vertical in a jQuery UI Layout toggler?

Question

I am using the jquery-ui-layout plugin in a website: jQuery UI Layout Hompage

There are options togglerContent_open and togglerContent_closed that allow you to place html inside of the toggler. I want to include text in my EAST pane, but my problem is the text displays horizontally across a vertical toggler, so only the first character can be seen.

How can I display it so that it reads vertically instead? Like either of (sry, very rough mock-up) the options below. Is it an option in jQuery UI Layout or just css?

EDIT: Does anyone know if this is possible by modifying jQuery UI Layout settings?

Answer 1

.parentPane {
    border: 1px solid #ccc;
}

.parentPane > div {
    display:inline-block;
    height:100px;
    vertical-align:top;
    text-align:center;
}

.eastPane {
    background-color:#CA7DBD;
    width: 49.5%;
}

.westPane {
    background-color:#4679BD;
    width: 49.5%;
}

.rotator {
    background-color:#ccc;
    display:inline-block;
    margin-top: 20px;
    position:relative;
    transform: rotate(90deg);
}
.wizard1 {
    left:0;
}
.wizard2 {
    right:40px;
    ;
}
.wizard2 {
    right:40px;
    ;
}
.wizard3 {
    right:80px;
    ;
}
.wizard4 {
    right:120px;
    ;
}

<div class="parentPane">
    <div class="eastPane">East Pane</div>
    <div class="westPane"><div>West Pane</div>
        <div class="rotator wizard1">Wizard 1</div>
        <div class="rotator wizard2">Wizard 2</div>
        <div class="rotator wizard3">Wizard 3</div>
        <div class="rotator wizard4">Wizard 4</div>
    </div>
</div>

You can make use of CSS3 transform property. This would rotate the text, however the alignment wouldn't still various such container's (div's or span's) apart. Hence, you would use relative positioning to align them next to each other. This is the general syntax you would use of rotation.

transform: rotate(90deg);

Making use of the relative positioning , you can define the distance between multiple content (where the text is vertical).

See the below snippet

.rotator {
    background-color:#ccc;
    display:inline-block;
    margin-top: 20px;
    position:relative;
    transform: rotate(90deg);
}

.wizard1 {
     left:0;
}

.wizard2 {
     right:40px;;
}

.wizard2 {
     right:40px;;
}

.wizard3 {
     right:80px;;
}

.wizard4 {
     right:120px;;
}

<div class="rotator wizard1">Wizard 1</div>
<div class="rotator wizard2">Wizard 2</div>
<div class="rotator wizard3">Wizard 3</div>
<div class="rotator wizard4">Wizard 4</div>

Hope this helps!!!