I have a complex tree-like table layout (few cells on the left, many on the right), and I want to make certain cells (and their rows) vanish completely (with Javascript, based on class).
visibility:hidden just makes the contents invisible, and setting the text-size and border of the cells makes them small, but I'm stuck with a few pixels left. I've tried line-height:0, padding:0 border-spacing:0, but the cells are still taking up about two pixels, with another two pixels vertically between them.
Does someone have a list of the css attributes which have to be zero to get a cell to disappear completely?
Use the CSS display property:
style="display: none;"
If that doesn't work wrap the content in a <span> and use it on that instead
Related
is there a simple way to fill two columns of width 50% each with photos, by always adding the next photo in the column that has more blank space?
Photos have various dimensions but should fit the width columns.
I can't give you a more in-depth answer without a code example or more information about context, but the crucial pieces of information you need are the width of each column in pixels, and the width of elements in the lowermost row in those columns. This is assuming you're stacking from left-to-right and then moving downward.
There are various functions to determine element width using JavaScript.
On my page I have a grid (mostly ExtJs), created out of a bunch of nested tables and divs.
In particular the inner-most div (representing an element inside the grid cell) is nested in two other tables (and their corresponding trs and tds of course).
I want this inner-most div to expand across table boundaries to the bottom of the corresponding div in a cell below (as shown on the attached diagram).
Effectively using up two grid cells (or even more - 3, 4 etc. vertically).
Is this even possible? I know of no such way (other than explicitly specifying the height, which might be pretty difficult, since it varies between cells), but my HTML/CSS skills are quite limited.
If it's possible, could you point me in some direction?
Some other details:
rows in the grid can be of variable height, dependent on the size of elements in their cells
the black line on the diagram represents the grid
It is possible that the contents of a table exceeds its boundaries if you play a little with
{position: relative;
top: -40px}
for the div in the table. Though i'd think of a more elegant solution.
check this fiddle:
http://jsfiddle.net/SkX7T/
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 */
}
I can effectively create a two column layout in a <select> by using JavaScript to measure the text and add the appropriate number of spaces. However, depending on the font size, the space is ~4 pixels in width, meaning the column on the right kinda wavers to the left or the right up to 3 pixels at a time.
Fixed width is not the solution. Wavering actually looks better in this case. But an alternate space would be even better.
Is there a space of a different width that I can calculate in to reduce the waver?
There are various fixed-width spaces, but they do not work consistently across fonts.
If you need tabular presentation, use a table. This means that instead of a select element, you would use a set of radio buttons. You can then divide the radio button labels in two columns (and put the radio buttons in a column of their own, perhaps).
I want to make a textfield in my html page to expand as much as possible to fit the parent width. Here is an image shows what I want.
(source: ez2learn.com)
I try to use width: 100%, but the browser sets the width of elemnt as its parent's, which makes no room for other elements, they have to to be placed in second line. How can I let the element to expand as much as possible to fit all space in single line?
Thanks.
If you want to make the input ‘100% minus the widths of those other things’ you're into CSS layout stuff.
You could float: left the label, float: right a wrapper around the buttons, and set left and right margins on a wrapper around the input, then set the input to width: 100%.
(But personally, liquid-layout forms is one of the places I still typically resort to tables, as combining a series of fixed- and variable-width columns is something that easily stretches CSS layout beyond its limits.)
I agree with bobince. I would look into a table option. I would either decide on fixed:width that works for you within the table, or try to make the width:100% within the table.