Resize div when content is rotated

Question

I don't know that my question is much different than the question in the possible duplicate. However, the answer in the possible duplicate does not work (even the jsFiddle provided as the answer does not seem to even rotate the text). The answer on this thread actually solved my problem.

I'm trying to get a div to resize when the text inside is rotated 90 degrees. Right now, the div stays the same width even though the text becomes "thinner" by rotating it.

I've got something like this:

html, body { height: 100%; margin:0px; } .pane { width: auto; float:left; height: 100%; border: 1px solid black; } .vertical { display: block; transform-origin: top right 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } <div class="pane"><span class="vertical clearfix">This is text</span></div> <div class="pane"><span>This is another Pane</span></div>

You can see a sample plunk here.

I'm trying to avoid using hardcoded heights or widths if possible.

You'll have trouble as the dimensions aren't really changing...transforms are visual only they're not actually moving things in the DOM or affecting positioning/margins etc. — Paulie_D
– Paulie_D, Commented Mar 21, 2016 at 20:18
Possible duplicate of Rotated elements in CSS that affects their parent's height correctly — Patrick Roberts
– Patrick Roberts, Commented Mar 21, 2016 at 20:25

G-Cyrillus · Accepted Answer · 2016-03-21 21:03:19Z

when you use transform or position:relative; the initial space used by the element remains the same, it is only drawn different at screen.

Here if you want your rotated box to only use the width of one line height, you need to set this width and let content overflow.

translate can be used to replace content in sight

white-space:nowrap to keep text on a single line

and eventually, because of the rotated value used and the width reduced, you may use direction to push overflow in the opposite direction .

html, body { height: 100%; margin: 0px; } .pane { width: auto; float: left; height: 100%; border: 1px solid black; } .vertical { display: inline-block; text-align: left; float: right; padding-right: 1em; width: 0.25em; white-space: nowrap; direction: rtl; transform-origin: top left; transform: rotate(-90deg) translate(-100%); }

<div class="pane"> <span class="vertical">This is text</span> </div> <div class="pane"> <span>This is another Pane</span> </div>

Else you may use min-width , and a negative margin that virtually reduce elements width to none;

I would go for this one more simple and solid

html, body { height: 100%; margin: 0px; } .pane { width: auto; min-width:1.2em; float: left; height: 100%; border: 1px solid black; } .vertical { display:inline-block; padding-right:0.25em; margin-right:-999px; transform-origin: top left; transform: rotate(-90deg) translate(-100%); }

<div class="pane"> <span class="vertical">This is text</span> </div> <div class="pane"> <span>This is another Pane</span> </div> <div class="pane"> <span class="vertical">This is some more text</span> </div>

Collectives™ on Stack Overflow

Resize div when content is rotated

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related