I have a tr with td's containing inputs. I'm not applying any size attribute or style with regard to width.
Some inputs contain just single digits and some contain words. The ones containing single digits have much extra white space and the ones containing words contain far less.
When I resize the page containing the table, the table shrinks to keep fitting 100% of the page. But, all the inputs seem to basically resize at about the same rate with no regard for which input has the most space to give up. By space, I mean the empty area in the input that does not show any data; the extra space to the right (as my inputs are left aligned).
Is there a css property that would apply to this situation to help accomplish reducing the size of the inputs which have the most white space to give up first and putting off truncating visible text as long as possible?
You could try auto sizing the inputs using a script like this:
https://stackoverflow.com/a/931695/288568
Anyways, the script is not for drop downs so far, but could be adapted.
But: If in the first line there is a 1 and in the second a 11 then the inputs would have different sizes.
Related
I have a grid inside a component which has some rows and columns. The problem is that there is some empty space after the last row of the grid and I want to get rid of it. This is what it looks like in the inspector, it actually shows that the whole content is the grid, whereas only the rows with actual information are the content of the grid. I want to remove this white space which is there for no reason. For clarification this is the empty unwanted space:
You could use setHeightByRows to set the Grid to contain a fixed amount of rows, or setHeightUndefined to always show all the rows (bad idea if your Grid ever has massive amounts of data in it).
In HTML tables that are wider than the viewport, text is wrapped, so the table may fit after all. To force all fields on a single line (and possibly extend outside the viewing area) I use 'white-space: nowrap' for all TDs in the table.
This is just fine for most of my tables, but in one scenario this does not work very well. I have a table with 20 columns or so with terse column headings and content, except one, which is a description field of 256 characters maximum. Using 'nowrap' is quite right for all columns, but the description column is now a very wide column indeed.
Is there a (CSS) way to specify that fields should be as small as possible (no min-width), keep on one line (nowrap), except when longer than some maximum field width (max-with: 250px). It would be nice if it could be applied to all TDs, where a reduction of the maximum width would start other fields wrapping as well.
So basically, I have a react app and I am trying to create a grid of square elements but:
i dont want to
shrink them below a certain size (meaning that when the page
shrinks, the last elements on a row are pushed to the next row
etc.).
I was also hoping to put in a few special 2x2 elements in the grid (realistically not
many, between 1-3)
I am looking to be able input a series of objects (ordered by priority) and have the page dynamically allocate them into the grid space as best it can.
I have done bootstrap grids in the past, 1. could be achieved fairly easily by changing the .col-x value at certain screen widths so the elements wrap
But 2. seems really hard:
making a static row with a 2x2 element and some 1x1 elements seems
easy, but then it will all break when the above row tries to wrap, or
when i have to wrap elements in this static row.
I was also thinking of offsetting 2 consecutive rows and just placing a div with the 2x2 boxes over the offset, but then i would have to change the row elements that are being offset on the fly, and i dont know how to get an element to tell me what row and column it is in.
Any ideas?
I've a table containing one row of radio options and another with two paragraphs out of which only one will be displayed and another hidden based on value selected by user in radio options.
The issue is, those two paragraphs are of different content length making one paragraph consuming more space in table. When user selects the option to display bigger paragraph, the table expands automatically to fit bigger content. But again later if user selects a radio option to display small paragraph, it does not shrink it back which should shrink to fit a small paragraph.
Is there any to handle it in CSS?
You could try add this css as below, if not work, could you please paste your codes here for further investigation? hope this helps.
table-layout:fixed;
I am not that advanced on CSS so I wanted to ask someone before reporting this as a problem.
I am using the latest (v2.0.3) bootstrap Hero example to show this issue. When I create a single_long_word of text greater than about 1/2 the column size (due to a large font or simply a large number of characters in a single word), the text is allowed to go outside of its column before the layout adjusts when I re-size the browser window to make it smaller.
All I had to do was change the text in the column to make a large or long word and then reduce the window size of the browser. It does eventually re-layout the columns to allow for more width, but not before the long word exceeds the boundary of the column it is in.
This happens for both normal and fluid containers in with a responsive grid.
It is easy to duplicate in Chrome by just going to this page and editing the text after inspecting a column element.
http://twitter.github.com/bootstrap/examples/hero.html
I could not post an image since I am too new to stackoverflow