I have an HTML table with two columns with some text in them. Clicking a link on the right column renders some content dynamically that increases the column length to more than double. This in-turn causes the text on the left column to expand and look ugly. Is there a way to keep the text on the left column in-tact despite the increased right column length?
Related
I've got a two-column layout, and in one row the left column contains a resizeable textarea. When the textarea is stretched to the right, it overflows into the right column. I would like the right column to flow under the left column in such a case (like what happens when the browser window is narrowed). Any ideas how to style this correctly?
I need to place a text with no spaces into left cell of my table, but I want to keep the size of the cell. Below is graphics example of what I want to achieve:
I tried different word-wrap settings but it only works for divs and not the cell table.
fix the size of left div with css using width.
I have a set of fields forming line items and the fields text are aligned to the right currently. In most cases it works fine, however when the number exceeds the input width then the text/numbers are displayed from left to right. While it is an extreme case, I'm wondering if there is a way to always anchor the field text to the right.
As pointed out in the comment. The solution in stackoverflow.com/q/1962168/1059070 is what I was looking for.
Please look at the following page in IE9..
www.homextreme.co.za/default_test.aspx
I have added borders on some of the tables for debugging purposes
On the left choose any region from the dropdown, the page will refresh..
On the right you will see there is now a gap below the table on the right.
I have googled for ages and searched for IE9 table bug fixes and tried them but for the life of me I cannot get that cell to size correctly. Can somebody please help me with a solution for this?
Link to screenshot before I expand the directory on the left.
Link to screenshot after...
Thanks
After making a selection from the list you get a long list on the left column. Since all the content is inside a bigger table (oy tables inside tables inside tables), the right column has to expand vertically.
In the right column there are two cells on on top of the other one (plus the one in the middle for spacing). The one in the top includes the table with the space you don't want, the cell in the bottom has a bunch of other smaller sections. The top cell expands vertically and ends up being taller than the content, and that's the extra space you see. If you change the vertical alignment (vAlign) of that cell (1st row, 3rd cell) to top, you'll see the space move to the top.
The reason it doesn't show up in other browsers is that they probably have different row height algorithms and make the 1st row as small as possible and leave the rest to the 2nd and 3rd. And then IE uses percentages or makes the rows proportional to the content or something.
I'm not sure what to suggest you do to fix this. If you're going to stick to tables for layout, just use one row and have a cell for each column, and keep the content of each column in the same cell instead of splitting it in rows.
I have a table with 4 columns. The first 3 columns should only take up the space they need to display the data / ui control that is placed in them, whereas the fourth column should take up the remaining space. I don't know while creating the table what widths the first three columns should be, so I can't put a "width" value in there.
If I set the fourth column to 100% width, then it squishes the first three columns too much; if there is a drop down list ("select" in html terms) in one of those columns, the last column would then force it to become somewhere around 20 pixels wide, whereas it should be as wide as the option element which has the longest text in that menu.
Other rows in the table will cells that span multiple columns, so I think I'm stuck using the table element (as opposed to divs etc)
Any ideas? IE6 is not supported by the site so whatever works in Firefox / Chrome should be good.
Try putting width:1%; white-space:nowrap; in the first three columns and leave the fourth without width