I have some vertically-oriented text in a table cell. However, the cell seems to be taking the width of the text as if it were horizontally oriented and I want it to take on the width of the vertically oriented text.
What I have: http://jsfiddle.net/a20rp5y3/
What I'm going for: http://jsfiddle.net/p4EPd/ (the "Overall Satisfaction" column specifically)
It seems that position: absolute is the key here, but I don't know how to implement it in my example.
Thoughts?
That 2nd sample is "cheating" you to think it works. Replace the contents of the to lower TDs (below the satisfaction cell) to something short like '|' and you'll see it doesn't really work.
The reason is that CSS transforms don't affect bounding box calculations. You need to set your sizing properties "by hand".
Related
Surprisingly, I cannot find an answer to the simple question - how to wrap text around image?
I have dynamically generated (user-entered) text and image, and I need to fit it in the div, like that:
Or, in case there's not enough text, it shall be like that:
In other words, image shall be displayed in place it is set to and shall be wrapped by text. I thought it would be easy but suddenly cannot find how to do that, please help, I suppose there's a simple way to achieve that.
I believe it's possible but it's so advance that you need a lot of js and css to manipulate the flow. Assuming the blue rectangles are html tag where you can put your text, let's say a div. For example the text from rA will continue to rB then to rC. This one will continue downwards until its total height is equal to the height of the element in the middle, let's say an image. Basically the thought is making the texts jump from one div to the other when it overflows. Found this one on this website .
I am developing website everything was done and successful , but my problem is please look attached images , if browser is in maximize position the website looks neat but in minimize situation everything comes closer and text is overlap by another, please suggest me.
Try using % value of width and height of html elements instead of its pixel values in style sheet.
Since you didn't provide actual source code, i have to guess. I guess your page layed out using tables. And either elements have no width property or they have width in percentages like . The black top bar on the first images seems like it made with a table with two columns, second column being align=right.
For table layouts to work, you should set all columns' width to some constant number. Especially first rows' columns' width must be set.
I'm rendering a form in a table with the labels in tags (left) and text inputs in tags (right of labels).
For the sake of flexibility, I'd like to write as little css as possible and have everything magically fall into place, such that:
the cells expand to accomodate the width of the longest label
the fields on the right expand to fill the whole width of the cell
I've been trying various combinations of width:100% and width:auto on these various elements but to no avail. Is doing this possible, or should I just give up and specify hard widths like width:Npx?
Not sure what your code looks like (if you post, answers are so much better...).
Anyway: cells will expand naturally to the width of the longest element if no width is specified, BUT you can't have the element expand to the width of the cell at the same time! That would make the calculation of the width impossible. So I'd recommend fixing the inner content somehow. Input fields look great when they are all the same length...
You have two options as far as I'm concerned. Either you implement a solution with tables that allows you to have fluid lengths for your labels, or you set them as fixed widths and use table-less markup. I personally see no compelling reason to choose one solution over the other, although some web developers will do almost anything to avoid using <table> elements in their markup.
That being said, this solution is quite easy if you are using tables: http://jsfiddle.net/Wexcode/VcSXU/
td:first-child {
white-space: nowrap; /* don't allow text to wrap to the next line */
}
There are a lot of questions about formatting forms so that labels align, and almost all the answers which suggest a pure CSS solution (as opposed to using a table) provide a fixed width to the label element.
But isn't this mixing content and presentation? In order to choose the right width you basically have to see how big your longest label is and try a pixel width value until "it fits". This means that if you change your labels you also have to change your CSS.
I have no problem (Gasp! Heresy!) with using tables to line up form elements and their labels. If that makes me a Luddite, then so be it. I feel it can be argued that arrays of label/input pairs are sufficiently tabular to be rendered with tables.
Your labels can still word-wrap, thus allowing them to be very short or very long. You're not limiting your content in any way at all (almost), you're just dictating how they will be displayed.
Fixed widths don’t have to be in pixels. em is a valid and better unit for containers with text.
Take a look at http://www.barelyfitz.com/screencast/html-training/css/positioning/ item 6. It says:
It is not a viable solution for most designs, because we usually do not know how much text will be in the elements, or the exact font sizes that will be used.
What workaround do I need to use in order to insert dynamic text into a div with absolute position?
Any approach is welcome
regards,
If your primary goal is to keep the div in it's place, without changing it's height or width based on the amount of text, I'd go with:
div {
overflow: scroll;
}
The other option is to have the text size shrink to fit into the div, but that involves a certain amount of fuzzy math and you run the risk of the text being so tiny it's pointless.
If you want the div to change it's height based on the text, this also involves some fuzzy math, but basically, you would get the length of the text with:
var sometext = "Hey, I'm some text!";
var textlength = sometext.length();
And make the height change in relation to that length. You'd want to play with the numbers, but it would look something like:
var div_height = 10 * textlength;
$("div").css("height,"+ div_height +"em");
See Visual Effect section from W3C site here
Maybe using "overflow: auto" for the dynamic-text-container div.So the height isn't a problem.
The problem isn't putting the dynamic text in the absolutely positioned div - the div will expand to fit whatever text is in there. There are no heights defined on the red and green divs in your example.
Absolutely positioned divs are taken out of the flow of the document so anything that appears after them in the html will act like they aren't even there.
Designs that use absolutely positioned divs need to have a height defined on the containing div so the absolutely positioned divs don't overlap other content. In your example <div id="div-1"> has a height of 250px defined. Change that to 100px and you will see <div id="div-after"> move under the red and green divs.
So if you have a absolutely positioned div in a sidebar with nothing after it you can add all the dynamic text you want. If you have one in your header, it is going to make your design very complicated to implement.