I've seen multiple implementations of a rotated Tableheader, and using this one:
table div.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
white-space: nowrap;
width:20px;
padding-left:5px;
margin-top: 125px;
}
Angular2 Template:
<div [class.rotated]="index != 0"><span>{{h.value}}</span></div>
With long labels however, this doesn't look neat.
Is there a chance to do a word-wrap ?
Remove white-space: nowrap; and add word-wrap: break-word;
div.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
width:50px;
padding-left:5px;
margin-top: 125px;
word-wrap: break-word;
text-align:center;
}
<div class="rotated" ><span>{{h.value}}</span></div>
Related
I tried rotating the content of my fixed div and it rotates as expected but the problem is it doesn't occupy the height of the div.
Sample fiddle here.
HTML:
<div class="outer-left">
<h2 class="paginator">Page 1 0f 10</h2>
</div>
CSS:
.outer-left {
background: #EFB041;
height: 100%;
display: block;
width: 4%;
position: fixed;
left: 18%;
}
.paginator {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
color: #fff;
}
Note: I can make it by applying width = auto on the div but how can I
achieve it using a fixed width?
Now I can achieve it adding
margin-top: 600px;
white-space:nowrap;
inside the paginator class. but is there a way cleaner on how to get this done?
jsfiddle
Maybe this jsfiddle works for you.
HTML:
<div class="outer-left">
<h2 class="paginator">Page 1 of 10</h2>
</div>
>
CSS:
.outer-left {
position: relative;
background: #EFB041;
overflow: hidden;
width: 5%;
left: 18%;
height: 200px;
float: left;
}
.paginator {
position: absolute;
top: 30%;
left: -2.0em;
width: auto;
margin: 0;
padding:0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
color: #fff;
}
I'm trying to rotate an parent div with some child div's, and than rotate the spans inside the child div's back so that the text is still readable...
Here's an JSFiddle
The HTML:
<div id="bt_container">
<div class="row_container">
<div><span>col1.1</span>
</div>
<div><span>col1.2</span>
</div>
<div><span>col1.3</span>
</div>
<div><span>col1.4</span>
</div>
</div>
<div class="row_container">
<div><span>col2.1</span>
</div>
<div><span>col2.2</span>
</div>
<div><span>col2.3</span>
</div>
<div><span>col2.4</span>
</div>
</div>
</div>
And the CSS:
#bt_container {
width: 1000px;
height:600px;
border: 1px solid #333;
}
.row_container {
margin: 10px;
border: 1px solid red;
}
.row_container div {
width:70px;
height: 70px;
border: 1px solid blue;
background: url('http://i.imgur.com/wI9t0bj.png');
background-size: cover;
}
.row_container div {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.row_container div span {
color: white;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
But the span isn't rotating back ( it's not rotating on it's own ). So does anybody knows what i do wrong? / What do i have to do to make the text readable again?
Put a display: block; on your span in order to rotate it.
Add display:inline-block or display:block to the span. Or just use block elements instead of span.
working fiddle
edit display and padding (to show entire span text)
.row_container div span {
color: white;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
display:inline-block;
padding-left:20px;
}
Im trying to rotate a <span> within an <h2> 90 degrees.
right now if I just set it to rotate nothing happens - but if I add a display:block to the span then it rotates. My problem is it pushes the rest of the h2 on to the next line.
Is there any way to have the h2 display on one line with the span rotated in middle of it?
here's how it should look
HTML:
<h2>Join <span class="flip-text">With</span><span class="flip-text">Your</span> Family</h2>
CSS:
span.flip-text{font-size:10px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
Just like Christopher was suggesting, display: inline-block is the way to go:
http://jsfiddle.net/X85b6/
<h2>Join<span>with<br />your</span>Family</h2>
h2 {
font-size: 60px;
text-transform: uppercase;
}
h2 span {
font-size: 15px;
line-height: 16px;
display: inline-block;
position: relative;
bottom: 5px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
In this page following CSS to draw 12 point burst, how can I put some text inside it (in current form it does not show text inside text, I test z-index without success)?
How can I draw a 12 burst border in it most clean manner?
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
All you need is to nest another element inside the burst container:
<div id="burst-12"><span>I am the text</span></div>
Then you can style it the way you want:
#burst-12 span {
display:block;
position:absolute;
z-index:2;
}
You'll find a very basic example here.
So I'm using CSS to rotate some text from horizontal to vertical (90 degrees) like so:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;
filter: flipv fliph;
My problem is that this shifts the text way outside of the container div. Is there a trick to keep it inside the container? Is there some anchor point that I could set? What is a cross browser way to adjust post?
You could pull it back in with a few CSS properties...
#whatever {
position: relative;
top: -4px;
right: -10px;
}
Alternatively, you could play with the transform-origin property:
transform: rotate(-90deg);
transform-origin:20% 40%;
-ms-transform: rotate(-90deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
Alternative method, which is more browser compliant and doesn't need information about amount of text beforehand:
.disclaimer {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 12px;
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
line-height: 15px;
height: 15px;
width: 15px;
overflow: visible;
white-space: nowrap;
}
http://jsfiddle.net/d29cmkej/