Clever Geek Handbook

Vertical icon deviates from edge as text length increases

I am trying to make a vertical "icon" aligned to the left / right edges of the browser. My current approach is to make a div and rotate it 90 degrees and then use position: fixed; left: 0; top: 20%

it to position it correctly, however I ran into the following problem:

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

Demo : http://jsfiddle.net/bv3no599/ (see how icons deviate more from 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>

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

Thank.

+3


source to share


2 answers


The default rotation of an element is based on its center. By simply using it transform: rotate(90deg)

, you will rotate it 90 degrees around its center axis. This causes the edges of different size elements to appear in different places.

Try pivoting at the bottom left instead:

transform-origin: 0 100%;


Both elements will now be close to the left edge of the screen no matter how tall they are, but your hardcoded offset left

spoils it a bit. Instead, just place them in left: 0;

to always insert them on the left side of the screen. This way you also don't need to set a new offset for each element.

jsFiddle

+2


source


This is because you are using

left: -22px;

and

left: -50px;

to manually fix a certain side effect of the turns. Namely, rotations by default rotate about the center of the element, so they leave you with space on the sides. What happens when you "miss" your correction for the length of the text, for example. -50px

, you will get a breakaway - try changing it to -80px

or -100px

to see what I mean. (If you "over-adjust" the text will disappear altogether.)



Use instead

transform-origin: left bottom;

to rotate from the appropriate source and set

left: 0;

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

0


source






More articles:


All Articles