I have a table with slanted text in the header row, the only problem is that the text still makes the width of the columns way to large. Is there any way to squish together the table columns so that they are about the width of the select boxes? Or is there a way to place the text there without it in the header and maybe just use a <div> or <p>?
Here is the fiddle I am working with:
http://jsfiddle.net/t9Krg/1/
.slanted {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
white-space:nowrap;
/*
display:noblock;
*/
}
The boarders around the header is just to see the extra spacing and will be removed later.
If you use absolute positioning, you can place objects on the page anywhere you like. But to keep them positioned correctly relative to the table, you need to apply relative positioning to their parent elements.
So for this markup:
<th class="slanted">
<div>This is a heading</div>
</th>
Your CSS should look something like this:
.slanted {
text-align:left;
position:relative;
white-space:nowrap;
}
.slanted div {
width:12em;
position:absolute;
top:4em;
left:-1em;
transform: rotate(-45deg);
}
You'll have to tweak the top and left values to get things right, but it shouldn't be too difficult as long as you aren't intending to have line breaks in your labels.
Link to JSFiddle
Maybe you could try using text-overflow over the th tags. An example i've found in this answer:
CSS text-overflow in a table cell?
Add position fixed to CSS
div{position:fixed;}
You'll have to play around with some of the other stuff, but it would cause the columns to not grow to your content.
http://jsfiddle.net/MathiasaurusRex/t9Krg/4/
Related
I have a div containing an image, I want to rotate the image. After rotation the image should cover the parent div, overflow would be hidden. I have two pictures of what I get and what I want (lack of reputation doesn't allow me to embed the pictures):
.parent {
position:relative;
display:inline-block;
width:100%;
max-width:480px;
overflow:hidden;
}
.background{
width:100%;
height:auto;
}
.grafic {
position:absolute;
z-index:1;
top:0;
left:0;
width:100%;
max-height:360px;
height:auto;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<div class="parent">
<img class="grafic" alt="" src="img.gif"
<img class="background" src="gfx/missingpicture.gif">
</div>
As you can see, I can rotate the image, but the image isn't fully covering the parent div. I couldn't find anything to this exact problem.
Some thoughts:
One could use JQuery to calculate the necessary height/width to cover the parent div, but I hate using JS/JQuery if a pure CSS solution is possible (I can do a JS solution by myself, but I still suck at CSS).
I use PHP (I'll know the degree), so precalculating stuff can be done, but the parent div becomes smaller on smaller screens. A fix width would kinda suck then..
I can't think of CSS-only solution, so here's something with JS that I've used before.
You don't need to do the maths yourself in order to get the dimensions of your transformed object.
Instead you can use the Element.getBoundingClientRect() method which returns the height and width of the element after the transformation.
Once you have the dimensions, it should be easy to adapt the parent dimensions to fit the rotated image.
Here's a DEMO.
Also this other question has working solution which does what you want.
I hope it points you in the right direction.
I do not required reputation for posting a comment so I am posting as a comment. I am only addressing the sizing options for the image.
Say your image has width=w and height=h. Then if the size of the outer quadrilateral will have size
sqrt(w*w + h*h)
. Please note that the outer image will not be a square if inner image is not a square.
Why would text and controls inside the table cells ignore/not inherit vertical-align:middle; style of the cell itself (or row, or both)?
In CSS stylesheet loaded by the page:
tr.troptions{
vertical-align:middle;
}
td.tdoptions{
white-space:nowrap;
vertical-align:middle;
}
The inspector is showing that style is applied:
but everything inside the row does not appear aligned vertically at the middle in IE10 that this is being developed for:
The CheckBoxes probably are centered vertically, but not text and not the TextBoxes. The left text box is lower than the the right.
The controls seem to be vertically aligned fine in Firefox though, but still not text:
Tried putting the style into td, tr and table to no avail. What am I doing wrong?
Edit:
I challenge everyone who downvoted this "bad" question to produce a CSS that vertically middle-aligns text, check boxes, radio buttons, text boxes and buttons in the table cells for IE10. And if you cannot - you know what you are: all-hat-no-cattle.
I don't exactly know why this happens, but in general, you can use
.troptions {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
For Text, you can also use line-height: 00px where 00 is the same as height.
I have a div (tab) that I rotate 270 degrees like so:
-webkit-transform-origin: 100% 0%;
-webkit-transform: rotate(270deg);
(Example here: http://users.telenet.be/prullen/align.html)
When I want to align the tab with the top edge of the content box, it's pretty easy. i just set "top" to "3px" (the border size). However, for the bottom it's another story.
It appears I need to calculate this with jquery like so:
$tab.css('bottom', (Math.abs($tab.outerWidth()-$tab.outerHeight())
(Though for this example I'm just using a static value. It may not look exactly like I want it to in your browser, here's an image: )
I was wondering if there is a better way since this does not seem to work all that well in firefox for example (1 pixel shift). Is there an easier way by adjusting the transform-origin perhaps?
(Note that I need to keep the same div structure I have now)
Ideally it'd be as easy as setting bottom to: 3px (the border thickness)
Thanks.
When you want to put the tab at the top of the sticky, apply the class .tab-top to the .sticky-tab element.
.tab-top {
transform-origin: 100% 0%;
transform: rotate(270deg);
top: 5px; /*Border Size*/
right: 5px; /*Border Size*/
}
When you want to put the tab at the bottom of the sticky, apply the class .tab-bottom to the .sticky-tab element.
.tab-bottom {
transform-origin: 100% 100%;
transform: rotate(270deg) translateX(100%);
bottom: 0;
right: -18px; /*Height (appearing as width once rotated) of the tab*/
}
Essentially you want to change the transform origin to be at the bottom right-hand corner of the element and then attach the element to the bottom of its parent. This will place the element exactly below the .sticky. Then use the translateX(100%) to force the bottom of the .sticky-tab to align with the bottom of the .sticky.
Problem: css3 transforms applied to a child element inside a div are ignored by the browser (FF5, Chrome12, IE9) when calculating the scrollHeight and scrollWidth of the containing div's scrollbars when using "overflow: auto;".
<style type="text/css">
div{ width: 300px;height:500px;overflow:auto; }
div img {
-moz-transform: scale(2) rotate(90deg);
-webkit-transform: scale(2) rotate(90deg);
-ms-transform: scale(2) rotate(90deg);
}
</style>
<div><img src="somelargeimage.png" /></div>
I have put together a small test on jsfiddle showing the undesired behavior.
http://jsfiddle.net/4b9BJ/
Essentially I am trying to create a simple web based image viewer using css3 transforms for rotate and scale and would like a containing div with fixed width/height to be able to scroll to see the full content of the image it contains.
Is there an intelligent way to handle this issue, or even a rough workaround? Any help is appreciated.
I added an extra div to each of the transformations and by setting fixed widths for those divs and clipping overflow I manged to make them the correct size. But then I had to use position: relative and top: blah; left: blah to shift the images into the correct position.
http://jsfiddle.net/4b9BJ/7/
I've got a <span class="name"> next to an <img> inside a <div>. Inside this span I have some text which I want to turn 90 degrees. However, when I do this (as code suggests below) the span ends up in a somewhat weird position on top of the image.
In IE, the text doesn't rotate at all.
.name {
display: block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Any suggestions as to how I solve this?
I've fixed this on my own what I needed to do was put a fixed size on the span and then use position:absolute; to position it where I wanted it
I'm not sure how to fix it. But the reason it doesn't rotate in IE is that you are using "webkit" and "moz" to rotate - which are firefox-like-browser specific functions. You'll have to google for an IE-equivalent.