CODEWITHSUNDEEP
htmlcss-transforms
Milo
Milo

Reputation: 33

Vertical badge deviates from edge with increasing text length

I'm trying to make a vertical "badge" aligned to the left / right edges of the browser. My current approach is to make a div and rotate it 90 degrees, then use position: fixed; left: 0; top: 20% to place it properly, however I've ran into the following problem:

As the text grows longer, the widget becomes "detached" from the left and right edges of the browser.

Demo: http://jsfiddle.net/bv3no599/ (See how the badges deviate further with longer text)

Current Code:

<div id="badge-outer-2" style="background: #1508bc;color:#FFFFFF;position: fixed;border-top-right-radius: 5px; border-top-left-radius: 5px;transform:rotate(90deg);top: 50%;padding:8px;font-size:13px;box-shadow:0px 0px 4px rgba(0,0,0,0.4);z-index:99996;cursor:pointer; left: -50px">Not OK when the text is longer and longer</div>

Could anyone point me to a solution to this problem? Why does it move farther from the edge after increasing the text length?

Thanks.

Upvotes: 3

Views: 47

Answers (2)

Andrew Cheong
Andrew Cheong

Reputation: 30283

It's because you're using

left: -22px;

and

left: -50px;

to manually correct a certain side-effect of rotations. Namely, rotations by default rotate with respect to the center of the element, therefore leaving you with spaces to the sides. What's happening is that when you "undershoot" your correction relative to the text length, e.g. -50px, you get that detachment—try changing it to -80px or -100px to see what I mean. (If you "overshoot," the text disappears altogether.)

Instead, use

transform-origin: left bottom;

to rotate from the appropriate origin, and set

left: 0;

like so: http://jsfiddle.net/rkxuu8cs/1/.

Upvotes: 0

isogram
isogram

Reputation: 318

The rotation of an element is by default based on its center. By just using transform: rotate(90deg) you will rotate it 90 degrees around its center axis. That causes the edges of the different size elements to end up on different places.

Instead, try rotating around the lower left corner:

transform-origin: 0 100%;

Now both elements will be close to the left edge of the screen no matter how tall they are, but your hardcoded left offset messes it up a bit. Instead, just position them at left: 0; to always stick them to the left hand of the screen. This way you also don't have to set a new offset for each element.

jsFiddle

Upvotes: 2

Related Questions