Develop Reference

Material UI Table Cells Identical Fixed Width

I have a Material UI Table below. All of the table's columns are fit sized to 205px. Table itself set to be 100% width. So when I load the page if there is available space table do get bigger. The problem is if there is not enough space columns need to shrink based on the text inside them but they don't. They are stuck at 205px width.
I removed all paddings no help either. Text inside the each cell is an input field so if I make the input field width and all cells 60px the width went down to 191 but it's still giving each cell way bigger width than they need so columns are way larger than they should be. I changed width of the table, width of the container all no help.
I have pretty much exact table structure as in this example here;
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table
If you see table columns unnecessarily too large in this example too. What's causing columns to be way larger than what they need to be? Why they're all identical fixed to some size?

The input in the table cells have a default width and are making the columns to be not shrinkable, Changing width of input to 100% might make input to take parents width.
https://codesandbox.io/s/optimistic-benz-ilnz2

Defining autosize column for only one spesific column is possible for ag-grid?

I want to make auto size content for one spesific column at ag-grid. But I think this autoSizeColumns proeprty for all grid columns. What can I do? Is there anything else?

autoSizeColumns(colKeys) accepts an array of column IDs to auto size based on their content.
gridOptions.columnApi.autoSizeColumns(["SOME_COLUMN_ID"]);
Also setting the minWidth && maxWidth in the column definition will lock the column size regardless of dragging the header or using one of the API methods.

Col in table colgroup is getting hidden

I'm trying to develop a fixed header table.It is a kind of widget, where use will be allowed to set width to columns whichever he wants.
Scenario:
Table(width is set to 500px) has four columns where if we don't specify width at col tag level,all columns are optimized to total table width like this:
If we specify width to 2 columns at col level whose total width is less than table width, then table looks like as follow:
But, if width of the 2 columns are greater than table width, then remaining columns are getting hidden, though table wrapper(<div class="v-grid-content">) has overflow:auto.Scrolling is enabled but only two fields are shown:
I am not getting what is wrong, can somebody help. Here is the jsfiddle.
I tried to keep min-width to col,but that didn't work.
Do we need to set width to every col??

Do we need to set width to every col?
No, you don't. You can set a width to some – any other column widths will get computed by the browser as usual. (Taking into account the widest content of that column and the overall table width.)

Dropdown menu css to expand the width based on content

I was trying to create a dropdown that had dynamic values, basically there are 5 text boxes and a drop down on a page and the dropdown gets the values from those textboxes. If the user enters some text that is bigger than the width of the drop down then it is skewed on IE.
I fixed that by select:hover{width:auto;position:absolute}. Now the problem is if the user enters values that are all smaller than the original size of dropdown it contracts, I want a way so that it doesn't contract and still expands. Any thoughts??
I am using dojo and javascript, cant use jquery.

In JavaScript find the max width of the text, if it is bigger than the dropdown's current width, change the width to the max width of the text.
This will work like you desire (width not contracting) when you change the text again, because the JavaScript will find the max width of the text to be less than the dropodown's, so the width will not change.

Simple fix would be to pick a width for your Dropdownlist and set max and min lengths to your textbox values so you can control over the size of your submissions. Otherwise i could type in anything.

Ill get you back to 0 on your question and provide a solution.
Use CSS. On the select box set a width and even if the content in it is smaller it wont get smaller.
<select style="min-width:200px;" id="someUniqueIdentifier">
/* Your dynamicaly generated options*/
</select>

The most simple solution if I have read the question correctly would be to use the min-width property (developer.mozilla.org/en-US/docs/CSS/min-width) like so - select { min-width: 50px; width: auto; } - This would allow the width of the control to expand as needed but not to fall below the minimum width you defined. This could be defined on the :hover state selector, but would work just as well (and I would suggest) on the element itself. IE8+ support, no JavaScript required.

In javascript, can I determine the ACTUAL padding of a table cell?

Can I determine the actual padding in effect for a cell?
I know about style.leftPadding, for example, but AFAICT that only reflects a padding value that was explictly set with in-line styling or javascript. It does not seem to reflect padding that was applied by style sheets.
I also know about clientWidth and offsetWidth, but I don't think those are useful either.
Thoughts?

you can get the table cell padding(inner) by document.all.youtableid.cellPadding
or you can move through the every cell by dom and get the padding