Some of my columns need explicit widths, while others should just fill up all available space.
There is a forceFitColumns option, but it seems to ignore any explicit widths I've set. I want my explicit widths to be respected, and for implicit ones to be estimated sanely.
I guess to get this behavior I'd have to disable the default column width and rewrite autoSizeColumns to not mess up my explicit column widths. I can imagine a convention where you put in '*' for the column width if you'd like it to be auto-sized instead of using the default. Has anyone made a fork that has this kind of feature?
The "*" implicit width notation would be useful indeed.
Meanwhile, you can also set minWidth and maxWidth on your explicitly-sized columns so that they are not resized by forceFitColumns.
Related
I am attempting to create a spreadsheet where there's a minimal width for each column, but setting both colWidths and autoColumnResize in the settings seem to negate the auto column resizing.
var hot = new Handsontable(container,{
data: data,
colWidths:100,
autoColumnResize:true // negated by the colWidths setting
});
If I remove the colWidths setting, the column resizes fine.
You can pass the following object in the option autoColumnResize :
autoColumnResize:{syncLimit: 100},
The columns widths will be resize dynamically but with a minimum value of 100. See this quick example.
You can find in the documentation the difference between the use of syncLimit and asyncLimit :
Column width calculations are divided into sync and async part. Each
of this part has own advantages and disadvantages. Synchronous
counting is faster but it blocks browser UI and asynchronous is slower
but it does not block Browser UI.
I'm kind of confused how the neat grid works when using block-collapse - assuming a 3 column grid, the first two column result in a width of something like 34....% and the third column is around 31...% so I'm not getting three equal columns next to each other.
am I missing something here?
block-collapse removes the margin gutter, and adds it to the block. This works across the row until the end, when the final block just takes up the remaining space. This is why you are seeing a smaller last column.
If you have a row, and set that to $display: table, then children of it will be displayed as table cells, which will give you an even distribution across the row which I think is what you are after.
Pen is here:
http://codepen.io/mikehdesign/full/jPmWza/
Here is an image showing a standard set of columns, block-collapse and a table display:
I have a drop down box and old data in the sheet that doesn't match up to the drop down box list needs to be added to my conditional formatting so the cell stands out a bit better.
Is it possible to set the conditional formatting of a cell based on whether or not the cell has a validation error?
It is impossible to do that the way you want, but there is a workaround.
You can use conditional formatting with a custom formula.
If you data validation is from a range, use that range. If it is from a list, create a range with that list.
For example a range on Sheet2 A1:A10 has the values that are used in data validation. You want to format the range Sheet1 B:B based on values found in that range.
First, select the column in your table(or the whole table) and colour it Red. Then use Conditional Formatting with the following custom formula to colour everything that matches White
=COUNTIF(INDIRECT("Sheet2!$A$1:$A$10"),"="&B1)
You can also add another conditional formatting to colour all the empty cells as white if you have empty space after your table
Good stuff! It took me a while but I found that this formula works and will color the cells that are not in the range AND do not have a blank cell at the first column. This is good to spot data validation errors and works better than looking for a little tiny triangle at the top right of each cell.
=AND(NOT(COUNTIF($M$3:$M$40, H3)),A3<>"")
This worked for me.
Under conditional formatting, new rule, use formula.
=IF(OR(A2="valid data 1",A2="valid data 2"),"FALSE","TRUE")
Then set error condition.
Let's say I have three divs: a, b and c, that share a common wrapper div and that I'd like to align as a triptych.
Is it possible to have either b or c have a fixed width (imagine a sidebar with nav), while the other two expand fluidly? Note that the source order matters (a, b, c order). A max-width (rather than fixed) could work fine as well, as long as it supports fluid expansion of the other two divs.
Yes you can! Check out this SassMeister showing fixed and fluid columns.
Now, there are a couple of caveats to this. First, you need fixed width gutters as you can't have gutters in proportion to fluid columns if not all columns are fluid. Second, you need to be using the calc output style from Singularity Extras. This means your columns will be output using CSS3's calc that, while widely available, does require a fallback for browsers that do not support it. Other than that, the calc output style works exactly like the isolation output style.
Last year when the calc output style was introduced, I wrote a blog post titled Bulletproof Combo Fixed and Fluid Grids with CSS Calc explaining in detail about using calc to create fixed and fluid grids and introducing it to Singularity.
I'm using singularitygs as my grid system and am really like the flexibility but I have come across a fairly unique situation and I'm not sure if singularity (or any other grid system) addresses
I have a row that span the entire column width, that breaks up the header portion and the content portion of the document. There is an element, div.b, that sits within above the full column bars next to div.a in larger layout. But on a medium sized layout and below, that element falls below the full span row. Here is the source order and the desired output, showed using a 10 column layout for simplicity.
Source Order
div.a
div.b
div.c
div.d
div.e
div.f
div.g
div.h
Large Layout
Medium Layout
Thanks in advance for any help and ++ to the creators of the grid system
Interesting use case. Honestly it’s going to be pretty hard until CSS grid layout comes out. While Singularity can handle any order horizontally, the vertical reordering like "D" and "G" stacked is going to be tricky. There might be a clever use of floats to get this working but it will probably be more hand manipulation of elements than pure Singularity magic.